WPF 模板（Template）与样式（Style）

一 、模板（Template）

分为两大类：ControlTemplate控件模板 和 DataTemplate数据模板。

· ControlTemplate控件模板：算法和内容的表现形式。对控件属性样式重新定义，可运用模板属性来实现控件内部结构的完全改变。

· DataTemplate数据模板：数据内容的展现形式。与数据有关，即便这些数据多数都是固定值，但我可以用数据模板来改变他的表现方式，使不变值具有多变的样式。

1.ControlTemplate控件模板

主要有两个重要属性：

        VisualTree 内容属性，呈现所画的控件。

        Triggers 触发器，改变视觉树上的元素。         

如：重写button样式，将button设置成圆角框，代码如下：

<Window x:Class="WpfTest.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:WpfTest"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800" Name="win">
    <Window.Resources>
        <Style x:Key="xx" TargetType="Button">
            <Setter Property="Template">
                <Setter.Value >
                    <ControlTemplate TargetType="Button">
                        <Border BorderThickness="1" BorderBrush="Black" 
                                 Width="100" Height="50" CornerRadius="20">
                            <ContentPresenter Content="changed" VerticalAlignment="Center" HorizontalAlignment="Center"/>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>
    <Grid>
        <Button Content="not change" HorizontalAlignment="Left" VerticalAlignment="Center" Width="100" Height="50" Margin="200,100"/>
        <Button Style="{StaticResource xx}" Foreground="Purple"/>
    </Grid>
</Window>

实现效果如图:

其中，ControlPresenter通常叫做占位符，用来替换ContentControl控件。如果没有ControlPresenter内容控件就没有内容显示。ItemsPresenter用于显示条目数据，作为条目占位符。

Style设置key值，控件引用其key'值来设置自身样式，如果style未设置key值，则作用域内所有TargetType类型控件都默认使用其样式。

2.DataTemplate数据模板

此模板允许定制数据的外观，常用在以下3处：

· ContentControl的ContentTemplate属性，用于定制ContentControl内容的外观。

· ItemsControl的ItemsTemplate属性，用于定制ItemsControl数据条目的外观。

· GridViewColumn的CellTemplate属性，用于定制GridViewColumn单元格数据的外观。

用于ContentControl的ContentTemplate属性举例：

<Window x:Class="WpfTest.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:WpfTest"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800" Name="win">
    <Window.Resources>
        <DataTemplate x:Key="MyDataTemplate">
            <TextBlock Text="{Binding}" FontSize="20" Foreground="GreenYellow" Margin="10,10" Background="Gray"
                       Width="50" Height="30"/>
        </DataTemplate>
    </Window.Resources>
    <Grid>
        <ContentControl ContentTemplate="{StaticResource MyDataTemplate}" Content="5555" HorizontalAlignment="Left" VerticalAlignment="Top"/>
    </Grid>
</Window>

 效果展示如下：

 用于ItemsControl的ItemsTemplate属性举例：

将书名以及作者展示在界面，书名放到粉色边框展示，作者放在button展示：

界面代码如下：

前端代码：
<Window x:Class="WpfTest.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:WpfTest"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800" Name="win">
    <Window.Resources>
        <DataTemplate x:Key="MyDataTemplate">
            <StackPanel Orientation="Horizontal">
                <Border Background="Pink">
                    <TextBlock Text="{Binding Title}"/>
                </Border>
                <Button Content="{Binding Author}" Cursor="Hand" Margin="10,0"/>
            </StackPanel>
        </DataTemplate>
    </Window.Resources>
    <Grid>
        <ListBox Grid.Row="1" ItemsSource="{Binding BookList,ElementName=win}" ItemTemplate="{StaticResource MyDataTemplate}" Width="200" Height="200"/>
    </Grid>
</Window>

后台逻辑代码：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Security.Cryptography.X509Certificates;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace WpfTest
{
    /// <summary>
    /// MainWindow.xaml 的交互逻辑
    /// </summary>
    public partial class MainWindow : Window
    {
        public List<Book> BookList { get; set; } = new List<Book>();
        public MainWindow()
        {
            InitializeComponent();
            BookList.Add(new Book() { Title = "Book1", Author = "Tom" });
            BookList.Add(new Book() { Title = "Book1", Author = "Tom" });
            BookList.Add(new Book() { Title = "Book1", Author = "Tom" });
            BookList.Add(new Book() { Title = "Book1", Author = "Tom" });
        }
    }

    public class Book
    {
        private string name;
        public string Title
        {
            get { return name; }
            set { name = value; }
        }

        private string author;
        public string Author
        {
            get { return author; }
            set { author = value; }
        }
    }
}

效果展示如图：

 用于GridViewColumn的CellTemplate属性举例：

<Window x:Class="WpfTest.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:WpfTest"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800" Name="win">
    <Window.Resources>
        <DataTemplate x:Key="MyDataTemplate">
            <TextBlock Text="{Binding}" FontSize="20" Foreground="GreenYellow" Margin="10,10" Background="Gray"
                       Width="50" Height="30"/>
        </DataTemplate>
        <Style x:Key="hh" TargetType="DataGridColumnHeader">
            <Setter Property="Background" Value="Pink"/>
        </Style>
        <Style x:Key="xx" TargetType="TextBlock">
            <Setter Property="Background" Value="GreenYellow"/>
        </Style>
    </Window.Resources>
    <Grid>
        <DataGrid AutoGenerateColumns="False" ItemsSource="{Binding BookList,ElementName=win}" >
            <DataGrid.Columns>
                <DataGridTextColumn Header="books name" Binding="{Binding Title}"/>
                <DataGridTemplateColumn Header="author" HeaderStyle="{StaticResource hh}">
                    <DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <TextBlock Text="{Binding Author}" Style="{StaticResource xx}"/>
                        </DataTemplate>
                    </DataGridTemplateColumn.CellTemplate>
                </DataGridTemplateColumn>
            </DataGrid.Columns>
        </DataGrid>
    </Grid>
</Window>

后台逻辑代码和ItemsControl例子中一样。

实现效果如图：

二、样式（Style）

1.Setter

属性值的设置器，property = value

setter property= “background” value=“pink”

2.Trigger

某些条件满足时触发一个行为，有三种触发器：

EventTrigger：事件触发；

Trigger / DataTrigger：属性触发；

MultiTrigger：多条件触发。多了一个conditions属性，需要同时成立的条件就存储在这个集合中。