WPF图片按钮鼠标悬浮透明白色背景效果失效的解决方法

问题根源是WPF依赖属性值优先级规则：你直接在<Button>标签内设置的Background属于「本地值」，优先级高于Style触发器中的Setter值，导致鼠标悬浮时的Background修改完全被覆盖，无法生效。

修复方法一：将默认背景移至Style中（推荐） #

移除Button标签内的Background定义，把默认透明背景放到Style的Setter里，这样触发器就能正常覆盖默认值。

修改后的Button代码： #

<Button Margin="10,0,0,0" Style="{StaticResource ImageButtonStyle}"
        Width="30"
        Height="30">
    <Viewbox Width="20" Height="20" Stretch="Uniform" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
        <Canvas Height="512" Width="448">
            <Path Fill="White" Data="M224 0c-17.7 0-32 14.3-32 32l0 19.2C119 66 64 130.6 64 208l0 18.8c0 47-17.3 92.4-48.5 127.6l-7.4 8.3c-8.4 9.4-10.4 22.9-5.3 34.4S19.4 416 32 416l384 0c12.6 0 24-7.4 29.2-18.9s3.1-25-5.3-34.4l-7.4-8.3C401.3 319.2 384 273.9 384 226.8l0-18.8c0-77.4-55-142-128-156.8L256 32c0-17.7-14.3-32-32-32zm45.3 493.3c12-12 18.7-28.3 18.7-45.3l-64 0-64 0c0 17 6.7 33.3 18.7 45.3s28.3 18.7 45.3 18.7s33.3-6.7 45.3-18.7z" />
        </Canvas>
    </Viewbox>
</Button>

修改后的Styles.xaml： #

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Style TargetType="Button" x:Key="ImageButtonStyle">
        <!-- 添加默认透明背景的Setter -->
        <Setter Property="Background">
            <Setter.Value>
                <SolidColorBrush Color="White" Opacity="0" />
            </Setter.Value>
        </Setter>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Border CornerRadius="5" Background="{TemplateBinding Background}">
                        <ContentPresenter />
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="Background">
                    <Setter.Value>
                        <SolidColorBrush Color="White" Opacity="0.2" />
                    </Setter.Value>
                </Setter>
            </Trigger>
        </Style.Triggers>
    </Style>
</ResourceDictionary>

修复方法二：在ControlTemplate内添加触发器（兼容本地背景设置） #

如果需要保留Button本地的Background设置，可以直接在ControlTemplate中针对内部Border添加触发器，绕过属性优先级限制：

修改后的ControlTemplate部分： #

<Setter Property="Template">
    <Setter.Value>
        <ControlTemplate TargetType="{x:Type Button}">
            <Border x:Name="ButtonBorder" CornerRadius="5" Background="{TemplateBinding Background}">
                <ContentPresenter />
            </Border>
            <!-- 将触发器移至ControlTemplate内部 -->
            <ControlTemplate.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter TargetName="ButtonBorder" Property="Background">
                        <Setter.Value>
                            <SolidColorBrush Color="White" Opacity="0.2" />
                        </Setter.Value>
                    </Setter>
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
    </Setter.Value>
</Setter>

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