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

Цель

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

Введение в WPF

.

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

Графической технологией, лежащей в основе WPF, является DirectX, в отличие от Windows Forms, где используется GDI/GDI+. Производительность WPF выше, чем у GDI+ за счёт использования аппаратного ускорения графики через DirectX.

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

Основные компоненты архитектуры WPF приведены на рис 2.1.

Компонент PresentationFramework содержит типы WPF верхнего уровня, включая представление окна, панелей и других элементов управления. PresentationCore содержит базовые типы, такие как UIElement и Visual, от которых порождаются все формы и элементы управления. WindowsBase включает различные типы, которые могут использоваться за пределами WPF, в частности, компоненты DispatchObject и DependencyObject. Компонент milcore является ядром визуализации WPF. WindowsCodecs представляет собой низкоуровневый API-интерфейс для поддержки создания изображений. Direct 3D также является низкоуровневым API-интерфейсом, через который осуществляется визуализация всей графики в WPF. User32 используется для определения, какая программа получает тот или иной участок экрана.

Архитектура WPF определяет основные пространства имен для иерархии классов. Базовый набор элементов управления WPF определяет ключевые иерархии классов системы (рис 2.2). На рис 2.2 абстрактные классы изображены овалами, а конкретные классы – прямоугольниками.

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

Классы WPF получают поддержку свойств зависимости за счет порождения от класса DependencyObject.

Класс Visual является единичным объектом, который инкапсулирует инструкции и подробности, а также базовую функциональность рисования. Интерфейсные элементы WPF для визуализации должны порождаться, в конечном счете, от класса Visual.

Все пользовательские элементы управления являются потомками классов UIElement или FrameworkElement. Класс UIElement поддерживает такую функциональность как компоновка, ввод, фокус и события. Класс FrameworkElement добавляет к функциональности UIElement задание полей, выравнивание, поддержку связывания данных, анимацию и стили.

Класс Shape является базовым для построения таких геометрических форм как прямоугольник, эллипс, многоугольник, линия и путь.

Класс Control определяет элементы управления, которые могут взаимодействовать с пользователем. Это кнопки, списки, текстовые элементы.

Классы ContentControl и ItemsControl являются базовыми для элементов управления, которые могут иметь содержание единственное или коллекцию соответственно.

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

Компоновка

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

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

Окно и страница в WPF может содержать только один элемент - контейнер. В контейнер можно поместить различные элементы пользовательского интерфейса и другие контейнеры. Компоновка в WPF определяется типом используемого контейнера. Контейнеры компоновки WPF– это панели, порожденные от абстрактного класса System.Windows.Controls.Panel. Для компоновки в приложениях используются следующие классы:

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

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

Панель StackPanel является одним из простейших контейнеров компоновки. Данная панель укладывает свои дочерние элементы в одну строку или колонку.

Контейнер UniformGrid, в отличие от Grid, требует установки только количества строк и столбцов и формирует ячейки одинакового размера, которые занимают всё доступное пространство окна (страницы) или элемента внешнего контейнера.

WrapPanel в зависимости от свойства Orientation упорядочивает элементы управления горизонтально ( Horizontal ) или вертикально ( Vertical ), заполняя текущий размер панели. При горизонтальном расположении элементы управления могут переноситься на следующую строку, а при вертикальном – на следующий столбец.

Панель DockPanel осуществляет пристыковку элементов управления к одной из своих сторон в зависимости от значения свойства Dock, которое может принимать значения Left, Right, Top или Bottom. Так если элемент управления был пристыкован к верхней части DockPanel, то он растягивается и будет занимать всю ширину панели, принимая такую высоту, какая определена параметром MaxHeight.

Frame является элементом управления содержимым, который предоставляет возможность перехода к содержимому и его отображения. Frame можно разместить внутри другого содержимого, как и другие элементы управления и элементы. Содержимое может быть любым типом объекта .NET Framework и файлов HTML. Обычно Frame используется для упаковки содержимого определяющего переходы на страницы.

Свойства компоновки определяются контейнером, но дочерние элементы также оказывают на неё определенное влияние. Панели компоновки работают в согласии со своими дочерними элементами благодаря следующим свойствам:

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

Элементы управления содержимым

Элементы управления предназначены для поддержки интерактивной связи с пользователем. Они могут принимать фокус и получать входные данные от клавиатуры или мыши.

Элементы управления содержимым являются специализированным типом элементов управления, которые могут хранить некоторое содержимое – один или несколько элементов. Все элементы управления содержимым являются наследниками класса ).

Класс ContentControl наследуется от класса System.Windows.Control, который наделяет его и все дочерние классы базовыми характеристиками, которые:

Элементы управления имеют фон и передний план. Фоном, как правило, является поверхность элемента управления, а передним планом – текст. Цвет этих двух областей в WPF определяется с помощью свойств Background и Foreground. Эти свойства используют кисти – объект Brush. Это обеспечивает заливку содержимого фона и переднего плана сплошным цветом (класс кисти SolidColorBrush ) или градиентным, например с помощью класса кисти LinearGradientBrush.

Для задания фона кнопки с помощью объекта Brush необходимо свойству Color кисти SolidColorBrush присвоить значение, например Blue – голубой.

<Button>Кнопка A
   <Button.Background>
      <SolidColorBrush Color="Blue"></SolidColorBrush>
   </Button.Background>
</Button>

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

<Button Background="Black" Foreground="Red">Кнопка A</Button>

При этом синтаксический анализатор WPF автоматически создаст объекты SolidColorBrush с использованием заданных цветов, и будет применять созданные объекты для фона и переднего плана.

Если необходимо использовать другой тип кисти, например градиентный – LinearGradientBrush, то следует создавать объект кисти самостоятельно:

<Button>Кнопка A
  <Button.Background>
    <LinearGradientBrush>
    <LinearGradientBrush.GradientStops>
       <GradientStop Offset="0.0" Color="Blue"></GradientStop>
       <GradientStop Offset="1.0" Color="Red"></GradientStop>
    </LinearGradientBrush.GradientStops>
    </LinearGradientBrush>
  </Button.Background>
</Button>

С помощью кисти рисуется рамка вокруг элемента управления. Это реализуется с помощью свойств BorderBrush и BorderThickness. При этом свойство BorderBrush принимает выбранную кисть, а BorderThickness – ширину рамки:

<Button Width="80" Height="30" Background="Red" 
BorderBrush="Blue" BorderThickness="5">Кнопка A</Button>

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

Класс Control, от которого наследуются все элементы управления, определяет набор свойств, связанных со шрифтами:

При выборе шрифта переднего фона элемента управления необходимо указать полное имя семейства шрифтов:

<Button FontFamily="Times New Roman" FontSize="18">Кнопка A</Button>

При задании полужирного шрифта с наклоном необходимо задать следующие свойства:

<Button FontFamily="Times New Roman" 
FontSize="18" FontStyle="Italic" FontWeight="Bold"> Кнопка A</Button>

Многие элементы управления WPF являются элементами управления содержимым. Это элементы управления: Label, Button, CheckBox и RadioButton.

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

<Label Target="{Binding ElementName = txtA}">Выбор _А</Label> 
<TextBox Name="txtA">Выбор текста</TextBox>

Символ подчеркивания в тексте метки указывает на клавишу быстрого доступа. Все мнемонические команды работают при одновременном нажатии клавиши <Alt> и заданной клавиши быстрого доступа. В приведенном выше коде при нажатии комбинации <Alt+A> фокус перейдет на элемент управления TextBox с именем txtA.

В WPF определены три класса: Button, CheckBox и RadioButton, которые наследуются от класса ButtonBase.

Класс ButtonBase определяет событие Click и добавляет поддержку команд, которые позволяют подключить кнопки для высокоуровневых задач приложения. В классе ButtonBase имеется свойство ClickMode, которое определяет когда кнопка генерирует событие Click в ответ на действия мыши. Значением, используемым по умолчанию, является ClickMode.Release, которое означает, что событие будет сгенерировано как при нажатии, так и при отпускании кнопки мыши. Для ClickMode.Press – событие будет генерироваться только при нажатии кнопки мыши, ClickModeHover – когда указатель мыши будет наведен на кнопку и задержен на ней.

Класс Button добавляет два свойства, доступные для записи: IsCancel и IsDefault.

При IsCancel = true кнопка будет работать как кнопка отмены окна и если нажать кнопку <Esc>, когда текущее окно находится в фокусе, то кнопка сработает.

Если IsDefault= true, то кнопка считается кнопкой по умолчанию.

Классы CheckBox и RadioButton наследуются от класса ToggleButton, который представляет кнопку, имеющую два состояния: нажата и отпущена. В классе имеются события Checked, Unchecked и Intermediate, которые генерируются при включении, выключении или переходе кнопки в неопределенное состояние.

Для кнопки CheckBox включение элемента управления означает отметку в нем флажка. Свойство IsChecked, наследуемое от класса ToggleButton, может принимать три значения: true (включено), false (выключено), null (неопределено, которое отображается в виде затененного окна, и используется для промежуточного состояния). Пример XAML-описания трех кнопок CheckBox приведен ниже.

<CheckBox Height="16" Name="checkBox1" 
      Width="120" IsChecked="False" 
	  ClickMode="Release">Выбор А</CheckBox>
<CheckBox Height="16" Name="checkBox2" 
      Width="120" IsChecked="True" 
	  ClickMode="Press">Выбор Б</CheckBox>
<CheckBox Height="16" Name="checkBox3" 
      Width="120" IsChecked="{x:Null}" 
	  ClickMode="Hover">Выбор В</CheckBox>

Для кнопки RadioButton добавлено свойство GroupName, которое позволяет управлять расположением переключателей в группе. Из группы можно выбрать только один переключатель.

<GroupBox Header="Группа радиокнопок" Height="100"
Name="groupBox1" Width="200">
  <StackPanel>
   <RadioButton Height="16" Name="radioButton2" 
Width="120">Выбор Г</RadioButton>
   <RadioButton Height="16" Name="radioButton1" 
 Width="120">Выбор Д</RadioButton>
   <RadioButton Height="16" Name="radioButton3"  
Width="120">Выбор Е</RadioButton>
  </StackPanel>
</GroupBox>

Контекстные окна указателя ToolTip позволяют выводить всплывающие окна, когда пользователь наводит указатель мыши на определенный элемент. Данные окна в WPF относятся к группе элементов управления содержимым и поэтому в них можно помещать любое допустимое содержимое. Для вывода контекстного окна указателя не обязательно использовать класс ToolTip. Можно воспользоваться свойством ToolTip элемента управления, например для кнопки:

<Button ToolTip="Подсказка для кнопки А"></Button>

Элемент управления ScrollViewer обеспечивает прокрутку содержимого и используется, в основном, для упаковки контейнеров компоновки. С помощью этого элемента можно создавать прокручивающиеся панели.

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

Элемент Windows является элементом управления содержимым и используется для создания всех окон приложения.

Элемент HeaderedContentControl наследуется от класса ContentControl. HeaderedContentControl является родительским классом для элементов управления, которые имеют кроме содержимого и область заголовка.

Элемент управления GroupBox является окном с заголовком и используется для группирования связанных элементов управления, например радиокнопок.

Элемент управления TabItem представляет страницу для класса TabControl. Данный элемент отображает вкладку, которая активна в данный момент на панели TabControl.

Элемент управления Expander позволяет показывать и скрывать определенную область содержимого.

Текстовые элементы управления

В WPF определены следующие текстовые элементы управления: TextBlock, TextBox, RichTextBox и PasswordBox. Элемент PasswordBox наследуется от класса Control, а элементы TextBox и RichTextBox - от класса TextBase.

Элемент TextBlock используется для небольшого текста. Элементы управления TextBox и RichTextBox являются наследниками класса TextBase. Элемент TextBox всегда хранит строку текста. Элемент RichTextBox может хранить содержимое FlowDocument, которое может содержать в себе сложную комбинацию элементов. Элемент управления PasswordBox содержит строку текста, используя элемент SecureString для защиты от некоторых видов атак.

Элемент управления TextBox, как правило хранит одну строку текста:

<TextBox Name="txtA">Выбор текста</TextBox>

Если необходимо создать многострочное представление, то свойству TextWrapping необходимо присвоить значение Wrap. Для многострочного элемента TextBox можно задать минимальное и максимальное количество строк, используя свойства MinLines и MaxLines.

Элементы управления списками

Элементы управления ListBox и ComboBox являются элементами управления списками. Эти элементы управления являются потомками класса ItemsControl через класс Selector.

Класс ItemsControl является базовым для всех элементов управления списками и предусматривает два способа заполнения списка элементов. В первом способе осуществляется добавление элемента прямо в коллекцию Items, при котором используется код или XAML. Во втором способе осуществляется привязка данных через задание свойства ItemsSource – источника данных (коллекции элементов). Класс Selector имеет свойства, позволяющие отслеживать выделенный в данный момент времени элемент ( SelectedItem ) списка или его позицию ( SelectedIndex ).

Для добавления элементов в ListBox можно вложить элементы ListBoxItem в элемент управления ListBox, как это показано для составления списка цветов (зеленый, голубой, желтый, красный):

<ListBox>
   <ListBoxItem>Зеленый</ListBoxItem>
    <ListBoxItem>Голубой</ListBoxItem>
    <ListBoxItem>Желтый</ListBoxItem>
   <ListBoxItem>Красный</ListBoxItem>
</ListBox>

Элемент управления ListBox хранит каждый вложенный объект в своей коллекции. При этом ListBoxItem может хранить не только строки, но и любой произвольный элемент.

Элемент управления ComboBox подобен ListBox, но для визуализации использует выпадающий список и пользователь может выбрать только один элемент из списка.

Специализированные элементы управления

В WPF имеются элементы управления, использующие диапазоны значений: ScrollBar, ProgressBar и Slider. Данные элементы управления являются наследниками класса RangeBase, в котором определены такие свойства как Value – текущее значение элемента управления, Minimum и Maximum – минимальное и максимальное допустимые значения.

ScrollBar – элемент управления, предоставляющий полосу прокрутки с перемещаемым элементом, позиция которого соответствует определенному значению.

Элемент управления ProgressBar показывает ход выполнения длительной задачи.

Элемент управления Slider используется для задания числового значения путем перемещения бегунка на линейке прокрутки.

Команды

Командная модель WPF предоставляет следующие возможности:

Модель команд включает следующие компоненты:

Классы команд WPF должны поддерживать интерфейс ICommand.

public interface ICommand
    {
        void Execute(object par);
        bool CanExecute(object par);
        event EventHandler CanExecuteChanged;
    }

Метод Execute() определяет реализацию команды в приложении. Это может быть код логики приложения или возбуждение события, обрабатываемого в другом классе приложения. Метод CanExecute() возвращает информацию о состоянии доступности команды. Методы Execute() и CanExecute() могут вызываться с параметром par, который используется для передачи дополнительной информации. Событие CanExecuteChanged вызывается при изменении состояния доступности команды. По этому событию вызывается метод CanExecute() и проверяется состояние команды.

В WPF существует библиотека базовых команд, которые доступны через статические свойства следующих статических классов:

Для инициализации команды необходимо использовать источник команды, а для ответа на нее – привязку команды с переадресацией её выполнения обычному обработчику события.

Предположим, что источником команды Создать является кнопка New. С помощью свойства Command связываем кнопку с командой New.

<Button Name="New" Content="Создать" Width="200" Command="New"/>

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

<Window.CommandBindings>
	<CommandBinding Command="New" 
		Executed="CommandBinding_Executed" 
		CanExecute="CommandBinding_CanExecute"/>
</Window.CommandBindings>

В привязке для объекта CommandBinding кроме команды New необходимо указать обработчики для методов Execute() и CanExecute() через соответствующие свойства Executed и CanExecute. Обработчик CommandBinding_Executed будет реализовывать бизнес-логику команды Создать, обработчик CommandBinding_CanExecute – проверять доступность команды.

При создании пользовательской команды целесообразно использовать класс RoutedCommand, который реализует интерфейс ICommand.

Для примера сконструируем команду Редактировать. Для этого создадим класс DataCommands.

public class DataCommands
{
     private static RoutedCommand edit;
     public static RoutedCommand Edit
    {
        get { return DataCommands.edit; }
    }
    static DataCommands()
    {
        InputGestureCollection inputs = new InputGestureCollection();
        inputs.Add(new KeyGesture(Key.E, ModifierKeys.Control, "Ctrl+E"));
        Edit = new RoutedCommand("edit", typeof(DataCommands), inputs);
    }
}

В классе DataCommands объявлены статические поле ( edit ) и свойство ( Edit ) экземпляра класса RoutedCommand. Статический конструктор создает экземпляр команды Создать ( Edit ), используя экземпляр ( inputs )) класса InputGestureCollection. Класс InputGestureCollection представляет упорядоченную коллекцию объектов KeyGesture, которые определяют "горячую" клавишу для вызова команды. В приведенном примере это комбинация клавиш "Ctrl+E". Далее необходимо установить для команды источник и привязать команду, как это было рассмотрено для команды из библиотеки .NET.

Ресурсы

, .

Объектные ресурсы обладают рядом важных характеристик:

Каждый элемент, который наследуется от FrameworkElement (см. рис 2.2) включает свойство Resources, в котором хранится словарная коллекция ресурсов Resourcesdictionary. В коллекции ресурсов может храниться объект любого типа. Каждый элемент имеет доступ как к ресурсам в собственной коллекции ресурсов, так и к коллекции ресурсов в коллекциях всех его родительских элементов. Чаще всего ресурсы хранятся на уровне окна или страницы для обеспечения совместного использования этих ресурсов всеми вложенными в них элементами.

Ресурсы определяются в секции Resource соответствующего элемента, например для окна следующим образом.

<Window x:Class="MyFirstWpfProject.MainWindow" ... >
	<Window.Resources>
		....
	</Window.Resources>
....
</Window>

Каждый ресурс записывается в следующем виде.

<ТипРесурса  x:Key="КлючРесурса" >
	...
</ ТипРесурса >

Для задания свойств объекта ( ТипРесурса ) может использоваться синтаксис атрибутов или элементов свойств. Элементы XAML обращаются к ресурсам по ключу ( КлючРесурса ), который определяется атрибутом x:Key. Ключ ресурса задается с использованием расширения разметки StaticResource.

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

<Window.Resources>
	<LinearGradientBrush x:Key="BrushButton" EndPoint="0,1" StartPoint="0,0">
		<GradientStop Color="#FFD2E995" Offset="0.9"/>
		<GradientStop Color="#FF74EDB3" Offset="0.55"/>
		<GradientStop Color="#FF72D8A7" Offset="0.75"/>
		<GradientStop Color="#FF233CC6" Offset="0.25"/>
	</LinearGradientBrush>
</Window.Resources>
<StackPanel>
	<Button x:Name="New" Content="Создать" Width="200" 
Command="New" Margin="154.5,0" 
		Background="{StaticResource BrushButton}"/>
</StackPanel>

Градиентная кисть имеет тип LinearGradientBrush и для неё задан ключ BrushButton. В XAML-описании кнопки атрибут Background определяется расширением разметки { StaticResource BrushButton }.

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

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

Для повторного использования ресурсов создаются словари ресурсов. Словарь ресурсов – это XAML-файл для хранения ресурсов. Если переместить созданный ранее ресурс для градиентной кисти в словарь, то файл словаря ресурсов MyDictionary.xaml буден иметь следующий вид.

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <LinearGradientBrush x:Key="BrushButton" EndPoint="0,1" StartPoint="0,0">
        <GradientStop Color="#FFD2E995" Offset="0.9"/>
        <GradientStop Color="#FF74EDB3" Offset="0.55"/>
        <GradientStop Color="#FF72D8A7" Offset="0.75"/>
        <GradientStop Color="#FF233CC6" Offset="0.25"/>
    </LinearGradientBrush>
</ResourceDictionary>

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

<Window.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="MyDictionary.xaml" />
        </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
</Window.Resources>

Объединение словаря ресурсов с ресурсами другого объекта производится через задание свойства ResourceDictionary.MergedDictionaries. Коллекция MergedDictionaries – это коллекция объектов ResourceDictionary, которые должны быть добавлены в коллекцию ресурсов. Добавляемые словари ресурсов задаются как значение атрибута Source. В рассматриваемом примере это файл словаря ресурсов MyDictionary.xaml.

Стили

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

Стиль создается на базе класса Style, свойства которого приведены в табл. 2.1.

Например, в приложении необходимо многократно использовать кнопки, которые имеют светло-голубой фон и голубую рамку.

<Style x:Key="ButtonStyle" TargetType="Button">
    <Setter Property="Background" Value="LightBlue"/>
    <Setter Property="BorderBrush" Value="Blue" />
</Style>

Имя стилю задается атрибутом x:Key ( ButtonStyle ). Атрибут TargetType определяет тип, для которого будет применяться стиль ( Button ). Каждый объект Setter устанавливает в элементе одно свойство, которое обязательно должно быть свойством зависимостей. Установка свойств производится с помощью атрибутов Property, который определяет имя свойства, и Value, которое задает значение свойства.

В стиль можно добавить объект EventSetters, в котором привязывается события к определенному обработчику.

Триггеры позволяют вносить изменения в стиль при выполнении определенных условий. Добавим в стиль для кнопки ButtonStyle триггер, который будет формировать красный фон при наведении указателя мыши на кнопку.

<Style x:Key="ButtonStyle" TargetType="Button">
    <Setter Property="Background" Value="LightBlue"/>
    <Setter Property="BorderBrush" Value="Blue" />
    <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="true">
            <Setter Property="Background" Value="Red" />
        </Trigger>
    </Style.Triggers>
</Style>

В триггере должно быть указано идентифицирующее свойство (в нашем примере IsMouseOver ), за которым должно вестись наблюдение, и значение, которого следует ожидать (в нашем примере true ). Когда появляется необходимое значение, устанавливается свойство, которое определено объектом Setter. В приведенном примере при IsMouseOver = true, то есть наведении указателя мыши на кнопку, свойству Background присваивается значение Red, то есть фон кнопки становится красным. Когда указатель мыши покидает кнопку, условия срабатывания триггера нарушаются и фон кнопки переходит в прежнее состояние.

Кроме триггера, ожидающего изменение свойства, имеются триггеры события ( EventTrigger ), которые ожидают возникновения определенного события.

Шаблоны

При проектировании WPF-приложений окна или страницы являются контейнерами, в которых располагаются другие контейнеры и различные интерфейсные элементы (метки, текстовые блоки, кнопки, списки и другие элементы управления). Например, создается окно с одной кнопкой (рис 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-документе окна присутствуют три объекта: ).

В WPF ).

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

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

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

Шаблон элементов управления 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>

Свойство .

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

<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>

При наступлении события приведено представление кнопки при наведении на неё мыши.

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

Шаблоны данных

Шаблон данных – это часть XAML-разметки, которая определяет, как должен отображаться привязанный объект данных. Шаблон данных может включать любую комбинацию элементов и должен содержать одно или более выражение привязки.

Шаблоны данных поддерживают следующие элементы управления;

Для примера разработаем шаблон данных для списка ListBox. В списке должны отображаться данные по сотруднику: фамилия, имя и отчество. Источником данных для списка listBoxEmployees является коллекция Employees, которая содержит классы Employee. Свойствами класса Employee являются:

Шаблон данных для списка listBoxEmployees имеет следующий вид.

<ListBox Name="listBoxEmployees" >
    <ListBox.ItemTemplate>
        <DataTemplate>
            <StackPanel Orientation="Horizontal">
                <TextBlock Text="{Binding Path=Surname}" />
                <TextBlock Text="{Binding Path=Name}" />
                <TextBlock Text="{Binding Path=Patronymic}" />
            </StackPanel>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

При запуске программы в окне выводится список, приведенный на рис 2.9.

Для многократного использования шаблона данных его можно задать в виде ресурса окна или приложения, указав ключ шаблона ( ListBoxEmployee ).

<Application.Resources>
	<DataTemplate x:Key="ListBoxEmployee" >
	... 
	</DataTemplate>
</Application.Resources>

При этом в XAML-описании списка для свойства ItemTemplate задается расширение разметки на статический ресурс.

<ListBox Grid.Row="1" Name="listBoxEmployees" 
	ItemTemplate="{StaticResource ListBoxEmployee}" />

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

Ключевые термины

Архитектура WPF, контейнер компоновки, панель, элемент управления содержимым, свойства шрифтов, ресурс, стиль, шаблон.

Windows Presentation Foundation, WPF, DependencyObject, Visual, FrameworkElement, UIElement, Shape, Control, Content Control, ItemsControl, Panel, Grid, UniformGrid, StackPanel, WrapPanel, DockPanel, FrameButton, CheckBox, RadioButton, TextBlock, TextBox, RichTextBox, ListBox, ComboBox, ScrollBar, ProgressBar, Slider, Command, Resources, StaticResource, DynamicResource, ResourceDictionary, MergedDictionaries, Style, Setter, EventSetters, Trigger, EventTrigger, ControlTemplate, DataTemplate.

Краткие итоги

Архитектура WPF включает уровни API интерфейса, медиа-интеграции и визуализации. Каждый уровень имеет пространства имен, в которых сформированы иерархии классов WPF.

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

Модель команд является эффективным инструментом для реализации задач приложения.

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

Ресурсы, стили и шаблоны используются при создании WPF-приложение для повышения эффективности интерфейса пользователя.

Ресурсы для углубленного изучения

Вопросы для самопроверки