Создание шаблонов

38

Несмотря на всю простоту рассмотренного ранее шаблона для оформления круглой кнопки, для его построения потребовалась немалая порция разметки XAML. Если бы вам пришлось создавать вручную крупномасштабные шаблоны, содержащие сложные кисти, виды анимаций и прочее, то у вас свело бы от судороги пальцы из-за большого объема набираемого исходного текста. К счастью, в среде Expression Blend IDE имеется целый ряд средств, упрощающих процесс разработки шаблонов элементов управления.

Создание копии используемого по умолчанию шаблона

Для того, чтобы упростить построение специальных шаблонов в Expression Blend, можно сначала попытаться извлечь копию используемого по умолчанию шаблона и видоизменить его по собственному усмотрению. И хотя такой подход дает больше всего возможностей для приспосабливания стандартного шаблона под конкретные нужды, он довольно сложен, поскольку в этом случае приходится непосредственно иметь дело со всеми мелкими операциями низкого уровня. Но прежде чем переходить к некоторым довольно эффективным и в то же время простым альтернативным подходам, рассмотрим основные особенности видоизменения используемого по умолчанию шаблона.

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

Итак, создайте новый проект приложения на платформе WPF, присвоив ему имя WpfTemplatesWithBlend. А затем разместите ради простоты рассматриваемого здесь примера один элемент управления типа Button на монтажном столе исходного окна типа Window.

В данном примере рассматривается проект на платформе WPF. Если же вы разрабатываете свои проекты на платформе Silverlight, то формируемая в коде XAML разметка будет совсем иной, хотя основные приемы правки шаблонов остаются прежними.

Щелкните правой кнопкой мыши на вновь созданном элементе пользовательского интерфейса и выберите команду Edit Template --> Edit а Сору (Править шаблон --> Править копию) из всплывающего контекстного меню:

Создание копии используемого по умолчанию шаблона элемента управления

После выбора упомянутой выше команды из контекстного меню откроется диалоговое окно Create Template Resource (Создание ресурса для шаблона), аналогичное диалоговому окну Create Style Resource (Создание ресурса стиля). Присвойте новому стилю имя rawButtonTemplate (исходный шаблон кнопки) и сохраните его в качестве ресурса, применяемого на уровне приложения.

Откройте файл разметки приложения App.xaml в редакторе XAML и обратите внимание на то, что в элементе разметки <Style> по умолчанию устанавливается целый ряд значений таких общих для всех элементов управления свойств, как Background (Фон), BorderBrush (Кисть обводки границы), Padding (Заполнение) и пр. Но значения, присваиваемые этим элементам, не являются жестко запрограммированными. Напротив, они обнаруживаются во время выполнения в зависимости от количества заранее определенных ресурсов, причем одни из этих ресурсов определены в контейнере ресурсов приложения, а другие зависят от системных настроек. В приведенной ниже разметке дается частичное определение стиля rawButtonTemplate:

<Style x:Key="rawButtonTemplate" TargetType="{x:Type Button}">
			<Setter Property="FocusVisualStyle" Value="{StaticResource ButtonFocusVisual}"/>
			<Setter Property="Background" Value="{StaticResource ButtonNormalBackgroundFill}"/>
			<Setter Property="BorderBrush" Value="{StaticResource ButtonBorder}"/>
			<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
			<Setter Property="HorizontalContentAlignment" Value="Center"/>
			<Setter Property="VerticalContentAlignment" Value="Center"/>
            ...

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

Выбор свойств стиля из используемого по умолчанию последующего редактирования

После этого воспользуйтесь панелью Properties обычным образом, чтобы изменить значения выбранных свойств. Делается это аналогично видоизменению простого стиля, в котором вообще отсутствуют свойства шаблона элемента управления.

Исследование самого шаблона

Помимо исследованных выше установок простых свойств, рассматриваемый здесь стиль содержит элемент разметки <ControlTemplate>, в котором определяется целый ряд подчиненных элементов. Прежде всего, вы обнаружите в нем элемент, связывающий используемый по умолчанию шаблон с официально принятой в корпорации Microsoft "темой для кнопок" под названием ButtonChrome, как показано ниже:

<ControlTemplate TargetType="{x:Type Button}">
		<Microsoft_Windows_Themes:ButtonChrome x:Name="Chrome" 
				BorderBrush="{TemplateBinding BorderBrush}" 
				Fill="{TemplateBinding Background}" 
				RenderMouseOver="{TemplateBinding IsMouseOver}" 
				RenderPressed="{TemplateBinding IsPressed}" 
				RenderDefaulted="{TemplateBinding IsDefaulted}" 
				SnapsToDevicePixels="true">
		<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
				Margin="{TemplateBinding Padding}" 
				RecognizesAccessKey="True" 
				SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" 
				VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Microsoft_Windows_Themes:ButtonChrome>
...

Обратите внимание на то, что целому ряду приведенных выше свойств присваивается значение, возвращаемое из расширения разметки (TemplateBinding). Эта конкретная лексема XAML оказывается очень полезной при построении шаблонов, поскольку она позволяет связать значения свойств, установленных с помощью стиля в элементе управления, с соответствующими свойствами в самом шаблоне. Обратите также внимание на то, что и в данном шаблоне используется элемент разметки <ContentPresenter>, допускающий применение произвольного содержимого в конкретном стиле оформления.

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

<ControlTemplate.Triggers>
		<Trigger Property="IsKeyboardFocused" Value="true">
					<Setter Property="RenderDefaulted" TargetName="Chrome" Value="true"/>
		</Trigger>
		<Trigger Property="ToggleButton.IsChecked" Value="true">
					<Setter Property="RenderPressed" TargetName="Chrome" Value="true"/>
		</Trigger>
		<Trigger Property="IsEnabled" Value="false">
					<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
		</Trigger>
</ControlTemplate.Triggers>

Инструменты, применяемые для правки копии шаблона

А теперь, когда стала понятнее структура используемого по умолчанию шаблона, покажем, как пользоваться различными средствами Expression Blend для его правки. Как пояснялось выше, можно щелкнуть на области Style в навигационной цепочке (в верхнем углу рабочего пространства монтажного стола), чтобы внести изменения в основные свойства стиля.

Но если требуется углубиться в такие детали построения шаблона, как, например, элемент разметки <ContentPresenter>, то придется выбрать элемент пользовательского интерфейса, оформляемый по данному шаблону на панели Objects and Timeline или непосредственно на монтажном столе. Как показано на рисунке ниже, каждый атрибут элемента разметки <ControlTemplate> может быть выбран по отдельности для последующей правки:

Изменение нужной части шаблона

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

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

Попутно следует также заметить, что панель Triggers можно использовать в Expression Blend для ввода, удаления или видоизменения отдельных триггеров на платформе WPF:

Изменение триггеров в шаблоне
Пройди тесты
Лучший чат для C# программистов