前言

本文是XAML基础系列第二篇，在此之前你可能需要大概了解：【WPF基础系列】XAML资源

正文

样式的简单使用

样式（Style）的用法类似于Web前端中的CSS，它设置一组属性值然后应用于元素上。任何派生自FrameworkElement或FrameworkContentElement的元素都可以设置样式。

创建样式最常见的方法是写在XAML资源中，因为样式也是一种资源。

下面是样式的创建与使用：

<Window.Resources>
    <Style x:Key="myButtonStyle" TargetType="{x:Type Button}">
        <Setter Property="HorizontalAlignment" Value="Center" />
        <Setter Property="Margin" Value="50" />
        <!--内边距-->
        <Setter Property="Padding" Value="10" />
        <!--背景色-->
        <Setter Property="Background" Value="DeepSkyBlue" />
        <!--前景色-->
        <Setter Property="Foreground" Value="White" />
        <!--边框粗细-->
        <Setter Property="BorderThickness" Value="0" />
    </Style>
</Window.Resources>
<StackPanel>
    <Button Content="通过样式设置了外观" Style="{StaticResource myButtonStyle}"/>
</StackPanel>

创建：在Window的Resources中定义了一个Style，x:Key指定了该样式的唯一键，TargetType指定该样式是应用到哪种类型的元素。

使用：Button元素通过设置Style属性来应用指定的样式。上述示例通过StaticResource标记扩展来使用键为myButtonStyle的样式。

效果图：

样式的使用方式

1.隐式应用

隐式应用类似于CSS的标签选择器，声明样式时使用TaegetType指定要应用的元素类型，就可以将该样式应用到对应类型的元素上，如：

<Window.Resources>
    <Style TargetType="Button">
        <Setter Property="Background" Value="Red"/>
        <Setter Property="Foreground" Value="White"/>
        <Setter Property="Margin" Value="10"/>
        <Setter Property="Padding" Value="10,5"/>
    </Style>
</Window.Resources>
<StackPanel>
    <Button Content="按钮1"/>
    <Button Content="按钮2"/>
</StackPanel>

将Style的TargetType设置为Button并省略x:Key属性，然后该样式会作用于范围内的所有Button类型元素。

效果图：

2.显式应用

显式应用类似于CSS的类选择器，声明样式时添加x:key属性，这时候样式不再隐式应用于TargetType指定的类型的元素，只有明确指定该样式的元素才会有效果。如：

<Window.Resources>
    <Style x:Key="redButton" TargetType="Button">
        <Setter Property="Background" Value="Red"/>
        <Setter Property="Foreground" Value="White"/>
        <Setter Property="Margin" Value="10"/>
        <Setter Property="Padding" Value="10,5"/>
    </Style>
</Window.Resources>
<StackPanel Height="85">
    <Button Content="应用了样式" Style="{StaticResource redButton}"/>
    <Button Content="没应用样式"/>
</StackPanel>

要显示指定样式，需要使用{StaticResource}标记扩展把元素的Style属性设置为x:Key的值。

效果图：

3.通过代码方式

还有一种不太常用的方式，通过C#代码的方式应用，如：

XAML代码：

<Window.Resources>
    <Style x:Key="redButton" TargetType="Button">
        <Setter Property="Background" Value="Red"/>
        <Setter Property="Foreground" Value="White"/>
        <Setter Property="Margin" Value="10"/>
        <Setter Property="Padding" Value="10,5"/>
    </Style>
</Window.Resources>
<StackPanel Height="85">
    <Button x:Name="btn1" Content="应用了样式"/>
    <Button Content="没应用样式"/>
</StackPanel>

C#代码：

btn1.Style = (Style)Resources["redButton"];

通过在C#代码中，设置元素的Style属性。Resources是ResourceDictionary类型，ResourceDictionary的值是object类型，因此需要转换为Style类型才能赋值。

效果图：

对样式进行扩展

样式也可以像类一样继承。定义一个样式的时候可以基于另一个样式，并且可以重写所继承样式的属性。如：

<Window.Resources>
    <Style x:Key="myButton" TargetType="Button">
        <Setter Property="Margin" Value="10"/>
        <Setter Property="Padding" Value="10,5"/>
        <Setter Property="Background" Value="Yellow"/>
    </Style>
    <Style x:Key="myRedButton" TargetType="Button" BasedOn="{StaticResource myButton}">
        <Setter Property="Background" Value="Red"/>
        <Setter Property="Foreground" Value="White"/>
    </Style>
</Window.Resources>
<StackPanel>
    <Button Content="基础样式" Style="{StaticResource myButton}"/>
    <Button Content="扩展样式" Style="{StaticResource myRedButton}"/>
</StackPanel>

设置Style的BasedOn属性，可以达到继承的效果。

注意：被继承的样式必须写在前面，否则会找不到要继承的Style，此外声明在后面Setter会比前面的Setter优先级更高，所以看起来像是重写继承的样式，如上述代码中Background属性。

效果图：

结语

样式是WPF的必修课，WPF之所以能做出引人注目的外观，离不开样式的应用。

感谢阅读，敬请斧正。