WPF ControlTemplate

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

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="" Width="">

    <Window.Resources>

        <Style TargetType="Button">

            <Setter Property="Width" Value=""/>

            <Setter Property="Height" Value=""/>

        </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>

对于页面中特定的某个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="" Width="">

    <Window.Resources>

 <Style TargetType="Button">

            <Setter Property="Width" Value=""/>

            <Setter Property="Height" Value=""/>

        </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>