ControlTemplate

it2022-06-25  97

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,更灵活

效果

 

 

此时,点击Rectangle是没有效果的

 

ControlTemplate中使用触发器

<ControlTemplate.Triggers> <Trigger Property="IsChecked" Value="True"> <Setter TargetName="breakRectangle" Property="Fill" Value="Coral"></Setter> </Trigger> </ControlTemplate.Triggers>

Setter可以选择TargetName,即一个控件的触发器可以修改另一个控件的属性

效果

   

使用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>

效果

 

     

 

可以对比在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

转载于:https://www.cnblogs.com/Lulus/p/8157711.html

相关资源:ControlTemplateBrowser.rar

最新回复(0)