WPF系列教程（二十八）：样式基础，Style样式的定义和使用，关联事件处理Style，多层样式的处理，自动应用样式

资源的定义与使用

在窗体中定义静态资源：

<Window.Resources>
    <FontFamily x:Key="ButtonFontFamily">
        Times New Roman
    </FontFamily>
    <sys:Double x:Key="ButtonFontSize">
        18
    </sys:Double>
    <FontWeight x:Key="ButtonFontWeight">
        Bold
    </FontWeight>
</Window.Resources>

添加xmlns:sys ="clr-namespace:System;assembly=mscorlib"。
对一个按钮控件使用该静态资源：

<Button Margin="5" Name="btn1" Padding="5" Content="一个自定义按钮 OneButton" FontFamily="{StaticResource ButtonFontFamily}" FontSize="{StaticResource ButtonFontSize}" FontWeight="{StaticResource ButtonFontWeight}"/>

可以看到使用资源这种方法在定义和使用时都较为麻烦。
可以通过样式解决该问题。

样式定义与使用

为此我们直接设置了Style的资源：

<Style x:Key="BigFontButtonStyle"><!--定义Style的资源-->
    <Setter Property="Control.FontFamily" Value="Times New Roman"> <!--都来源于控件类，属性+值定义设置器-->
    </Setter>
    <Setter Property="Control.FontSize" Value="20">
    </Setter>
    <Setter Property="Control.FontWeight" Value="Bold">
    </Setter>
</Style>

样式在使用时只需定义元素的Style属性为静态资源即可：

<Button Margin="5" Padding="5" Content="另一个自定义按钮 OneButton" Style="{ 
        StaticResource BigFontButtonStyle}"/>

样式定义可以在任何上级元素甚至本元素中的。
添加字体之类的样式是较为简单的，当我们使用一些较为复杂的例如图片画刷背景样式时，就需要用到元素属性：

<Setter Property="Control.Background">
    <Setter.Value>
        <ImageBrush TileMode="Tile" ViewportUnits="Absolute" Viewport="0 0 32 32" Opacity="0.3" ImageSource="/6075f3f7e9ce19b5.jpg">
        </ImageBrush>
    </Setter.Value>
</Setter>

关联事件处理程序

当我们在定义样式时，希望样式可以随着某个事件的触发而发生改变，可以在Style定义的时候加入事件处理程序（普通样式的定义包括Property和Value两个属性），关联事件样式的定义包括Event和Handler。
下面的案例定义了三个TextBlock，第一个和第二个文本框响应当鼠标移动到上面时高亮，第二个则不用。
样式的定义方法如下：

<Window.Resources>
<Style x:Key="MouseOverHight">
   <Setter Property="TextBlock.Padding" Value="5">                
   </Setter>
   <EventSetter Event="FrameworkElement.MouseEnter" Handler="element_MouseEnter">
   </EventSetter>
   <EventSetter Event="FrameworkElement.MouseLeave" Handler="element_MouseLeave">
       <!--关联事件处理程序-->
   </EventSetter>
</Style>

调用时同样的使用静态资源调用的方式：

<StackPanel>
    <TextBlock Style="{ 
        StaticResource MouseOverHight}">
        Hover over me
    </TextBlock>
    <TextBlock Padding="5">
        Don't bother me
    </TextBlock>
    <TextBlock Style="{ 
        StaticResource MouseOverHight}">
        Hover over me
    </TextBlock>
</StackPanel>

对应两个Handler分别定义响应函数：

private void element_MouseEnter(object sender, MouseEventArgs e)
{
    
    
    ((TextBlock)sender).Background = new SolidColorBrush(Colors.LightGoldenrodYellow);
}
private void element_MouseLeave(object sender, MouseEventArgs e)
{
    
    
    ((TextBlock)sender).Background = null;
}

定义移动到上方时高亮，移开时消除背景。
实现效果：
在这里插入图片描述

多层样式

当要设置两个样式，而这两个样式之间有共同的属性值设置时，可以采用多层样式结构，利用BasedOn属性继承父级的样式。
下面的例子定义了两个样式，第二个样式继承了第一个样式的样式，但是又新建或覆盖了一些新的样式：

<Style x:Key="EmphasizedBigFontButtonStyle" BasedOn="{StaticResource BigFontButtonStyle}">
    <Setter Property="Control.Foreground" Value="White"/>
    <Setter Property="Control.Background" Value="DarkBlue"/>
    <Setter Property="Control.FontSize" Value="10"/> <!--EmphasizedBigFontButtonStyle样式在它的父级层BigFontButtonStyle样式中已经定义了字体大小，但是会覆盖原有的样式，取最后一次设置的样式-->
</Style>

它的父级是BigFontButtonStyle：

<Style x:Key="BigFontButtonStyle"><!--定义Style的资源-->
   <Setter Property="Control.FontFamily" Value="Times New Roman"> <!--都来源于控件类，属性+值定义设置器-->
   </Setter>
   <Setter Property="Control.FontSize" Value="20">
   </Setter>
   <Setter Property="Control.FontWeight" Value="Bold">
   </Setter>
   <Setter Property="Control.Background">
       <Setter.Value>
           <ImageBrush TileMode="Tile" ViewportUnits="Absolute" Viewport="0 0 32 32" Opacity="0.3" ImageSource="/6075f3f7e9ce19b5.jpg">
           </ImageBrush>
       </Setter.Value>
   </Setter>
</Style>

同样的都设置了字体大小，取最底层的字号10，效果如下：
在这里插入图片描述

为特定类型的元素自动应用样式

在定义样式时，为样式设定它所应用的目标元素类型，使用TargetType属性来设定：

<Style TargetType="Button" BasedOn="{StaticResource BigFontButtonStyle}">

将该样式应用于所有的按钮元素。如果我们需要排除某个元素，使其不受自动应用样式的影响，只需将该元素的样式设置为空Style="{x:Null}"即可：

<Button Margin="5" Padding="5" Name="btn2" Content="一个常规的按钮 OneButton" Style="{ 
        x:Null}"/>

效果如下：
在这里插入图片描述