Реализация пользовательского интерфейса. Элементы управления. Стили. Ресурсы

Понятие стиля

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

Рассмотрим небольшой пример, демонстрирующий создание четырех кнопок.

<StackPanel>
<Button Width="100" Height="50"
Background="Green"
Content="Button 1" Margin="5" FontFamily="Arial"
FontSize="12" FontWeight="Bold"
Foreground="Blue" BorderThickness="3">
</Button>
<Button Width="100" Height="50"
Background="Green"
Content="Button 2" Margin="5" FontFamily="Arial"
FontSize="12" FontWeight="Bold"
Foreground="Blue" BorderThickness="3">
</Button>
<Button Width="100" Height="50"
Background="Green"
Content="Button 3" Margin="5" FontFamily="Arial"
FontSize="12" FontWeight="Bold"
Foreground="Blue" BorderThickness="3">
</Button>
<Button Width="100" Height="50"
Background="Green"
Content="Button 4" Margin="5" FontFamily="Arial"
FontSize="12" FontWeight="Bold"
Foreground="Blue" BorderThickness="3">
</Button>
</StackPanel> 

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

Для выделения общих свойств в отдельный стиль в XAML используется специальный элемент Style. Поскольку он не должен входить в дерево элементов, а лишь задает набор свойств группы элементов, то располагать его следует внутри ресурсов приложения, страницы или отдельного элемента (в зависимости от области применения).

Продемонстрируем работу элемента Style на примере. Для этого определим следующий блок кода сразу после открывающего элемента:

Page.
<Page.Resources>
<Style x:Key="buttonStyle" TargetType="Button">
<Setter Property="Background" Value="Green"></Setter>
<Setter Property="Margin" Value="5"></Setter>
<Setter Property="FontFamily" Value="Arial"></Setter>
<Setter Property="FontSize" Value="12"></Setter>
<Setter Property="FontWeight" Value="Bold"></Setter>
<Setter Property="Foreground" Value="Blue"></Setter>
<Setter Property="BorderThickness" Value="3"></Setter>
</Style>
</Page.Resources> 

Как видите, чтобы задать стиль, необходимо указать ключ и тип элементов, для которых будет применяться стиль. Ключ используется для поиска необходимого стиля, а TargetType определяет, к каким элементам применим стиль. Далее с помощью набора элементов Setter мы перечислили все свойства и их значения. Код XAML интерфейса выглядит следующим образом.

<StackPanel>
<Button Width="100" Height="50"
Style="{StaticResource buttonStyle}" Content="Button 1">
</Button>
<Button Width="100" Height="50"
Style="{StaticResource buttonStyle}" Content="Button 2">
</Button>
<Button Width="100" Height="50"
Style="{StaticResource buttonStyle}" Content="Button 3">
</Button>
<Button Width="100" Height="50"
Style="{StaticResource buttonStyle}" Content="Button 4">
</Button>
</StackPanel> 

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

<Page.Resources>
<Style TargetType="Button">
<Setter Property="Background" Value="Green"></Setter>
<Setter Property="Margin" Value="5"></Setter>
<Setter Property="FontFamily" Value="Arial"></Setter>
<Setter Property="FontSize" Value="12"></Setter>
<Setter Property="FontWeight" Value="Bold"></Setter>
<Setter Property="Foreground" Value="Blue"></Setter>
<Setter Property="BorderThickness" Value="3"></Setter>
</Style>
</Page.Resources>
<Grid Background="{StaticResource ApplicationPageBackgroundBrush}">
<StackPanel>
<Button Width="100" Height="50"
Content="Button 1">
</Button>
<Button Width="100" Height="50"
Content="Button 2">
</Button>
<Button Width="100" Height="50"
Content="Button 3">
</Button>
<Button Width="100" Height="50"
Content="Button 4">
</Button>
</StackPanel>
</Grid> 

Стили представляют собой очень мощный механизм, позволяющий сделать не только Ваше приложение в едином формате, но и придать общность большинству запускаемых приложений. Чтобы у разработчика была возможность создавать страницы, придерживаясь единого стиля, Visual Studio включает в любой проект файл StandardStyles.xaml, который определяет набор стандартных стилей на все случаи жизни. Так, попробуйте модифицировать код выше, прописав кнопкам стиль BackButtonStyle.

<StackPanel>
<Button Width="100" Height="50"
Content="Button 1" Style="{StaticResource BackButtonStyle}">
</Button>
<Button Width="100" Height="50"
Content="Button 2" Style="{StaticResource BackButtonStyle}">
</Button>
<Button Width="100" Height="50"
Content="Button 3" Style="{StaticResource BackButtonStyle}">
</Button>
<Button Width="100" Height="50"
Content="Button 4" Style="{StaticResource BackButtonStyle}">
</Button>
</StackPanel> 

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

BasedOn-стили

XAML в Windows Runtime поддерживает и BasedOn-стили. Это позволяет задать общие стили применительно к базовым классам для общей группы элементов управления (или для конкретного типа элементов управления) и определить дополнительные стили путем наследования. Ниже приведен пример BasedOn-стиля.

<Style x:Key="baseStyle" TargetType="Button" >
<Setter Property="Width" Value="100"></Setter>
</Style>
<Style x:Key="btnStyleRus"
BasedOn="{StaticResource baseStyle}" TargetType="Button">
<Setter Property="Foreground" Value="Blue"></Setter>
<Setter Property="Content" Value="Кнопка"></Setter>
</Style>
<Style x:Key="btnStyle"
BasedOn="{StaticResource baseStyle}" TargetType="Button">
<Setter Property="Foreground" Value="Green"></Setter>
<Setter Property="Content" Value="Button"></Setter>
</Style> 

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

Ресурсы

Выше говорилось о возможности создания стилей. Которые, как было отмечено, не должны входить в дерево XAML-элементов. Все стили записывали внутри свойства Resources, принадлежащего объекту Page. Подобное свойство есть у всех объектов XAML, порожденных от FrameworkElement, а также у объекта приложения (Application). Благодаря ресурсам разработчик может сохранять стили и другие части XAML-кода до востребования. Так, в ресурсы можно выделять объекты некоторых типов, стили, шаблоны данных и др. Фактически, свойство Resources ссылается на некий словарь, который может быть доступен как из кода, так и из XAML.

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

Рассмотрим небольшой пример.

<Page.Resources>
<LinearGradientBrush x:Key="myBrush">
<GradientStop Color="Red" Offset="0"></GradientStop>
<GradientStop Color="Green" Offset="1"></GradientStop>
</LinearGradientBrush>
</Page.Resources>
<StackPanel>
<Button Width="100" Height="50"
Background="{StaticResource myBrush}"
Content="Button 1" Margin="5">
</Button>
</StackPanel>

Здесь определили в роли ресурса градиентную кисть, указав в качестве ключа (он же является именем) myBrush. Данный ключ будет использоваться для доступа к ресурсу. Как Вы могли заметить, доступ к ресурсу определяется с помощью расширения разметки StaticResource. Достаточно указать имя ключа в качестве параметра.

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

<StackPanel>
<StackPanel.Resources>
<LinearGradientBrush x:Key="myBrush">
<GradientStop Color="Red" Offset="0"></GradientStop>
<GradientStop Color="Green" Offset="1"></GradientStop>
</LinearGradientBrush>
</StackPanel.Resources>
<Button Width="100" Height="50"
Background="{StaticResource myBrush}"
Content="Button 1" Margin="5">
</Button>
</StackPanel> 

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

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

<Application
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Application4">
<Application.Resources>
<LinearGradientBrush x:Key="myBrush">
<GradientStop Color="Red" Offset="0"></GradientStop>
<GradientStop Color="Green" Offset="1"></GradientStop>
</LinearGradientBrush>
</Application.Resources>
</Application> 

Выделение ресурсов объектов в отдельные файлы

Ресурсы можно хранить в отдельных файлах и собирать в нужном месте с помощью элемента ResourceDictionary. Вынесем кисть из предыдущего примера в отдельный файл RD1.xaml.

<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<LinearGradientBrush x:Key="myBrush">
<GradientStop Color="Red" Offset="0"></GradientStop>
<GradientStop Color="Green" Offset="1"></GradientStop>
</LinearGradientBrush>
</ResourceDictionary> 

Для подключения внешнего файла к интерфейсу приложения используется все тот же ResourceDictionary.

<Application
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Application4">
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="RD1.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
</Application> 

Если у вас несколько файлов - не проблема. Перечислите их все. Обратите внимание, что стандартный файл StandardStyles.xaml как раз и оформлен как внешний файл ресурсов, который подключается внутри файла App.xaml.

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

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

Рассмотрен процесс создания пользовательских интерфейсов с использованием языка разметки XAML. Рассмотрены примеры реализации фрагментов проектов для реализации интерфейсов приложения WinRT.

Вопросы