Основы технологии WPF

Шаблоны

При проектировании WPF-приложений окна или страницы являются контейнерами, в которых располагаются другие контейнеры и различные интерфейсные элементы (метки, текстовые блоки, кнопки, списки и другие элементы управления). Например, создается окно с одной кнопкой ( рис. 2.4).

Рис. 2.4. Окно с одной кнопкой

XAML-документ описания созданного окна имеет следующий вид.

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="200" Width="300">
    <Grid>
        <Button Content="Кнопка" Width="100" Height="50"/>
    </Grid>
</Window>

В XAML-документе окна присутствуют три объекта: Window, Grid и Button. Данные элементы образуют логическое дерево окна ( рис. 2.5).

Рис. 2.5. Логическое дерево окна

В WPF логическое дерево детализируется с помощью визуального дерева, которое представляет элементы логического дерева в виде более мелких фрагментов. Так кнопка на уровне визуального дерева инкапсулирована в виде прямоугольника, включающего границу (класс ButtonChrome ), содержание (класс ContentPresenter ) и блок с текстом (класс TextBlock на рис. 2.6).

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

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

В WPF существуют шаблоны элементов управления, шаблоны данных и специализированные шаблоны панели.

Рис. 2.6. Визуальное дерево окна

Шаблон элементов управления ControlTemplate применяется для задания представления и визуального поведения элементов управления.

Шаблон данных DataTemplate применяется для извлечения данных из объекта и их отображения в элементах управления содержимым.

Шаблоны панелей Hierarchical DataTemplate применяются для управления компоновкой элементов в элементах управления типа список.

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

Каждый элемент управления имеет свойство Template, которое определяет шаблон для его визуализации. Если данное свойство явно не задано, то применяется стандартный шаблон элемента управления, который определен в WPF. Для создания пользовательского шаблона элемента управления необходимо определить объект ControlTemplate.

<ControlTemplate x:Key="КлючШаблона" TargetType="ТипЭлемента">
	... 
</ControlTemplate>

Атрибут x:Key определяет ключ по которому ссылаются на шаблон, а TargetType определяет тип элемента, для которого создается шаблон.

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

<ControlTemplate x:Key="ButtonTemplate" TargetType="Button">
	<Border BorderBrush="Blue" BorderThickness="3" 
		CornerRadius="25" Background="Azure" TextBlock.Foreground="Green">
		<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
	</Border>
</ControlTemplate>

Элемент ContentPresenter определяет место вставки содержимого элемента управления в контейнере (в примере контейнером является рамка – Border ).

Шаблон элемента управления можно разместить в коллекции ресурсов окна.

<Window.Resources>
	<ControlTemplate x:Key="ButtonTemplate" TargetType="Button">
	...
	</ControlTemplate>   
</Window.Resources>

Привязка шаблона к элементу управления производится заданием свойства Template данного элемента.

<Grid>
	<Button Content="Кнопка" Width="100" Height="50" 
		Template="{StaticResource ButtonTemplate}"/>
</Grid>

Свойство Template определяется расширением разметки для ссылки на статический ресурс ( StaticResource ) по ключу ресурса ( ButtonTemplate ). При запуске проекта кнопка будет иметь вид, представленный на рис. 2.7.

Рис. 2.7. Представление кнопки с пользовательским шаблоном

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

<ControlTemplate x:Key="ButtonTemplate" TargetType="Button">
    <Border Name="Border" BorderBrush="Blue" BorderThickness="3"
            CornerRadius="25" Background="Azure" TextBlock.Foreground="Green">
        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
    </Border>
    <ControlTemplate.Triggers>
        <Trigger Property="IsMouseOver" Value="true">
            <Setter TargetName="Border" Property="Background" Value="Red" />
            <Setter TargetName="Border" 
Property="TextBlock.Foreground" Value="White" />
        </Trigger>
    </ControlTemplate.Triggers>
</ControlTemplate>

При наступлении события MouseOver свойство IsMouseOver принимает значение true, в результате чего срабатывает триггер и изменяются свойства Background и TextBlock.Foreground кнопки соответственно на Red и White. При установке свойств Background и TextBlock.Foreground в элементе TargetName указывается имя Border, которое присвоено элементу Border в шаблоне. На рис. 2.8 приведено представление кнопки при наведении на неё мыши.

Рис. 2.8. Представление кнопки при наведении на неё мыши

С помощью триггеров можно задать реакцию визуального поведения элементов управления на необходимые события.