控件模板ControlTemplate与内容呈现ContentPresenter
一、ControlTemplate
1. ControlTemplate概述
WPF 中的大多数控件都有默认的控件模板。这些模板定义了控件的默认外观和行为,包括控件的布局、背景、前景、边框、内容等。ControlTemplate 类在 WPF 中的作用是定义控件的外观和布局,重新定义 ControlTemplate 可以极大地更改控件的外观。
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>