如何修改WPF按钮点击时的样式？解决悬停默认效果问题

问题根源 #

直接在Click事件中设置控件的Background属于本地值，WPF属性优先级中本地值高于Style内的Trigger，导致鼠标悬停时IsMouseOver的Trigger无法覆盖已设置的本地值，悬停效果失效。正确做法是通过Style的Trigger管理状态，避免直接设置控件本地属性。

方案一：使用ToggleButton（推荐，利用内置状态） #

ToggleButton自带IsChecked属性，点击可自动切换状态，Style通过Trigger即可实现样式切换，且悬停效果不受干扰。

样式代码

<Style TargetType="ToggleButton" x:Key="btnExitDef">
    <Setter Property="Background" Value="#FF1E1E1E"/>
    <Setter Property="Foreground" Value="#FFD6D6D6"/>
    <Setter Property="FontSize" Value="13"/>
    <Setter Property="Margin" Value="0"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ToggleButton">
                <Border Background="{TemplateBinding Background}"
                        CornerRadius="0"
                        BorderThickness="0"
                        Padding="0"
                        BorderBrush="#000">
                    <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Style.Triggers>
        <!-- 鼠标悬停默认效果 -->
        <Trigger Property="IsMouseOver" Value="True">
            <Setter Property="Background" Value="Red"/>
            <Setter Property="Foreground" Value="#fff"/>
        </Trigger>
        <!-- 点击选中后的持久样式 -->
        <Trigger Property="IsChecked" Value="True">
            <Setter Property="Background" Value="Red"/>
            <Setter Property="Foreground" Value="#fff"/>
        </Trigger>
        <!-- 可选：选中状态下的悬停加深效果 -->
        <MultiTrigger>
            <MultiTrigger.Conditions>
                <Condition Property="IsChecked" Value="True"/>
                <Condition Property="IsMouseOver" Value="True"/>
            </MultiTrigger.Conditions>
            <Setter Property="Background" Value="#FFCC0000"/>
        </MultiTrigger>
    </Style.Triggers>
</Style>

控件代码

<ToggleButton Height="35" Width="45" Name="btnExit" Content="✕" 
              BorderBrush="{x:Null}" Style="{StaticResource btnExitDef}"/>

如果需要在状态切换时执行逻辑，可绑定Checked/Unchecked事件或Command。

方案二：使用普通Button+后台依赖属性绑定 #

若需保留Button控件，可通过后台定义依赖属性，结合DataTrigger实现状态切换。

后台代码（以MainWindow为例）

public static readonly DependencyProperty IsButtonToggledProperty =
    DependencyProperty.Register("IsButtonToggled", typeof(bool), typeof(MainWindow), new PropertyMetadata(false));

public bool IsButtonToggled
{
    get { return (bool)GetValue(IsButtonToggledProperty); }
    set { SetValue(IsButtonToggledProperty, value); }
}

private void btnExit_Click(object sender, RoutedEventArgs e)
{
    IsButtonToggled = !IsButtonToggled;
}

样式代码

<Style TargetType="Button" x:Key="btnExitDef">
    <Setter Property="Background" Value="#FF1E1E1E"/>
    <Setter Property="Foreground" Value="#FFD6D6D6"/>
    <Setter Property="FontSize" Value="13"/>
    <Setter Property="Margin" Value="0"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Border Background="{TemplateBinding Background}"
                        CornerRadius="0"
                        BorderThickness="0"
                        Padding="0"
                        BorderBrush="#000">
                    <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Setter Property="Background" Value="Red"/>
            <Setter Property="Foreground" Value="#fff"/>
        </Trigger>
        <!-- 绑定后台状态属性实现点击切换 -->
        <DataTrigger Binding="{Binding IsButtonToggled, RelativeSource={RelativeSource AncestorType=Window}}" Value="True">
            <Setter Property="Background" Value="Red"/>
            <Setter Property="Foreground" Value="#fff"/>
        </DataTrigger>
        <!-- 可选：切换状态下的悬停加深效果 -->
        <MultiDataTrigger>
            <MultiDataTrigger.Conditions>
                <Condition Binding="{Binding IsButtonToggled, RelativeSource={RelativeSource AncestorType=Window}}" Value="True"/>
                <Condition Property="IsMouseOver" Value="True"/>
            </MultiDataTrigger.Conditions>
            <Setter Property="Background" Value="#FFCC0000"/>
        </MultiDataTrigger>
    </Style.Triggers>
</Style>

控件代码

<Button Height="35" Width="45" Name="btnExit" Content="✕" 
        BorderBrush="{x:Null}" Click="btnExit_Click" Style="{StaticResource btnExitDef}"/>

内容的提问来源于stack exchange，提问作者Arter