Стили элементов управления. Темы и шкурки

Темы и шкурки

В интерфейсе почтовой службы Rambler дизайн страниц меняется в зависимости от времени года. Пользователь может сам выбрать себе вариант дизайна. Подобной функциональности в ASP .NET можно добиться с помощью тем.

Темы похожи на CSS тем, что тоже позволяют определять внешний вид страниц. Но темы могут сделать гораздо больше них. Таблицы стилей определяются для тегов HTML, а скины, которые входят в тему, — для элементов управления. Скины применяются на стороне сервера, поэтому могут использоваться для установки специфичных свойств серверных контролов. Например, для элемента управления Calendar таким свойством является DayNameFormat. CSS никак не позволяет оперировать такими свойствами.

Темы можно применять к страницам, к сайту или отдельным элементам управления.

Файлы тем находятся в папке с зарезервированным названием App_Themes. Эту папку можно создать, если в контекстном меню проекта выбрать "Add ASP .NET Folder". В папке App_Themes можно создавать темы, например, для разных времен года. У каждой темы будет свой каталог, в котором будут находиться относящиеся к ней файлы. На многих сайтах пользователь может выбрать тему. Вложение тем друг в друга не допускается.

Каждая тема обычно состоит из одного или нескольких файлов скинов с расширением ".skin", а также других, необходимых для задания внешнего вида сайта файлов, таких как файлы каскадных таблиц стилей, картинок, XSL-преобразований и так далее, которые также могут быть упорядочены в поддиректориях корневой директории темы. Файлы скинов и таблиц стилей обычно расположены в корне темы, а картинки — в поддиректории Images.

Темы можно применить к странице с помощью атрибута Theme директивы Page. Тему можно поменять программно. Поэтому можно дать возможность пользователю выбрать тему. Тему можно установить до или во время события PreInit:

protected void Page_PreInit(object sender, EventArgs e)
    {
        Page.Theme = "Black";
    }

Тему можно применить ко всем страницам приложения, если в файле web.config вставить эту директиву:

<configuration>
<system.web>
<pages theme=" Black " />
</system.web>
</configuration>

Если тема установлена в странице, она имеет преимущество перед глобальной темой. Темы страницы переопределяют свойства элементов управления. Если нужно, чтобы темы не применялись к элементу, нужно установить его свойство EnableTheming в False.

Если нужно отменить применение темы к группе элементов, можно поместить их в Panel и установить его свойство EnableTheming в False.

Свойство EnableTheming можно менять и на уровне страницы:

<%@ Page Language="C#" AutoEventWireup="true" EnableTheming="False"%>

Атрибут StylesheetTheme работает так же, как и Theme. Но если тема установлена с помощью этого атрибута, то свойства управления элемента имеют преимущество перед темой страницы.

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

Скин — это шаблон элемента управления с определением набора визуальных свойств, которые будут использоваться для генерации элементов управления данной темы. Скины могут работать вместе с картинками и таблицами стилей. Один ".skin"-файл может хранить множество разных элементов управления. Например, в проекте "Starter Kit" определены две темы — Black и White. В файле Default.skin обеих тем хранятся скины элементов ImageButton, Image, GridView.

Можно создать столько файлов шкурок, сколько необходимо. Для удобства и ясности можно создать файлы скинов для каждого элемента, например, Label.skin, GridView.skin.

Создайте в папке App_Themes тему Summer. Добавьте в тему скин Calendar.skin.

Описание стиля элемента управления похоже на описание на странице, с тем отличием, что атрибут ControlId не указывается. Однако необходимо указать атрибут runat="server":

<asp:Calendar runat="server" BackColor="Honeydew" 
BorderColor="Teal" BorderWidth="1px" CellPadding="1" 
DayNameFormat="Shortest" Font-Names="Verdana" Font-Size="8pt" 
ForeColor="DarkSlateGray" Height="200px" Width="220px"> 
<SelectedDayStyle BackColor="#009999" Font-Bold="True" 
ForeColor="#CCFF99" /> <SelectorStyle BackColor="#99CCCC" 
ForeColor="#336666" /> <WeekendDayStyle BackColor="#C0FFC0" /> 
<OtherMonthDayStyle ForeColor="#999999" /> 
<TodayDayStyle BackColor="#99CCCC" ForeColor="White" /> 
<NextPrevStyle Font-Size="8pt" ForeColor="#CCCCFF" /> 
<DayHeaderStyle BackColor="#80FF80" 
ForeColor="#336666" Height="1px" /> 
<TitleStyle BackColor="Green" BorderColor="#3366CC" 
BorderWidth="1px" Font-Bold="True" Font-Size="10pt" 
ForeColor="White" Height="25px" /> </asp:Calendar>

Теперь на всех страницах, где установлена тема Summer, календарь будет выглядеть так:

Рис. 13.4.