Стили

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

Зачем нужны стили?

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

<UserControl x:Class="TestApplication.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="200" d:DesignWidth="250">
    <UserControl.Resources>
        <FontFamily x:Key="arial">Arial</FontFamily>
        <SolidColorBrush x:Key="blue" Color="Blue" />
        <SolidColorBrush x:Key="red" Color="Red" />
    </UserControl.Resources>
    <Grid x:Name="LayoutRoot" Background="Black">
        <Button Height="20" Width="160" VerticalAlignment="Top"  
        			Content="Создать стиль" FontFamily="{StaticResource arial}" 
        			Background="{StaticResource blue}" Foreground="{StaticResource red}" />
        <Button Height="20" Width="160" VerticalAlignment="Top" Margin="0 30 0 0" 
        			Content="Сменить стиль" FontFamily="{StaticResource arial}" 
        			Background="{StaticResource blue}" Foreground="{StaticResource red}" />
    </Grid>
</UserControl>

Однако здесь нам придется создавать несколько привязок к свойствам элемента Buttom, а потом еще дублировать все это на другой кнопке. Куда более элегантным решением было бы применение стилей:

<UserControl x:Class="TestApplication.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="200" d:DesignWidth="250">
    <UserControl.Resources>
        <Style x:Key="RedAndBlue" TargetType="Button">
            <Setter Property="Control.FontFamily" Value="Arial" />
            <Setter Property="Control.Background" Value="Blue" />
            <Setter Property="Control.Foreground" Value="Red" />
        </Style>
    </UserControl.Resources>
    <Grid x:Name="LayoutRoot" Background="Black">
        <Button Height="20" Width="160" VerticalAlignment="Top"
        Content="Создать стиль" Style="{StaticResource RedAndBlue}"/>
        <Button Height="20" Width="160" VerticalAlignment="Top" Margin="0 30 0 0" 
        Content="Сменить стиль" Style="{StaticResource RedAndBlue}"/>
    </Grid>
</UserControl>

Стиль создается с помощью объекта Style. Затем указывается его ключ (с помощью свойства x:Key) и тип элемента (с помощью свойства TargetType), для которого предназначен стиль. Потом уже создается коллекция Setters. В нее входят объекты Setter, они определяют свойства, подежащие стилизации, и передаваемые им значения.
Свойство Property имеет следующий синтаксис: Property="Тип_элемента.Свойство_элемента"
Выше в качестве типа элемента использовался Control, однако он может быть любым другим, например, Button.
<Setter Property="Button.FontFamily" Value="Arial" />

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

Мы можем обратиться к стилям в коде также, как и к другим ресурсам:

	Style RedAndBlue = (Style)this.Resources["RedAndBlue"];
	button1.Style = RedAndBlue;

Наследование стилей

У класса Style есть свойство BasedOn, с помощью которого можно наследовать и расширять существующие стили:

    <UserControl.Resources>
        <Style x:Key="RedAndBlue" TargetType="Button">
            <Setter Property="Control.FontFamily" Value="Arial" />
            <Setter Property="Control.Background" Value="Blue" />
            <Setter Property="Control.Foreground" Value="Red" />
        </Style>
        <Style x:Key="BorderStyle" TargetType="Button" BasedOn="{StaticResource RedAndBlue}">
            <Setter Property="Button.BorderBrush" Value="Red" />
        </Style>
    </UserControl.Resources>

Cвойство BasedOn в качестве значения принимает существующий стиль, определяя его как статический ресурс. В итоге он объединяет весь функционал родительского стиля со своим собственным.