Стили

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

<Page
    x:Class="HelloApp.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:HelloApp"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Page.Resources>
        <Style x:Key="MagentaGray" TargetType="Button">
            <Setter Property="FontFamily" Value="Arial" />
            <Setter Property="Background" Value="DarkGray" />
            <Setter Property="Foreground" Value="DarkMagenta" />
        </Style>
        <Style x:Key="GrayMagenta" TargetType="Button">
            <Setter Property="FontFamily" Value="Arial" />
            <Setter Property="Background" Value="DarkMagenta" />
            <Setter Property="Foreground" Value="DarkGray" />
        </Style>
    </Page.Resources>
    <Grid>
        <StackPanel>
            <Button x:Name="button1" Content="Стиль 1" Style="{StaticResource MagentaGray}" Click="Button_Click" />
            <Button x:Name="button2" Content="Стиль 2" Style="{StaticResource MagentaGray}" Click="Button_Click" />
        </StackPanel>
    </Grid>
</Page>

Фактически стиль также является ресурсом и определяется в коллекции ресурсов элемента. Стиль создается с помощью объекта Style. Затем указывается его ключ и тип, элементов, к которым он относится (свойство TargetType). Внутри стиля создаются объекты Setter. Они определяют свойства, подлежащие стилизации, и передаваемые им значения. Свойство Property имеет следующий синтаксис: Property="Свойство_элемента".

В данном случае мы определили два стиля. Теперь с помощью кнопок создадим логику переключения стилей. Для этого добавим в код c# следующий обработчик:

private void Button_Click(object sender, RoutedEventArgs e)
{
    Button button = (Button)sender;
    if(button.Name=="button1")
    {
        button1.Style = (Style)this.Resources["MagentaGray"];
        button2.Style = (Style)this.Resources["MagentaGray"];
    }
    else if (button.Name == "button2")
    {
        button1.Style = (Style)this.Resources["GrayMagenta"];
        button2.Style = (Style)this.Resources["GrayMagenta"];
    }
}

Теперь по умолчанию к кнопкам будет применен первый стиль:

После нажатия на вторую кнопку мы сможем переключиться ко второму стилю: