Шаблоны элементов управления

Большинство элементов управления имеют внешний вид и поведение. Рассмотрим кнопку: её внешним видом является область для нажатия, а поведением – событие Click, которое вызывается в ответ на нажатие кнопки. WPF эффективно разделяет внешний вид и поведение, благодаря концепции шаблона элемента управления. Шаблон элемента управления полностью определяет визуальную структуру элемента. Шаблон переопределяем – в большинстве случаев это обеспечивает достаточную гибкость и освобождает от необходимости написания пользовательских элементов управления.

Рассмотрим создание пользовательского шаблона для кнопки. Шаблон элемента управления – это экземпляр класса System.Windows.ControlTemplate. Основным свойством шаблона является свойство содержимого VisualTree, которое содержит визуальный элемент, определяющий внешний вид шаблона. В элементах управления ссылка на шаблон устанавливается через свойство Template. С учётом вышесказанного первая версия шаблона для кнопки будет описана следующей разметкой:

<Button Content="Sample" Width="120" Height="80" Padding="15">

<Button.Template>

<ControlTemplate>

<Border BorderBrush="Blue" BorderThickness="4"

CornerRadius="2" Background="Gold" />

</ControlTemplate>

</Button.Template>

</Button>

Рис. 43. Первая версия шаблона для кнопки.

Самый большой недостаток шаблона заключается в том, что он не отображает содержимое кнопки (свойство Content). Исправим это. У шаблона может быть установлено свойство TargetType. Оно содержит тип элемента управления, являющегося целью шаблона. Если это свойство установлено, при описании VisualTree для ссылки на содержимое элемента управления можно использовать объект ContentPresenter (для элементов управления содержимым) или объект ItemsPresenter (для списков).

<Button Content="Sample" Width="120" Height="80" Padding="15">

<Button.Template>

<ControlTemplate TargetType="Button">

<Border BorderBrush="Blue" BorderThickness="4"

CornerRadius="2" Background="Gold">

<ContentPresenter />

</Border>

</ControlTemplate>

</Button.Template>

</Button>

Рис. 44. Шаблон, отображающий контент.

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

<Button Content="Sample" Width="120" Height="80" Padding="15">

<Button.Template>

<ControlTemplate TargetType="Button">

<Border BorderBrush="Blue" BorderThickness="4"

CornerRadius="2" Background="Gold">

<ContentPresenter Margin="{TemplateBinding Padding} />

</Border>

</ControlTemplate>

</Button.Template>

</Button>

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

<Button Content="Sample" Width="120" Height="80" Padding="15">

<Button.Template>

<ControlTemplate TargetType="Button">

<Border Name="brd" BorderBrush="Blue" BorderThickness="4"

CornerRadius="2" Background="Gold">

<ContentPresenter Margin="{TemplateBinding Padding}" />

</Border>

<ControlTemplate.Triggers>

<Trigger Property="IsMouseOver" Value="True">

<Setter TargetName="brd" Property="Background"

Value="Yellow" />

</Trigger>

</ControlTemplate.Triggers>

</ControlTemplate>

</Button.Template>

</Button>

Обратите внимание – элемент триггера Setter содержит установку свойства TargetName. Как ясно из контекста, TargetName используется, чтобы обратиться к именованному дочернему элементу визуального представления. Этот дочерний элемент должен быть описан до триггера.

Заметим, что, как правило, шаблоны элементов управления описываются в ресурсах окна или приложения. Часто шаблон объявляют в стиле элемента управления. Это позволяет создать эффект «шаблона по умолчанию» (в отличие от стиля, шаблон нельзя указать в ресурсах без ключа).

<Window.Resources>

<Style TargetType="Button">

<Setter Property="Template">

<Setter.Value>

<ControlTemplate TargetType="Button">

<!--содержимое шаблона не изменилось-->

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

</Window.Resources>

Наш шаблон для кнопки прост. Однако во многих случаях шаблоны выглядят сложнее. Ниже перечислены некоторые из характеристик более сложных шаблонов[8]:

1. Шаблоны включают элементы управления, которые инициируют встроенные команды или обработчики событий.

2. Шаблоны используют именованные элементы, имена у которых обычно начинаются с префикса PART_. При создании шаблона следует проверять наличие всех этих именованных элементов, поскольку класс элемента управления может включать код, который манипулирует непосредственно этими элементами (например, присоединяет обработчики событий).

3. Шаблоны включают вложенные элементы управления, которые могут иметь свои собственные шаблоны.