WPF开发快速入门【2】WPF的基本特性（Style、Trigger、Template）

概述

本文描述几个WPF的常用特性，包括：样式、触发器和控件模板。

样式/Style

Style就是控件的外观，在XAML中，我们通过修改控件的属性值来设置它的样式，如：

 <!--直接定义style-->
 <Border Grid.Row="0" Grid.Column="0" Background="Pink"/>

这样写的缺点是如果有一组控件具备同样的样式，代码不能复用，每个都要单独设置。所以，需要将样式代码提取出来，以便共用。

    <UserControl.Resources>
        <Style x:Key="Border1" TargetType="Border">
            <Setter Property="Background" Value="Orange"/>
        </Style>
    </UserControl.Resources>

    <!--在文件头部定义-->
    <Border Grid.Row="0" Grid.Column="1" Style="{StaticResource Border1}"/>

TargetType="Border"表示这个样式表是针对Border控件的，Border1是这个样式的名字，如果不设置Key，表示对该页面范围内的所有Border控件均有效。

上述这个样式是定义在该控件头部的，它的有效范围就是当前页面。如果有多个页面或窗体需要用到同样的样式，那就需要在App.xaml中进行定义。

实际应用时，我们一般不会直接在App.xaml中定义样式，而是会新建一个资源字典文件，在该资源文件中进行定义，然后在App.xaml中包含该文件即可。

资源文件的定义：Style/Colors.xaml

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Style x:Key="Border2" TargetType="Border">
        <Setter Property="Background" Value="Chocolate"/>
    </Style>
</ResourceDictionary>

在App.xaml中包含该资源文件

<Application x:Class="LearnWPF.App">
    <Application.Resources>
        <ResourceDictionary>
                <ResourceDictionary Source="Style/Colors.xaml"/>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

我们还可以在类库中定义样式，定义方式同上，同时，仍需要在在App.xaml中包含该资源文件，但包含方式和本地的不一样。

<ResourceDictionary Source="pack://application:,,,/LearnWPF.Controls;component/Style/CommonColors.xaml"/>

可以看出，这和我们引用第三方控件中的样式资源的方式是一样的。

  <!-- MahApps.Metro resource dictionaries. Make sure that all file names are Case Sensitive! -->
  <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.xaml" />
  <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Fonts.xaml" />

触发器/Triggger

在样式中应用触发器，是指在控件某个触发属性变化时，要执行的属性变化，或启动某个动画。

    <UserControl.Resources>
        <Style x:Key="MyButton" TargetType="Button">
            <Setter Property="FontSize" Value="14"/>
            <Setter Property="FontWeight" Value="Normal"/>
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="FontSize" Value="16"/>
                    <Setter Property="FontWeight" Value="Bold"/>
                </Trigger>
            </Style.Triggers>
        </Style>
    </UserControl.Resources>

以上表示当IsMouseOver=True时，将修改该控件的FontSize和FontWeight属性。IsMouseOver=False时，控件属性将恢复原来的值。

控件模板/ControlTemplate

有时候，我们需要完全修改控件的外观，这时就需要用到ControlTemplate，如下代码定义一个带指示灯的按钮

    <Window.Resources>
        <Style x:Key="myButton"  TargetType="Button">
            <Setter Property="Background" Value="SeaGreen"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Border BorderThickness="1" BorderBrush="Gray" Background="{TemplateBinding Background}" CornerRadius="10" >
                            <StackPanel Orientation="Horizontal" HorizontalAlignment="Left"  >
                                <Ellipse Width="20" Height="20" Fill="Green" Margin="10"/>
                                <TextBlock Text="{TemplateBinding Content}" VerticalAlignment="Center" Margin="2 0"/>
                            </StackPanel>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>

需要注意：这里有两个地方声明了TargetType="Button"。TemplateBinding 表示采用控件原来的值。在控件模板的定义中，也是可以使用Trigger的。

    <Window.Resources>
        <Style x:Key="myButton"  TargetType="Button">
            <Setter Property="Background" Value="Silver"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Border BorderThickness="1" BorderBrush="Gray" Background="{TemplateBinding Background}" CornerRadius="10" >
                            <StackPanel Orientation="Horizontal" HorizontalAlignment="Left"  >
                                <Ellipse x:Name="ell" Width="20" Height="20" Fill="LightGreen" Margin="10"/>
                                <TextBlock Text="{TemplateBinding Content}" VerticalAlignment="Center" Margin="2 0"/>
                            </StackPanel>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True"  >
                                <Setter TargetName="ell" Property="Fill" Value="Red"/>
                                <Setter Property="FontSize" Value="18"/>
                                <Setter Property="Foreground" Value="White"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>

与前文提到的Trigger不同，这里在设置属性时，多了一个TargetName="ell"

<Setter TargetName="ell" Property="Fill" Value="Red"/>

这表示，该项操作是针对ell这个控件的。

如果没有指定TargetName，能设定的属性仅仅是包含Button这个控件所具备的属性，Button是没有Fill属性的，就算原始控件是包含Fill属性的，也不能保证该属性的设置能向下延伸到你想要修改的控件，所以在ControlTemplate中修改控件属性时应指定TargetName 。

资源

系列目录：WPF开发快速入门【0】前言与目录

代码下载：Learn WPF: WPF学习笔记 (gitee.com)