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

У описания шкурки может быть описан атрибут SkinId. Скин с установленным атрибутом SkinID называется именованным скином. Этот атрибут при описании каждого типа элемента управления должен быть уникальным. Скин применяется к тем элементам, у которых значение свойства SkinId совпадает со SkinId описания:

<asp:Label Runat="server" SkinId="June" ForeColor="Teal" Font-Names="Verdana"
Font-Size="X-Small" />

При этом, если у элемента не определен SkinId, применяется скин, в котором SkinId тоже отсутствует ( скин по умолчанию). Этот скин для каждого класса может быть описан только один раз.

Определим еще один именованный скин календаря:

<asp:Calendar runat="server" SkinId="June" BackColor="#C0FFC0" 
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="#C0FFC0" ForeColor="#FF8000"  
Height="1px" /> 
<TitleStyle BackColor="Green" BorderColor="#3366CC" 
BorderWidth="1px" Font-Bold="True" Font-Size="10pt" 
ForeColor="White" Height="25px" /> </asp:Calendar>

При отображении приведенной ниже страницы в браузере пользователя, первый

календарь будет отображаться с использованием именованного скина June, а второй — используя общий скин по умолчанию:

<form id="form1" runat="server">
    <div>
      <table>
        <tr>
          <td style="width: 100px">
      <asp:Calendar ID="Calendar1" runat="server" 
VisibleDate="2006-06-01" SkinID="June"></asp:Calendar>
          </td>
          <td style="width: 100px">
      <asp:Calendar ID="Calendar2" runat="server" 
VisibleDate="2006-07-01"></asp:Calendar>
          </td>
        </tr>
      </table>
    </div>
    </form>

Некоторые свойства элементов управления не могут быть изменены в файлах скинов. Например, такие свойства, как ID и EnableViewState, помечены как запрещенные к установке в файлах скинов. Также не допускаются к установке через скины такие атрибуты, как CommandName класса Button, AllowPaging, DataSource класса GridView и т.д. Словом, если свойство влияет не на внешний вид, а на поведение элемента управления, или строго индивидуально, — скорее всего его нельзя будет изменить. Это определяется разработчиком элемента управления с помощью атрибута ThemeableAttribute. Этим атрибутом можно пользоваться и создавая собственные элементы управления. Атрибут ThemeableAttribute может быть применен и к классу для обозначения поддержки данным контролом настройки своих параметров через скины. Например, класс Control определен с атрибутом Themeable Attribute=False, и все классы — непосредственные наследники Control не допускают настройки свойств через файлы .skin. Это классы Literal, Repeater, MultiView, Xml и другие. Хотя класс WebControl наследует Control, он помечен атрибутом Themeable=True, и это распространяется и на его наследников, каковым являются большинство элементов управления.

Содержание страниц не ограничивается только выводом элементов управления. Например, текст может выводиться вне элемента Label. Файлы каскадных таблиц стилей тоже могут находиться в папке темы. При этом стили будут применяться ко всем страницам с данной темой:

body
{
	font-size: x-small;
	font-family: Verdana;
	color: #004000;
	background-color: #F0FFF0;
}

Установка стиля в файле css относится ко всему тексту страницы, в том числе к элементам Repeater и Literal. При этом если в каком-нибудь элементе явно установить шрифт, эти установки переопределят установки из css.

В папки с темами можно включать картинки. Их используют в файлах скинов. В приложении Starter Kit картинки задают внешний вид кнопок:

<asp:ImageButton Runat="server" ImageUrl="Images/button-
import.gif" SkinID="import" />
<asp:imagebutton runat="server" Imageurl="Images/button-login.gif"
skinid="login" />

Программная работа с темами

Как и шаблоны, темы можно назначать не позднее события PreInit:

protected void Page_PreInit(object sender, System.EventArgs e)
{
Page.Theme = Request.QueryString["ThemeChange"];
}

Заключение

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