7. Модификация приложения Windows Foundation Presentation: немного о стилях и шаблонах

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

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

Элемент Style обладает следующими свойствами:

BasedOn	Возвращает или задает определенный стиль, являющийся основой текущего стиля
Dispatcher	Возвращает объект Dispatcher, с которым связан этот объект DispatcherObject (наследуемый от DispatcherObject)
IsSealed	Возвращает значение, указывающее, доступен ли стиль только для чтения
Resources	Возвращает или задает коллекцию ресурсов, которые могут использоваться в области видимости данного стиля
TargetType	Возвращает или задает тип, для которого предназначен данный стиль
Setters	Возвращает коллекцию объектов Setter и EventSetter
Triggers	Возвращает коллекцию объектов TriggerBase, применяющих значения свойств на основе заданных условий

Из этих свойств самые важные следующие:

• BasedOn («наследование» стиля, каждый стиль поддерживает только одно значение).

<Style x:Key="Style1">

...

</Style>

<Style x:Key="Style2" BasedOn="{StaticResource Style1}">

...

</Style>

• TargetType (ограничивает типы элементов управления, которые могут использовать данный стиль).

Например, если свойству TargetType объекта Style присвоено значение Button, этот стиль нельзя использовать для элемента управления типа TextBox. Задать свойство TargetType следует так:

<Style TargetType="{x:Type Button}">

...

</Style>

• Setters (задают событию или свойству некоторое значение; при задании события они подключают это событие; при задании свойства они присваивают свойству значение).

Объекты EventSetter используются для задания событий, например для связывания события Click элемента Button, как в примере ниже. Однако значительно чаще объекты Setter используются просто для задания значений свойствам (второй участок кода):

<Style TargetType="{x:Type Button}">

<EventSetter Event="Click" Handler="b1SetColor"/>

</Style>

<Style TargetType="{x:Type Button}">

<Setter Property="BackGround" Value="Yellow"/>

</Style>

• Triggers (по сути, объекты Trigger позволяют применять изменения при выполнении определенных условий (например, когда значение некоторого свойства становится равным true или когда происходит некоторое событие).

В примере показан именованный стиль, доступный для элементов управления Button. В стиле определен элемент Trigger, который изменяет свойство Foreground элемента Button, когда свойство IsPressed равно true:

<Style x:Key="Triggers" TargetType="Button">

<Style.Triggers>

<Trigger Property="IsPressed" Value="true">

<Setter Property = "Foreground" Value="Green"/>

</Trigger>

</Style.Triggers>

</Style>

Напишем же небольшое приложение, демонстрирующее шаблоны и стили и добавим его в текущее приложение. Вызов окна с новой функциональностью будем производить по кнопке. Окно сделаем немодальным. Разместим кнопку Изменённые кнопки (button8) где-нибудь на свободном участке приложения. Добавим новое окно (Window) и зададим ему имя ButtonStylesWindow.xaml. XAML-код нового окна сделаем таким:

<Window x:Class="LWP08WPF01.ButtonStylesWindow"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:local="clr-namespace:LWP08WPF01"

Title="Приложение WPF (C#) :: Изменённые кнопки" SizeToContent="WidthAndHeight" Name="lol">

<Window.Resources>

<Style TargetType="Button" x:Key="BaseButtonStyle">

<Setter Property="HorizontalAlignment" Value="Center" />

<Setter Property="VerticalAlignment" Value="Center" />

<Setter Property="Margin" Value="10" />

</Style>

<Style TargetType="Button" x:Key="BigButtonStyle" BasedOn="{StaticResource BaseButtonStyle}">

<Setter Property="Width" Value="170" />

<Setter Property="Height" Value="50" />

<Setter Property="FontSize" Value="16" />

</Style>

<Style TargetType="Button" x:Key="SmallButtonStyle" BasedOn="{StaticResource BaseButtonStyle}">

<Setter Property="Width" Value="150" />

<Setter Property="Height" Value="25" />

<Setter Property="FontSize" Value="12" />

</Style>

<Style TargetType="Button" x:Key="RedButtonStyle" BasedOn="{StaticResource BaseButtonStyle}">

<Setter Property="Foreground" Value="Red" />

</Style>

<Style TargetType="Button" x:Key="GreenButtonStyle" BasedOn="{StaticResource BaseButtonStyle}">

<Setter Property="Foreground" Value="Green" />

</Style>

<Style TargetType="Button" x:Key="BoldButtonStyle" BasedOn="{StaticResource BaseButtonStyle}">

<Setter Property="FontWeight" Value="Bold" />

</Style>

</Window.Resources>

<Grid Margin="30">

<Grid.ColumnDefinitions>

<ColumnDefinition />

<ColumnDefinition />

</Grid.ColumnDefinitions>

<Grid.RowDefinitions>

<RowDefinition />

<RowDefinition />

<RowDefinition />

<RowDefinition />

</Grid.RowDefinitions>

<Button Style="{local:MultiStyle BigButtonStyle GreenButtonStyle}" Content="Большая, зелёная"/>

<Button Style="{local:MultiStyle BigButtonStyle RedButtonStyle}" Content="Большая, красная" Grid.Column="1"/>

<Button Style="{local:MultiStyle SmallButtonStyle GreenButtonStyle}" Content="Мальная, зелёная" Grid.Row="1"/>

<Button Style="{local:MultiStyle SmallButtonStyle RedButtonStyle}" Content="Маленькая, красная" Grid.Row="1" Grid.Column="1"/>

<Button Style="{local:MultiStyle BigButtonStyle GreenButtonStyle BoldButtonStyle}" Content="Б., зелёная, жирная" Grid.Row="2"/>

<Button Style="{local:MultiStyle BigButtonStyle RedButtonStyle BoldButtonStyle}" Content="Б., красная, жирная" Grid.Row="2" Grid.Column="1"/>

<Button Style="{local:MultiStyle SmallButtonStyle GreenButtonStyle BoldButtonStyle}" Content="М., зелёная, жирная" Grid.Row="3" />

<Button Style="{local:MultiStyle SmallButtonStyle RedButtonStyle BoldButtonStyle}" Content="М., красная, жирная" Grid.Row="3" Grid.Column="1"/>

</Grid>

</Window>

Добавим два следующих файла с кодом (добавляем как Код -> Класс). Имя первого файла: ButtonStylesExtension.cs (расширение стилей кнопок). Содержимое файла делаем таким (комментарии включены):

using System;

using System.Collections.Generic;

using System.Linq;

using System.Text;

using System.Windows.Markup;

using System.Windows;

namespace LWP08WPF01

{

[MarkupExtensionReturnType(typeof(Style))] // Сообщаем что класс Style может возвращать расширение разметки (typeof используется для получение объекта типа, является альтернативой создания экземпляра класса new и получение типа методом GetType() )

public class MultiStyleExtension : MarkupExtension // Создаём класс как базовый класс для расширенной разметки XAML

{

private string[] resourceKeys;

/// <summary>

/// Публичный конструктор.

/// </summary>

/// <param name="inputResourceKeys">Конструктор ввода должен быть строкой, состоящей из одного или нескольких имен стилей, разделенных пробелами.</param>

public MultiStyleExtension(string inputResourceKeys) // получаем входящий ключ на ресурс

{

if (inputResourceKeys == null) // Если ничего не получаем, генерируем (throw) новое (new) исключение ArgumentNullException (пустой аргумент) для ключа

{

throw new ArgumentNullException("inputResourceKeys");

}

this.resourceKeys = inputResourceKeys.Split(new char[] { ' ' }, StringSplitOptions.RemoveEmptyEntries); // Выполняем слияние строк для ключа, удаляя лишни символы пробелов

if (this.resourceKeys.Length == 0) // Если не вышло изначально (0) или мы убили ключ для ресурса, генерируем новое исключение об отсутсвиии ключа

{

throw new ArgumentException("Нет указанных входных ключей ресурсов.");

}

}

/// <summary>

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

/// </summary>

/// <param name="serviceProvider">Поставщиков услуг для данного расширения разметки.</param>

/// <returns>Стиль, который объединяет все стили с ключами, указанными в конструкторе.</returns>

public override object ProvideValue(IServiceProvider serviceProvider)

{

Style resultStyle = new Style(); // Создаём объект класса Style

try

{

foreach (string currentResourceKey in resourceKeys) // Пробегаем в цикле по всем ключам ресорусов (foreach повторяет группу вложенных операторов для каждого элемента массива или коллекции объектов)

{

Style currentStyle = new StaticResourceExtension(currentResourceKey).ProvideValue(serviceProvider) as Style; // Передаём через конструктор исходный ключ конкретного текущего стиля

if (currentStyle == null) // Проверям что стиль есть, если нет, то выполняем вывод ошибки (генерируем новое исключение)

{

throw new InvalidOperationException("Не удалось найти стиль для ключа ресурса: " + currentResourceKey + ".");

}

resultStyle.Merge(currentStyle); // Выполняем слияние для текущего стиля (смотрим файл StyleExtensionMethods.cs)

}

}

catch

{

// Ловим ошибку: IXamlSchemaContextProvider

}

return resultStyle; // Возвращаем готовый стиль

}

}

}

Второй файл (StyleExtensionMethods.cs) будет содержать нужный нам метод Merge():

using System;

using System.Collections.Generic;

using System.Linq;

using System.Text;

using System.Windows;

namespace LWP08WPF01

{

public static class StyleExtensionMethods

{

/// <summary>

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

/// Если имеет место совпадение стилей, второй стиль имеет больший приоритет.

/// </summary>

/// <param name="style1">Первый стиль для слияния, который будет изменен, чтобы получить информацию из второго.</param>

/// <param name="style2">Второй стиль для слияния, который передают информацию для первого стиля.</param>

public static void Merge(this Style style1, Style style2)

{

if (style1 == null) { throw new ArgumentNullException("style1"); }

if (style2 == null) { throw new ArgumentNullException("style2"); }

if (style1.TargetType.IsAssignableFrom(style2.TargetType)) // проверка типов, если совпадают "сливаем" TargetType стиля

{

style1.TargetType = style2.TargetType;

}

if (style2.BasedOn != null) // Если базовый стиль второго стиля не нуль

{

Merge(style1, style2.BasedOn); // Сливаем базовый стиль style2.VaseOn в style1

}

foreach (SetterBase currentSetter in style2.Setters) // Пробегаем по все объектам типа Setter второго стиля и записываем каждый найденный в первый стиль

{

style1.Setters.Add(currentSetter);

}

foreach (TriggerBase currentTrigger in style2.Triggers) // Пробегаем по всем объектам типа Trigger

{

style1.Triggers.Add(currentTrigger);

}

// Этот код нужен только при использовании DynamicResources

foreach (object key in style2.Resources.Keys)

{

style1.Resources[key] = style2.Resources[key];

}

}

}

}

Конструктор сформирует представление окна:

Рис. 7. 1. Конструктор окна ButtonStylesWindow.xaml

Выделим мышкой любую кнопку в конке и посмотрим на свойства. Ищем поле Общее: Style, нажимаем на значок «ромбика» ( ). Жмём на него, далее Применить ресурс…, увидим следующее:

Откроется список всех доступных стилей для этой кнопки. Выбор конкретного стиля осуществляется например для кнокпи Большая, зелёная так. Объявляем базовый стиль от кнопки Button, даём ему имя BaseButtonStyle:

<Style TargetType="Button" x:Key="BaseButtonStyle">

<Setter Property="HorizontalAlignment" Value="Center" />

<Setter Property="VerticalAlignment" Value="Center" />

<Setter Property="Margin" Value="10" />

</Style>

Далее создаём на основе кнопки базового стиль стиль «большой» кнопки и даём стилю имя BigButtonStyle:

<Style TargetType="Button" x:Key="BigButtonStyle" BasedOn="{StaticResource BaseButtonStyle}">

<Setter Property="Width" Value="170" />

<Setter Property="Height" Value="50" />

<Setter Property="FontSize" Value="16" />

</Style>

Теперь создаём стиль зелёной кнопки:

<Style TargetType="Button" x:Key="GreenButtonStyle" BasedOn="{StaticResource BaseButtonStyle}">

<Setter Property="Foreground" Value="Green" />

</Style>

И применяем всё это к макету кнопки всталенной на форму:

<Button Style="{local:MultiStyle BigButtonStyle GreenButtonStyle}" Content="Большая, зелёная"/>

Как видим, такую кнопку можно создать и без всех этих стилей, просто задав необходимые свойства. Однако шаблонизация стилей хороша когда меняется не один два параметра для элемента, а ОЧЕНЬ много и кардинально. И на настройку каждой кнопки просто уйдёт много времени, тогда как можно воспользоваться заранее приготовленным шаблоном.

Обработчик кнопки вызова последнего окна такой:

private void button8_Click(object sender, RoutedEventArgs e)

{

ButtonStylesWindow Window = new ButtonStylesWindow();

Window.Show();

}