ControlTemplate:外观定制
<Window.Resources>
<ControlTemplate x:Key="CheckBoxControlTemplate" TargetType="CheckBox">
<StackPanel>
<Rectangle Name="breakRectangle" Stroke="Red" StrokeThickness="2" Width="20" Height="20">
<Rectangle.Fill>
<!--默认Rectangle填充色为White-->
<SolidColorBrush Color="White"></SolidColorBrush>
</Rectangle.Fill>
</Rectangle>
<!--ContentPresenter 保留原控件属性-->
<ContentPresenter Margin="{TemplateBinding Padding}"></ContentPresenter>
</StackPanel>
</ControlTemplate>
</Window.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<CheckBox Content="我是普通CheckBox"></CheckBox>
<CheckBox Grid.Row="1" Template="{StaticResource CheckBoxControlTemplate}" Content="我是模板CheckBox"></CheckBox>
<CheckBox Grid.Row="2" Template="{StaticResource CheckBoxControlTemplate}" Content="我是模板CheckBox,我跟上一个模板的区别在于Padding" Padding="15"></CheckBox>
</Grid>
Tips
<ContentPresenter Margin="{TemplateBinding Padding}"/>
ContentPresenter 保留原控件属性
TemplateBinding Padding,即绑定每个CheckBox自己的Margin,更灵活
效果
1此时,点击Rectangle是没有效果的
ControlTemplate中使用触发器
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter TargetName="breakRectangle" Property="Fill" Value="Coral"></Setter>
</Trigger>
</ControlTemplate.Triggers>
Setter可以选择TargetName,即一个控件的触发器可以修改另一个控件的属性
效果
2使用Brush
Brush一类画笔,需定义为对象才能使用
可以使用颜色、图片等等
<Window.Resources>
<ControlTemplate x:Key="CheckBoxControlTemplate" TargetType="CheckBox">
<ControlTemplate.Resources>
<!--颜色-->
<SolidColorBrush x:Key="ColorBrush" Color="Pink"></SolidColorBrush>
<!--图片-->
<ImageBrush x:Key="ImageBrush" ImageSource="Images/cat.jpg"></ImageBrush>
</ControlTemplate.Resources>
<StackPanel>
<Rectangle Name="breakRectangle" Stroke="OrangeRed" StrokeThickness="2" Width="100" Height="100">
<Rectangle.Fill>
<!--默认Rectangle填充色为White-->
<SolidColorBrush Color="White"></SolidColorBrush>
</Rectangle.Fill>
</Rectangle>
<!--ContentPresenter 保留原控件属性-->
<ContentPresenter Margin="{TemplateBinding Padding}"></ContentPresenter>
</StackPanel>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter TargetName="breakRectangle" Property="Fill" Value="{StaticResource ImageBrush}"></Setter>
</Trigger>
<Trigger Property="IsChecked" Value="False">
<Setter TargetName="breakRectangle" Property="Fill" Value="{StaticResource ColorBrush}"></Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Window.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="0.5*"></RowDefinition>
<RowDefinition Height="0.5*"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Label Grid.Row="0" Content="没有选中时,CheckBox填充色为Pink"></Label>
<Label Grid.Row="1" Content="选中时,CheckBox填充为猫猫的图片"></Label>
<CheckBox Grid.Row="2" Template="{StaticResource CheckBoxControlTemplate}" Content="我是模板CheckBox"></CheckBox>
</Grid>
效果
12
可以对比在Style中嵌套Template的写法
https://github.com/zLulus/NotePractice/tree/dev3/WPF/WpfDemo/Template/StyleUseTemplate
其他例子
<Window.Resources>
<ControlTemplate x:Key="CheckBoxControlTemplate" TargetType="{x:Type CheckBox}">
<Grid>
<TextBlock x:Name="textBlock1" HorizontalAlignment="Left" Margin="116,39,0,0" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Top"/>
<ContentPresenter/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter TargetName="textBlock1" Property="Text" Value="CheckBox is checked."></Setter>
</Trigger>
<Trigger Property="IsChecked" Value="False">
<Setter TargetName="textBlock1" Property="Text" Value="CheckBox is not checked."></Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Window.Resources>
<Grid>
<CheckBox Template="{StaticResource CheckBoxControlTemplate}" x:Name="checkBox1" Content="CheckBox" HorizontalAlignment="Left" Margin="137,59,0,0" VerticalAlignment="Top"></CheckBox>
</Grid>
对非内置属性的修改,用模板
用style识别不了textBlock1
直接写CheckBox 的Triggers识别不了IsChecked
示例代码
https://github.com/zLulus/NotePractice/tree/dev3/WPF/WpfDemo/Template/ControlTemplate
网友评论