WPF学习笔记(19)控件模板ControlTemplate与内容呈现ContentPresenter

发布于:2025-07-02 ⋅ 阅读:(21) ⋅ 点赞:(0)


一、ControlTemplate

1. ControlTemplate概述

WPF 中的大多数控件都有默认的控件模板。这些模板定义了控件的默认外观和行为,包括控件的布局、背景、前景、边框、内容等。ControlTemplate 类在 WPF 中的作用是定义控件的外观和布局,重新定义 ControlTemplate 可以极大地更改控件的外观。

官方文档:https://learn.microsoft.com/zh-cn/dotnet/api/system.windows.controls.controltemplate?view=netframework-4.8

在这里插入图片描述
在这里插入图片描述

2. ControlTemplate详解

ControlTemplate 部分属性和事件如下:

属性 说 明
TargetType 获取或设置此 ControlTemplate 所针对的类型。
Triggers 获取根据指定条件应用属性更改或执行操作的 TriggerBase 对象的集。。
Resources 获取或设置可在此模板范围内使用的资源集合。
(继承自FrameworkTemplate)

3. TargetType用法

在这里插入图片描述在这里插入图片描述
在这里插入图片描述
代码与运行效果如下:

    <Window.Resources>
        <Style x:Key="ContentControlStyle1" TargetType="{x:Type ContentControl}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ContentControl}">
                        <!--增加模板背景、边框颜色和厚度,绑定设置的颜色。也可以直接写死,控件设置同样不生效-->
                        <Border Background="{TemplateBinding Background}"
                                BorderBrush="{TemplateBinding BorderBrush}"
                                BorderThickness="{TemplateBinding BorderThickness}">
                            <ContentPresenter/>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>
    <Grid>
        <!--ContentControl控件原模板只字体颜色和大小可以设置-->
        <ContentControl Style="{DynamicResource ContentControlStyle1}" x:Name="contentControl" Content="我来了" HorizontalAlignment="Left" Margin="264,123,0,0" VerticalAlignment="Top" Height="94" Width="283"
                        FontSize="30"
                        Background="Red"
                        Foreground="Black"
                        BorderBrush="Blue"
                        BorderThickness="4"/>

    </Grid>

在这里插入图片描述

4. Triggers 用法

在TargetType用法上还可以扩展触发器Triggers ,需指定触发的TargetName才可以生效,示例如下
在这里插入图片描述
在这里插入图片描述

 <Window.Resources>
     <Style x:Key="ContentControlStyle1" TargetType="{x:Type ContentControl}">
         <Setter Property="Template">
             <Setter.Value>
                 <ControlTemplate TargetType="{x:Type ContentControl}">
                     <!--增加模板背景、边框颜色和厚度,绑定设置的颜色。也可以直接写死,控件设置同样不生效-->
                     <Border x:Name="ell" Background="{TemplateBinding Background}"
                             BorderBrush="{TemplateBinding BorderBrush}"
                             BorderThickness="{TemplateBinding BorderThickness}">
                         <ContentPresenter/>
                     </Border>
                     
                     <!--触发器,鼠标在控件范围内改变边框颜色和背景-->
                     <ControlTemplate.Triggers>
                         <Trigger Property="IsMouseOver" Value="True">
                             <Setter TargetName="ell" Property="Background" Value="Cyan"/>
                             <Setter TargetName="ell" Property="BorderBrush" Value="Black"/>
                         </Trigger>

                         <!--事件触发器,鼠标移入字体从当前变到50-->
                         <EventTrigger RoutedEvent="MouseEnter">
                             <BeginStoryboard>
                                 <Storyboard>
                                     <DoubleAnimation To="50" Duration="0:0:3" Storyboard.TargetProperty="FontSize"/>
                                 </Storyboard>
                             </BeginStoryboard>
                         </EventTrigger>
                         
                         <!--事件触发器,鼠标移入字体从当前变到20-->
                         <EventTrigger RoutedEvent="MouseLeave">
                             <BeginStoryboard>
                                 <Storyboard>
                                     <DoubleAnimation To="20" Duration="0:0:3" Storyboard.TargetProperty="FontSize"/>
                                 </Storyboard>
                             </BeginStoryboard>
                         </EventTrigger>
                         
                     </ControlTemplate.Triggers>
                 </ControlTemplate>
             </Setter.Value>
         </Setter>
     </Style>
 </Window.Resources>
 <Grid>
     <!--ContentControl控件原模板只字体颜色和大小可以设置-->
     <ContentControl Style="{DynamicResource ContentControlStyle1}" x:Name="contentControl" Content="我来了" HorizontalAlignment="Left" Margin="264,123,0,0" VerticalAlignment="Top" Height="94" Width="283"
                     FontSize="25"
                     Background="Red"
                     Foreground="Black"
                     BorderBrush="Blue"
                     BorderThickness="4"/>

 </Grid>

在这里插入图片描述

二、 ContentPresenter

1.ContentPresenter概述

ContentPresenter类与ContentControl 使用非常类似,可以用作控件模板中的一个占位符,以便在运行时将其替换为具体内容。
官方文档:https://learn.microsoft.com/zh-cn/dotnet/api/system.windows.controls.contentpresenter?view=netframework-4.8
在这里插入图片描述

2. ContentPresenter详解

属性 说 明
Content 获取或设置显示的内容。
ContentSource 获取或设置要显示的属性,默认值为 Content.
ContentStringFormat 获取或设置一个撰写字符串,该字符串指定如果Content 属性显示为字符串,应如何设置该属性的格式
ContentTemplate 获取或设置用于显示控件内容的数据模板。
ContentTemplateSelector 获取或设置 DataTemplateSelector,它允许应用程序编写器为选择用于显示控件内容的模板提供自定义逻辑。

3. ContentPresenter用法

ContentPresenter的代码和运行效果如下
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

    <Grid>
        <Button x:Name="button1" Content="张三老师" HorizontalAlignment="Left" Margin="204,43,0,0" VerticalAlignment="Top" Height="60" Width="220">
            <Button.Template>
                <ControlTemplate TargetType="Button">
                    <ContentPresenter/>
                </ControlTemplate>
            </Button.Template>
        </Button>
        <Button x:Name="button2" Content="李四老师" HorizontalAlignment="Left" Margin="204,125,0,0" VerticalAlignment="Top" Height="60" Width="220">
            <Button.Template>
                <ControlTemplate TargetType="Button">
                    <ContentPresenter ContentSource="Content"/>
                </ControlTemplate>
            </Button.Template>
        </Button>
        <Button x:Name="button3" Content="王五老师" HorizontalAlignment="Left" Margin="204,217,0,0" VerticalAlignment="Top" Height="60" Width="220">
            <Button.Template>
                <ControlTemplate TargetType="Button">
                    <!--ControlTemplate只能直接写一个ContentPresenter,如果多个用使用Panel-->
                    <StackPanel>
                        <ContentPresenter/>
                        <ContentPresenter ContentSource="Content"/>
                        <ContentPresenter ContentSource="Width"/>
                        <ContentPresenter ContentSource="Margin"/>
                    </StackPanel>
                </ControlTemplate>
            </Button.Template>
        </Button>
    </Grid>

在这里插入图片描述


网站公告

今日签到

点亮在社区的每一天
去签到