Стили и шаблоны в Silverlight 2

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

Понимание стилевого оформления

Чтобы понять, что такое стилевое оформление, рассмотрим простой пример использования кнопки в Silverlight-приложении. Далее представлен XAML для элемента управления Button:

<Canvas Background="LightBlue">
  <Button x:Name="btn" Content="Click Me!" Width = "140">
  </Button> 
</Canvas>

Это обеспечит отображение кнопки в стандартном стиле Silverlight (серебристого цвета, как будто с подсветкой сверху), как можно увидеть на рис. 12.1.

Рис. 12.1. Базовая кнопка Silverlight

Как было показано в "Элементы управления Silverlight: представления и компоновки" , "Элементы управления Silverlight: представления и компоновки", и в "Элементы управления Silverlight: расширенные элементы управления" , "Элементы управления Silverlight: расширенные элементы управления", многие элементы управления Silverlight, включая Button, являются элементами управления с содержимым,т.е. могут формировать визуальное представление XAML-содержимого. В случае с Button это означает, что он может включать кое-что более интересное, чем просто строка "Click Me!" (Щелкни меня!), и что в него можно добавлять некоторую функциональность, обеспечивающую пользователю более широкие возможности при взаимодействии с этим элементом управления.

Например, создадим кнопку с изображением. Для этого используем изображение как содержимое кнопки. Например:

<Canvas Background="LightBlue"> 
  <Button Canvas.Left="40" Canvas.Top="40" x:Name="btn" 
         Width="60" Height="80"> 
    <Button.Content> 
      <StackPanel Orientation = "Vertical"> 
        <Image Source="icon.jpg" Height="48" 
                 Width = "48"> 
        </Image>
        <TextBlock Text="Click!"> </TextBlock> 
      </StackPanel> 
    </Button.Content> 
  </Button> 
</Canvas>

Как это выглядит на экране, представлено на рис. 12.2.

Рис. 12.2. Кнопка, использующая XAML содержимое

Вас не устраивает стандартный шрифт и цвет надписи на кнопке, и вы хотите еще больше изменить ее внешний вид? Сделать это в XAML довольно просто. Можно задать свойства, включающие семейство шрифтов, размер, насыщенность и т.д., настраивающие внешний вид кнопки. Например, посмотрим на обновленный TextBlock:

<TextBlock Text="Click!" FontFamily="Comic Sans Ms" 
               Foreground="MediumBlue" FontSize="20"> 
</TextBlock>

Также добавим несколько других реализаций кнопки. В XAML это сделать довольно просто, потому что можно просто скопировать первую кнопку, а затем задать свойства расположения. Пример представлен на рис. 12.3.

Рис. 12.3. Несколько экземпляров элемента управления Button

Выглядит славно и очень просто реализуется, но использование такого подхода приведет к разрастанию XAML и, что еще хуже, большому количеству повторяющегося кода, что усложнит проверку, отладку, обслуживание и обновление приложения.

Возьмем элементы управления TextBlock. Для каждого из них явно объявлены свойства FontFamily, Foreground и FontSize, несмотря на то, что всем им задано одно и то же значение. А что, если требуется изменить какое-то из этих значений. Придется просматривать каждый элемент управления один за другим, чтобы обновить их все.

Вот где возникает необходимость в стилях. Давайте рассмотрим, как вынести некоторые из этих данных в стиль.

Создание стиля

Стиль создается в разделе <Resources> (Ресурсы) контейнера. Здесь может быть создан один или более стилей, для которых задается имя стиля и тип объекта, к которому будет применяться стиль. Например, чтобы создать стиль TextBlockStyle (Стиль текстового блока) для элемента управления TextBlock, используется такой XAML:

<Style TargetType="TextBlock" 
            x:Key="TextBlockStyle"> 
</Style>

Для стиля задается тип элемента управления, к которому он может применяться. Однако то, что этот стиль предполагается для TextBlock, не означает, что все экземпляры TextBlock будут использовать его. Вы не ограничены одним стилем для одного типа. В стиле должен быть задан тип элемента управления, для которого предназначен стиль и Key (Ключ) стиля. Таким образом, можно иметь множество разных описаний стилей для элемента управления TextBlock с разными Key. Тогда, задавая свойство Style (Стиль) для разных TextBlock, вы просто выбираете тот стиль, который желаете применить к тому или иному TextBlock, по имени. Это будет продемонстрировано через мгновение, но сначала рассмотрим настройку стиля свойств TextBlock.

Это выполняется с помощью Setter (Установщик). Setter - это тег XAML, определяющий свойство и значение,которое необходимо задать этому свойству.

Далее представлен XAML, используемый ранее для задания свойств Text, FontFamily Foreground и Font-Size элемента TextBlock:

<TextBlock Text="Click!" FontFamily="Comic Sans Ms" 
           Foreground="MediumBlue" FontSize="20"> 
</TextBlock>

И вот теперь стиль, который делает то же самое:

<Style TargetType="TextBlock" x:Key="TextBlockStyle">
  <Setter Property="FontFamily" Value="Comic Sans Ms">
  </Setter>
  <Setter Property="Text" Value="Click!">
  </Setter>
  <Setter Property="Foreground" Value="MediumBlue">
  </Setter>
  <Setter Property="FontSize" Value="20">
  </Setter> 
</Style>

Применяется этот стиль к TextBlock посредством свойства Style. Поскольку стиль определен как ресурс, для задания имени стиля используется синтаксис с ключевым словом StaticResource (Статический ресурс):

<TextBlock Style="{StaticResource TextBlockStyle}"> 
</TextBlock>

И теперь все свойства, применяемые к элементам управления TextBlock кнопки, задаются в одном месте, что значительно упрощает обслуживание и делает XAML удобным для восприятия и понимания.

Любое из свойств, определенных стилем, можно переопределить, просто задавая его в самом объекте. Например, требуется переопределить свойство Foreground, заданное стилем MediumBlue (Светло-синий). Сделать это очень просто, как показано в примере:

<TextBlock Style="{StaticResource TextBlockStyle}" 
         Foreground = "Black">
</TextBlock>

В этом случае, заданное здесь свойство Foreground переопределяет настройку стиля, и теперь для текста TextBlock будет использоваться черный цвет.

Также обратите внимание, что хотя стиль в данном примере определен для TextBlock, располагающегося в кнопке с изображением, он может применяться к любому TextBlock в данном Canvas.