Лекция 8: Реализация пользовательского интерфейса. Элементы управления. Стили. Ресурсы
Понятие стиля
Стиль - это специальный механизм, который позволяет собрать в одном месте все общие свойства определенной группы элементов управления. Очевидно, что если создается интерфейс, то все кнопки, поля редактирования, надписи и т. д. выполнены в едином стиле. Вряд ли кнопки в приложении раскрашены в разные цвета, а надписи имеют разный шрифт.
Рассмотрим небольшой пример, демонстрирующий создание четырех кнопок.
<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> Пример не совсем удачный (локализировать приложения таким образом нельзя), однако общую идею он демонстрирует.