Wpf基础入门——模板和样式(Template&Style)

本篇文章学习于： 刘铁猛老师《深入浅出WPF》

什么是模板？

在WPF中，通过引入模板（Template)微软将数据和算法的“内容”与“形式”解耦了。WPF中的Template分为两大类：

• ControlTemplate是算法内容的表现形式，一个控件怎样组织其内部结构才能让它更符合业务逻辑、让用户操作起来更舒服就是由它来控制的。它决定了控件“长成什么样子”，并让程序员有机会在控件原有的内部逻辑基础上扩展自己的逻辑。
• DataTemplate是数据内容的表现形式，一条数据显示成什么样子，是简单的文本还是直观的图形动画就由它来决定。

一言蔽之，Template就是“外衣”——ControlTemplate是控件的外衣，DataTemplate是数据的外衣。

数据模板 ControlTemplate

DataTemplate常用的地方有3处，分别是：

• ContentControl的ContentTemplate属性，相当于给ContentControl的内容穿衣服。
• ItemsControl的 ItemTemplate属性，相当于给ItemsControl的数据条目穿衣服。
• GridViewColumn的CellTemplate属性，相当于给GridViewColumn单元格里的数据穿衣服。

示例：



代码对于初学者稍微长了点但结构非常简单。其中最重要的两句是：

• ContentTemplate="{StaticResource carDetailViewTemplate)"，相当于给一个普通UserControl的数据内容穿上一件外衣、让 Car类型数据以图文并茂的形式展现出来。这件外衣就是以x:Key="carDetailView Template"标记的DataTemplate资源。
• ItemTemplate="(StaticResource carListltemViewTemplate}"，是把一件数据的外衣交给ListBox，当ListBox.ItemsSource被赋值时，ListBox 会为每个条目穿上这件外衣。这件外衣是以x:Key="carListItem ViewTemplate"标记的DataTemplate资源。

因为不再使用事件驱动，而且给数据穿衣服的事儿也已自动完成，所以后台的C#代码就非常简单了。窗体的C#代码就只剩下这些：

控件模板 DataTemplate

实际项目中，ControlTemplate主要有两大用武之地：
（1）通过更换ControlTemplate改变控件外观，使之具有更优的用户使用体验及外观.。
（2）借助ControlTemplate，程序员与设计师可以并行工作，程序员可以先用WPF标准控件进行编程，等设计师的工作完成后，只需把新的ControlTemplate应用到程序中就可以了。

数据模板和控件模板的关系：

样式 Style

为了让同一种控件能担当起不同的角色，程序员就要为它们设计多种外观样式和行为动作，这就是Style。
构成Style最重要的两种元素是Setter和Trigger，Setter类帮助我们设置控件的静态外观风格，Trigger类则帮助我们设置控件的行为风格。

设置器 Setter

Setter，设置器，属性值的的设置器。我们给属性赋值的时候一般都采用“属性名=属性值”的形式。

• Setter类的Property属性用来指明你想为目标的哪个属性赋值
• Setter类的Value属性则是你提供的属性值。

示例：

<Window x:Class="Demo7._3.WpfStyle.MainWindow"
  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"
  xmlns:local="clr-namespace:Demo7._3.WpfStyle"
  mc:Ignorable="d"
  Title="MainWindow" Height="450" Width="800">
  <Window.Resources>
    <Style x:Key="myBtnStyle" TargetType="Button">
      <Style.Setters>
        <Setter Property="Background" Value="AliceBlue"/>
        <Setter Property="Height" Value="50"/>
      </Style.Setters>
    </Style>
  </Window.Resources>
  
  <StackPanel>
    <Button Style="{StaticResource myBtnStyle}"/>
  </StackPanel>
</Window>

触发器 Trigger

Trigger，触发器，即当某些条件满足时会触发一个行为(比如某些值的变化或动画的发生等)。
触发器比较像事件。事件一般是由用户操作触发的，而触发器除了有事件触发型的EventTrigger 外，还有数据变化触发型的Trigger/DataTrigger及多条件触发型的MultiTrigger/MultiDataTrigger等。

示例：

<Window x:Class="Demo7._3.WpfStyle.MainWindow"
        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"
        xmlns:local="clr-namespace:Demo7._3.WpfStyle"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Window.Resources>
        <Style x:Key="myBtnStyle" TargetType="Button">
            <Style.Setters>
                <Setter Property="Background" Value="AliceBlue"/>
                <Setter Property="Height" Value="50"/>
            </Style.Setters>
        </Style>
        <Style TargetType="CheckBox">
            <Style.Triggers>
                <Trigger Property="IsChecked" Value="True">
                    <Trigger.Setters>
                        <Setter Property="Foreground" Value="Red"/>
                    </Trigger.Setters>
                </Trigger>
            </Style.Triggers>
        </Style>
    </Window.Resources>
    <StackPanel>
        <Button Style="{StaticResource myBtnStyle}"/>
        <CheckBox Content="测试触发器"/>
    </StackPanel>
</Window>

<Window x:Class="Demo7._3.WpfStyle.MainWindow"
        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"
        xmlns:local="clr-namespace:Demo7._3.WpfStyle"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Window.Resources>
        <Style x:Key="myBtnStyle" TargetType="Button">
            <Style.Setters>
                <Setter Property="Background" Value="AliceBlue"/>
                <Setter Property="Height" Value="50"/>
            </Style.Setters>
        </Style>
      
        <Style TargetType="CheckBox">
            <Style.Triggers>
                <MultiTrigger>
                    <MultiTrigger.Conditions>
                        <Condition Property="IsChecked" Value="True"/>
                        <Condition Property="Content" Value="测试触发器"/>
                    </MultiTrigger.Conditions>
                    <MultiTrigger.Setters>
                        <Setter Property="Foreground" Value="Green"/>
                    </MultiTrigger.Setters>
                </MultiTrigger>
            </Style.Triggers>
        </Style>
    </Window.Resources>
    <StackPanel>
        <Button Style="{StaticResource myBtnStyle}"/>
        <CheckBox Content="测试触发器"/>
    </StackPanel>
</Window>