WPF ControlTemplate

Posted 2020-07-12 极致世界

ControlTemplate:控件模板，顾名思义也就是定制特定的控件供公共调用，有点类似WinForm中对一些通用控件进行重写使用。

ControlTemplate:控件模板主要有两个重要属性：VisualTree内容属性和Triggers触发器。定义控件模板也是对控件的视觉树和触发器进行重新定义，属性可以依赖原有控件的属性，只是根据需要调整的部分属性，

在Xaml文件的Resources中定义需要使用的模板，在需要使用模板的控件中将Template赋值为相应的控件模板x:key值实现控件的重定义。

以我们最常使用的Button为例，一般也都会都Button的控件模板作为资源进行全局通用资源，在具体使用的地方进行替换原有控件的Template:

<Window x:Class="WpfApp.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:WpfApp"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <Style TargetType="Button">
            <Setter Property="Width" Value="80"/>
            <Setter Property="Height" Value="30"/>
        </Style>
        <ControlTemplate TargetType="Button" x:Key="BtnTemplate">
            <Grid>
                <Ellipse Name="FaceEllispe" Width="{TemplateBinding Button.Width}" Height="{TemplateBinding Button.Height}" Fill="{TemplateBinding Button.Background}"/>
                <TextBlock Name="txtBlock" Margin="{TemplateBinding Button.Padding}" VerticalAlignment="Center" HorizontalAlignment="Center" Text="{TemplateBinding Button.Content}"/>
            </Grid>
            <ControlTemplate.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Button.Foreground" Value="Red"/>
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>        
    </Window.Resources>
    <Grid>
        <StackPanel>
        <TextBlock Style="{StaticResource TitleText}" Name="textblock1">My Test WPF</TextBlock>
            <TextBlock>Click on my new Button</TextBlock>
            <Button Content="Test btn" Template="{StaticResource BtnTemplate}"/>
        </StackPanel>
    </Grid>
</Window>

View Code

对于页面中特定的某个Button进行结构重定义的话，也可以直接在Button控件下面改写Template：

<Window x:Class="WpfApp.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:WpfApp"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
 <Style TargetType="Button">
            <Setter Property="Width" Value="80"/>
            <Setter Property="Height" Value="30"/>
        </Style>
    </Window.Resources>
    <Grid>
        <StackPanel>
            <TextBlock Style="{StaticResource TitleText}" Name="textblock1">My Test WPF</TextBlock>
            <TextBlock>Click on my new Button</TextBlock>
            <Button Content="Test btn">
                <Button.Template>
                    <ControlTemplate>
                        <Grid>
                            <Ellipse Name="FaceEllispe" Width="{TemplateBinding Button.Width}" Height="{TemplateBinding Button.Height}" Fill="{TemplateBinding Button.Background}"/>
                            <TextBlock Name="txtBlock" Margin="{TemplateBinding Button.Padding}" VerticalAlignment="Center" HorizontalAlignment="Center" Text="{TemplateBinding Button.Content}"/>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="Button.Foreground" Value="Red"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Button.Template>
            </Button>
        </StackPanel>
    </Grid>
</Window>

View Code

两种实现方式，采用哪种依赖于模板的通用性，当然即使都是单次使用也可以写成资源文件进行调用，简化Xaml复杂度。