ControlTemplate 转载

最新推荐文章于 2025-07-01 22:45:00 发布

转载最新推荐文章于 2025-07-01 22:45:00 发布 · 210 阅读

WPF 专栏收录该内容

29 篇文章

订阅专栏

本文深入探讨WPF中控件模板ControlTemplate的使用方法，包括视觉树和触发器的设置，通过具体XML示例解释如何自定义Button的外观及交互效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

控件模板ControlTemplate，有两部分：VistualTree视觉树，即是能看到的外观；Trigger触发器，里面包括外部条件达到某一条件下会引起的响应。
 <Window.Resources>
        <ControlTemplate x:Key="ButtonTempalted" TargetType="{x:Type Button}">
            <Border Name="Border" BorderThickness="2" CornerRadius="3" BorderBrush="AliceBlue" Background="Aqua" TextBlock.Foreground="White">
                <ContentPresenter Margin="{TemplateBinding Padding}" HorizontalAlignment="Center" VerticalAlignment="Center" >
                </ContentPresenter>
            </Border>
            <ControlTemplate.Triggers>
                <Trigger Property="IsMouseOver" Value="True" >
                    <Setter TargetName="Border"   Property="Background" Value="Red"></Setter>
                </Trigger>
                <Trigger Property="IsPressed" Value="True">
                    <Setter TargetName="Border"   Property="Background" Value="White"></Setter>
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
    </Window.Resources>
    <StackPanel Margin="5">
        <Button Margin="5" Padding="3">Normal Button</Button>
        <Button Margin="5" Padding="3" Name="myBorder" Template="{StaticResource ResourceKey=ButtonTempalted}">Templated Button</Button>
    </StackPanel>
以上xml中描述 StackPanel 中添加了2个Button控件，一个不使用控件模板Normal Button 一个使用ButtonTempalted 控件模板资源

控件模板中包含视覚树 和触发器，在上述例子中我设置了 该控件模板目标类型为Button 在外观设置中设置buuton的Border的外观属性 
需要注意的是如果仅如下设置border外观，buuton控件不能正常显示，此时还需要设置ContentPresenter内容表示器 设置内容元素的属性

 <Border Name="Border" BorderThickness="2" CornerRadius="3" BorderBrush="AliceBlue" Background="Aqua" TextBlock.Foreground="White">
                
            </Border>

Trigger 触发器设置控件模板的行为

 <Trigger Property="IsMouseOver" Value="True" >
                    <Setter TargetName="Border"   Property="Background" Value="Red"></Setter>
                </Trigger>

需要设置 Property 行为目标 Value触发该行为的值

https://www.cnblogs.com/houzf/p/10258559.html