Главная » Silverlight » Связывание шаблонов

0

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

<Button Template="{StaticResource ButtonTemplate}"

Content="KHOnKa на основе шаблона" Margin="10" Padding="20"x/Button>

Приведенная выше разметка присваивает свойству Margin значение 10, а свой­ству Padding — значение 20. Значение свойства Margin влияет на элемент, содержа­щий кнопку, а свойство Padding игнорируется, в результате чего содержимое вплотную примыкает к границе кнопки. Следовательно, проблема состоит в том, что свойство Padding не влияет на внешний вид кнопки, если не применить его в шаблоне. Шаблон должен извлечь свойство Padding и добавить пустые полоски вокруг содержимого.

К счастью, надстройка Silverlight содержит средство, специально предназначенное для решения этой проблемы. Оно называется связывание шаблона. С его помощью ша­блон извлекает значение из элемента управления, к которому он применен. В данном примере связывание шаблона можно применить к значению свойства Padding для соз­дания пустых полосок вокруг объекта ContentPresenter.

<ControlTemplate x:Key="ButtonTemplate" TargetType="Button"> <Border BorderBrush="Orange" BorderThickness="3" CornerRadius="10" Background="Red">

<ContentPresenter Margin=" {TemplateBinding Padding) ">

</ContentPresenter> </Border>

</ControlTemplate>

Приведенная выше разметка добавляет пустые полоски между рамкой и содержи­мым. Результат показан на рис. 13.2.

Рис. 13.2. Кнопка с пустыми полосками Padding

Примечание. похоже на обычное связывание данных (см. главу 16), за исключением того, что оно проще. Упрощение обусловлено тем, что оно разработано специально для использования в шаблонах элементов управления. Шаблоны поддерживают только одно направление связывания: информация передается от элемента управления к шаблону, но не наоборот.

Чтобы полнее учесть свойства класса Button, необходимо установить несколько свойств объекта ContentPresenter. Например, дополнительное связывание необходимо для получения таких параметров, как выравнивание текста, перенос текстовых строк и т.д. В кнопке, установленной по умолчанию, используется шаблон, который содержит следующий объект ContentPresenter.

<ContentPresenter

Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate)" HorizontalContentAlignment= "(TemplateBinding HorizontalContentAlignment}" Padding="{TemplateBinding Padding}" TextAlignment="{TemplateBinding TextAlignment}" TextDecorations="{TemplateBinding TextDecorations}" TextWrapping="{TemplateBinding TextWrapping}" VerticalContentAlignment=

"{TemplateBinding VerticalContentAlignment}" Margin="4,5,4,4"> </ContentPresenter>

Для свойства Content связывание шаблона играет ключевую роль: оно извлекает со­держимое из элемента управления и выводит его в объекте ContentPresenter. Данное связывание установлено неявно, поэтому его не нужно включать в разметку.

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

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

Установка шаблонов посредством стилей

применяется не только в объектах ContentPresenter. Фак­тически его можно использовать в любом месте шаблона. Рассмотрим пример кнопки, в элементе Border которой жестко закодирован красный фон. Применить связывание для установки красного фона можно следующим образом.

<Border BorderBrush="Orange" BorderThickness="3" CornerRadius="10"

Background="{TemplateBinding Background}">

Что лучше сделать — жестко закодировать цвет, чтобы сохранить внешний вид кноп­ки, или применить связывание шаблона, чтобы сделать ее более гибкой?

В данном случае оптимальным будет компромиссное решение: шаблоны можно объ­единять со стилями. Базовая идея состоит в использовании правил стиля для установ­ки как шаблона, так и значений, используемых по умолчанию.

<Style х:Key="ButtonStyle" TargetType="Button"> <Setter Property="Background" Value="Red"X/Setter>

<Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="Button"> <Border BorderBrush="Orange" BorderThickness="3" CornerRadius="10"

Background="{TemplateBinding Background}"> <ContentPresenter

Margin="{TemplateBinding Padding}"> </ContentPresenter> </Border> </ControlTemplate> </Setter.Value> </Setter>

</Style>

В каждой конкретной ситуации необходимо решить, как лучше определить шаблон ControlTemplate: в разметке (как показано выше) или в отдельном ресурсе.

<Style x:Key="ButtonStyle" TargetType="Button"> <Setter Property="Background" Value="Red"x/Setter> <Setter Property="Template"

Value="{StaticResource ButtonTemplate}"></Setter>

</Style>

Объединение стилей и шаблонов полезно, когда нужно устанавливать свойства, не предоставляемые объектом ContentPresenter или контейнерными элементами в шаблоне элемента управления. В приведенном выше примере связывание не передает кнопке цвет переднего плана и параметры шрифта. Это объясняется тем, что некоторые свойства (например, Foreground, FontFamily, FontSize, Fontweight и так далее) не под­держивают наследование. При установке их значений в элементе более высокого уровня (например, в классе Button) они каскадируются вниз до вложенного элемента (напри­мер, до текстового блока TextBlock, вложенного в кнопку). Объект ContentPresenter не предоставляет эти свойства, потому что они не нужны ему. Они перетекают вниз от элемента управления до содержимого, пропуская объект ContentPresenter.

В некоторых случаях желательно изменять значения наследуемых свойств, чтобы лучше учесть параметры пользовательского шаблона. Предположим, что в приведен­ном выше примере нужно установить белый цвет переднего плана, чтобы текст кноп­ки был виден на цветном фоне. Однако от страницы Silverlight наследуется стандарт­ный черный цвет шрифта. Более того, цвет нельзя установить с помощью объекта ContentPresenter, потому что он не предоставляет свойства ForeGround. Решение со­стоит в объединении шаблона элемента управления с объектом Setter стиля, который устанавливает белый цвет текста.

<Style х:Key="ButtonStyle" TargetType="Button"> <Setter Property="Foreground" Value="White"x/Setter> <Setter Property="Background" Value="Red"x/Setter> <Setter Property="Template"

Value=" {StaticResource ButtonTemplate}"x/Setter>

</Style»

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

Повторное использование цветов

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

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

<SolidColorBrush x:Key="BackgroundBrush" Color="Red">

</SolidColorBrush>

Этот ресурс можно использовать в стилях и шаблонах элементов управления.

<Style х:Key="ButtonStyle" TargetType="Button"> <Setter Property="Foreground" Value="White"x/Setter> <Setter Property="Background"

Value="{StaticResource BackgroundBrush}"></Setter> <Setter Property="Template"

Value="{StaticResource ButtonTemplate}"></Setter>

</Style»

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

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

<Color x:Key="BackgroundColor">#FF800000</Color>

<SolidColorBrush x:Key="ButtonBorderBrush"

Color=" {StaticResource BackgroundColor"x/SolidColorBrush>

Этот способ позволяет повторно использовать цветовую схему в разных ситуаци­ях (например, в сплошных и градиентных кистях), не дублируя информацию о цветах в разметке. Можно даже изменять цветовую схему всего приложения, изменяя един­ственный набор цветовых ресурсов.

Примечание. При определении цвета как ресурса содержимое должно быть либо именем цвета, либо шестнадцатеричным кодом цвета HTML (как в предыдущем примере). К сожалению, в разметке XAML нельзя объявить цвет с помощью компонентов RGB.

Источник: Мак-Дональд, Мэтью. Silverlight 3 с примерами на С# для профессионалов. : Пер. с англ. —- М. : ООО «И.Д. Вильяме», 2010. — 656 с. : ил. — Парал. тит. англ.

По теме:

  • Комментарии