美文网首页
ControlTemplate

ControlTemplate

作者: Lulus | 来源:发表于2017-12-31 14:51 被阅读0次

    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>
    

    效果

    1
    2

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

    相关文章

      网友评论

          本文标题:ControlTemplate

          本文链接:https://www.haomeiwen.com/subject/gsfagxtx.html