WPF触发器无法按预期工作

时间:2021-10-29 02:17:25

I want a red button that turns black when the mouse hovers over it.

我想要一个红色按钮,当鼠标悬停在它上面时会变黑。

    <Button Content="Hover me" Grid.Column="3" Grid.Row="3">
        <Button.Style>
            <Style TargetType="{x:Type Button}">
                <Setter Property="Background" Value="Red"/>
                <Style.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="Background" Value="Black"/>
                    </Trigger>
                </Style.Triggers>
            </Style>
        </Button.Style>
    </Button>

However, my problem is that when I hover over the button, it turns into the default Windows style with a gradient gray appearance.

但是,我的问题是,当我将鼠标悬停在按钮上时,它会变成具有渐变灰色外观的默认Windows样式。

1 个解决方案

#1


15  

Try it

<Window.Resources>
    <Style x:Key="MyButtonStyle" TargetType="{x:Type Button}">
        <Setter Property="Background" Value="Red"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Border Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}">
                        <ContentPresenter x:Name="PART_Content"
                                          VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                          HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                          TextElement.Foreground="{TemplateBinding Foreground}"></ContentPresenter>                        </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="Background" Value="Black"/>
                <Setter Property="Foreground" Value="White"/>
            </Trigger>
        </Style.Triggers>
    </Style>
</Window.Resources>

and apply the custom Style as following

并应用自定义样式如下

<Button Content="Hover me" Style="{StaticResource MyButtonStyle}" Height="30" Width="100"/>

The reason is the default Aero style of a Button. It has a chrome defined in ControlTemplate, which has it own behavior on various mouse events. So That over write your trigger call.

原因是Button的默认Aero样式。它在ControlTemplate中定义了一个chrome,它在各种鼠标事件上都有自己的行为。那就过来写你的触发器调用了。

So you must override default ControlTemplate of Button to achieve your desired result.

因此,您必须覆盖Button的默认ControlTemplate以获得所需的结果。

#1


15  

Try it

<Window.Resources>
    <Style x:Key="MyButtonStyle" TargetType="{x:Type Button}">
        <Setter Property="Background" Value="Red"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Border Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}">
                        <ContentPresenter x:Name="PART_Content"
                                          VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                          HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                          TextElement.Foreground="{TemplateBinding Foreground}"></ContentPresenter>                        </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="Background" Value="Black"/>
                <Setter Property="Foreground" Value="White"/>
            </Trigger>
        </Style.Triggers>
    </Style>
</Window.Resources>

and apply the custom Style as following

并应用自定义样式如下

<Button Content="Hover me" Style="{StaticResource MyButtonStyle}" Height="30" Width="100"/>

The reason is the default Aero style of a Button. It has a chrome defined in ControlTemplate, which has it own behavior on various mouse events. So That over write your trigger call.

原因是Button的默认Aero样式。它在ControlTemplate中定义了一个chrome,它在各种鼠标事件上都有自己的行为。那就过来写你的触发器调用了。

So you must override default ControlTemplate of Button to achieve your desired result.

因此,您必须覆盖Button的默认ControlTemplate以获得所需的结果。