Создание файла обложки

Оценить
(0 голоса)

Таблицы стилей мы уже обсуждали. Теперь нам надо рассмотреть определение файла об­ложки. В вашей теме может быть один или несколько файлов обложек. Возможно, вы захо­тите создать отдельный файл обложки для каждого элемента управления, облик которого вы намереваетесь менять. Либо вы можете определить единый файл обложки для всей вашей темы. Выбор за вами.

Внутри файла обложки находятся определения обложек для элементов управления (именно они и называются скинами). Вы объявляете каждую обложку точно так же, как вы пишете код разметки для элемента управления на Web-странице. Синтаксис аналогичен. Однако вы опускаете при­своение значений тем свойствам элемента управления, которые не относятся к обложке.

Существуют два типа определения для обложек: именованные обложки и неименованные обложки. Именованная обложка создается при помощи атрибута Skin id. Это позволяет вам определить уникальное имя для объявления обложки. В этом случае объявление обложки влияет только на те элементы управления вашего сайта, которые имеют точно такой же skinid. С другой стороны, неименованные обложки применяются ко всем элементам одно­го типа. Например, если вы хотите, чтобы все ваши кнопки выглядели аналогично, то соз­дайте неименованную обложку для элемента управления "кнопка". Когда вы примените эту обложку к странице, то все кнопки примут этот внешний вид. Давайте рассмотрим пример.

Для примера предположим, что вы хотите определить несколько обложек для вашей темы. Вы определяете именованные обложки для логотипа клиента на главной странице и для ме­ток заголовков на каждом экране. Затем вы создаете неименованные обложки для меток, текстовых полей, кнопок и элементов управления сеточным представлением просмотра.

В листинге 14.1 показан пример файла обложки. В верхней части находятся именованные об­ложки. Обратите внимание на использование атрибута skin Id. Этот атрибут будет использо­ваться тогда, когда обложка применяется к специфическим экземплярам этого типа элементов управления (в данном случае — к изображениям и меткам). Ниже следуют обложки, которые применяются к стандартным элементам управления — по одному для всех кнопок, меток, тек­стовых полей и сеточных представлений просмотра. Обратите внимание, что определение GridView включает определения для многих частей элемента управления. Эти определения вложены внутри определения GridView точно так же, как и для любой страницы ASP.NET.

Для компании В вам также нужен аналогичный файл. Для его создания скопируйте и вставьте данный файл в каталог компании В. Потом внесите незначительные изменения в обложку изображения, а также в шрифты и цвета определений других обложек. Затем вам нужно будет применить эти обложки к страницам сайта.

<%— named skins —%>

<asp:Image runat="server" SkinID="CustomerLogo" ImageUrl="'-/App_Themes/CompanyA/contoso. jpg"/>

<asp:Label runat="server" SkinID="TitleLabel" Font-Names="Arial Black"

Font-Size="X-Large" />

<%— default, control skins —%>

<asp:Button runat="server" Width="80px" Height="24px"

BackColor="#FFFFFF" ForeColor="MidnightBluen Font-NaIne=,,Tahoma,, Font-Size="10pt"

BorderColor="#003399" BorderStyle="Solid" />

<asp:Label runat="server" ForeColor="MidnightBlue"

Font-Names=,,Arial" Font-Size=,,Small" />

<asp:TextBox runat=Mserver" Width="265px" BackColor="White" BorderColor="MidnightBlue" BorderStyle="Solid" BorderWidth="lpx" Font-Names="Arial" Font-Size="Small" />

<asp:GridView runat="server" CellPadding="4" ForeColor="#333333"

GridLines="None">

<FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" /> <RowStyle BackColor="#F7F6F3" ForeColor="#333333" />

<EditRowStyle BackColor="#999999" />

<SelectedRowStyle BackColor="#E2DED6" Font-Bold="True"

ForeColor="#333333" />

‘<PagerStyle BackColor="#284775" ForeColor="White"

HorizontalAlign="Center" />

<HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="Whj.te" /> <AlternatingRowStyle BackColor="White" ForeColor="#284775" />

</asp:GridView>

Совет

Серьезной инструментальной поддержки для описания объявлений обложек нет. Вам придется писать эту разметку вручную. Однако для сокращения затрат времени мож­но создать страницу, которая включает все элементы управления темы. Затем ис­пользуйте визуальный конструктор для редактирования элементов управления на странице. И наконец, скопируйте эту разметку из страницы в объявление обложки, а затем удалите весь ненужный код объявления (включая и тег id).

Применение темы к сайту или странице
Создание пользовательского интерфейса, конфигурируемого пользователем
Работа с элементами управления WebParts
WebPartManager
Создание страницы WebParts

Добавить комментарий


Защитный код
Обновить

© 2017 www.visualstudios.ru. Все права защищены.