WPF Button控件使用属性触发器--不生效问题

最新推荐文章于 2024-07-23 01:49:51 发布

^@^lemon tea^@^

最新推荐文章于 2024-07-23 01:49:51 发布

阅读量4.2k

点赞数 4

分类专栏： WPF # WPF 基础学习 # WPF 遇坑记文章标签： Button 属性触发 Template 鼠标悬停样式重写

本文链接：https://blog.csdn.net/BYH371256/article/details/124584985

版权

WPF 同时被 3 个专栏收录

49 篇文章 13 订阅

订阅专栏

WPF 基础学习

37 篇文章 3 订阅

订阅专栏

WPF 遇坑记

18 篇文章 5 订阅

订阅专栏

本章讲述Button使用属性触发器，通过属性触发界面外观的变化，首先先看一段代码；

<Button x:Name="myButton"  Width="120" Height="45">
    <Button.Style>
        <Style TargetType="{x:Type Button}">
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Background" Value="Red" />
                </Trigger>
            </Style.Triggers>
        </Style>
    </Button.Style>
</Button>

该示例中，我们直接改写了按钮（Button）的样式（Style），使用属性触发器触发，鼠标移到按钮上时，想要改变把按钮的背景颜色变成红色；

但是，当我们运行后发现，鼠标移到按钮上时，按钮的背景颜色并没有如想象的那样变成红色；这是为啥呢？语法这样写也是没有问题的呀，；理论上这样写法也是可行的呀，但是……

为什么不起作用呢？

因为上述的方法没有重新定义button的Template，所以它还是按照原来默认的，你设置的等于没用，还是按照默认的来执行；

既然是这样，那我们就对Temolate进行改写；该方法放弃了它的默认Template，并重新定义了Template的各种特性，所以就是按照你设定的来。

<Button Height="30" Width="150" BorderBrush="{x:Null}" BorderThickness="0" Content="click" Margin="20">
    <Button.Style>
        <Style TargetType="Button">
            <Setter Property="Background" Value="#55ddaa "/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Border Background="{TemplateBinding Background}">
                            <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Background" Value="Red"/>
                </Trigger>
            </Style.Triggers>
        </Style>
    </Button.Style>
</Button>

运行后，鼠标移到按钮上时，按钮背景颜色变为红色；修改完全符合要求。

下面分享一些修改样式的写法：

<Button Height="30" Width="150" BorderBrush="{x:Null}" BorderThickness="0" Content="click">
    <Button.Style>
        <Style TargetType="Button">
            <Setter Property="Background" Value="#dd1144 "/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Border Background="{TemplateBinding Background}">
                            <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="Background" Value="Red"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Button.Style>
</Button>

<Button Height="30" Width="150" BorderBrush="{x:Null}" BorderThickness="0" Content="click">
    <Button.Style>
        <Style TargetType="Button">
            <Setter Property="Background" Value="#dd1144 "/>
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="{x:Type Button}">
                                <Border Background="#3f48cc">
                                    <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                                </Border>
                            </ControlTemplate>                           
                        </Setter.Value>
                    </Setter>
                </Trigger>
            </Style.Triggers>
        </Style>
    </Button.Style>
</Button>

当然，我们可以把模板样式抽离控件，写到窗口资源或者是全局的资源中去，方便项目中各个地方的使用，例如：

<Window.Resources>
    <Style TargetType="{x:Type Button}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Border Background="{TemplateBinding Background}">
                        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="Background" Value="Red"/>
            </Trigger>
        </Style.Triggers>
    </Style>
</Window.Resources>
<Grid>
    <Button HorizontalAlignment="Center" VerticalAlignment="Center" MinWidth="80">button</Button>
</Grid>