Стили и шаблоны в 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.
Как было показано в "Элементы управления 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.
Вас не устраивает стандартный шрифт и цвет надписи на кнопке, и вы хотите еще больше изменить ее внешний вид? Сделать это в XAML довольно просто. Можно задать свойства, включающие семейство шрифтов, размер, насыщенность и т.д., настраивающие внешний вид кнопки. Например, посмотрим на обновленный TextBlock:
<TextBlock Text="Click!" FontFamily="Comic Sans Ms"
Foreground="MediumBlue" FontSize="20">
</TextBlock>Также добавим несколько других реализаций кнопки. В XAML это сделать довольно просто, потому что можно просто скопировать первую кнопку, а затем задать свойства расположения. Пример представлен на рис. 12.3.
Выглядит славно и очень просто реализуется, но использование такого подхода приведет к разрастанию 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.