WPF中为Button设置IsMouseOver和IsPressed事件中改变背景颜色不起作用

问题描述

原始代码：

xml 复制代码

<!-- 无边框图标按钮通用样式 -->
<Style x:Key="WindowControlButton" TargetType="Button">
  <Setter Property="Background" Value="Transparent"/>
  <Setter Property="BorderBrush" Value="Transparent"/>
  <Setter Property="BorderThickness" Value="0"/>
  <Setter Property="FontSize" Value="12"/>
  <Setter Property="Height" Value="48"/>
  <Setter Property="Width" Value="48"/>
  <Style.Triggers>
    <Trigger Property="IsMouseOver" Value="True">
      <Setter Property="Background" Value="#20FF0000"/>
    </Trigger>
    <Trigger Property="IsPressed" Value="True">
      <Setter Property="Background" Value="#40FF0000"/>
    </Trigger>
  </Style.Triggers>
</Style>

问题：设置了鼠标悬浮事件和点击事件中修改按钮背景色，但是实际上并没有按照设置的颜色变化。

问题定位：依赖属性优先级 + 默认 ControlTemplate 的内部命名元素干扰

这通常是因为：

WPF 按钮的默认 ControlTemplate 中有自己的 Background，并且模板内部的触发器（来自系统主题）优先级高于设置的样式触发器。

换句话说：系统模板在 IsMouseOver 时自己设置了背景（比如高亮色），覆盖了通过样式触发器设置的值。

这是 WPF 中一个经典陷阱：默认模板的视觉状态（VisualState 或内部触发器）优先级高于外部 Style.Triggers。

✅ 最可靠、彻底的解决方案：提供自定义 ControlTemplate

只要使用默认模板，就无法完全掌控悬停/按下时的背景行为。必须替换模板，才能确保设置的触发器生效。

✅ 推荐做法（简洁有效）：

xml 复制代码

<Style x:Key="WindowControlButton" TargetType="Button">
    <Setter Property="Background" Value="Transparent"/>
    <Setter Property="BorderBrush" Value="Transparent"/>
    <Setter Property="BorderThickness" Value="0"/>
    <Setter Property="Foreground" Value="White"/>
    <Setter Property="Height" Value="40"/>
    <Setter Property="Width" Value="40"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <!-- 关键：用一个 Border 显式绑定 Background -->
                <Border 
                    x:Name="border" 
                    Background="{TemplateBinding Background}"
                    BorderBrush="{TemplateBinding BorderBrush}"
                    BorderThickness="{TemplateBinding BorderThickness}">
                    <ContentPresenter 
                        HorizontalAlignment="Center" 
                        VerticalAlignment="Center"/>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Setter Property="Background" Value="#33FF0000"/> <!-- 半透红 -->
        </Trigger>
        <Trigger Property="IsPressed" Value="True">
            <Setter Property="Background" Value="#66FF0000"/>
        </Trigger>
    </Style.Triggers>
</Style>

🔥 这个模板完全绕过系统默认行为 ，只用指定的 Background，因此触发器 100% 生效。