WPF自定义绑定背景按钮的悬停颜色失效问题排查

我实现了一个WPF分页自定义按钮，希望通过Binding动态设置按钮背景：未选中页面时背景为浅灰色，选中时变为深灰色，同时希望鼠标悬停效果保持一致。现有代码如下：

样式代码 #

<Style x:Key="PaginationButtonStyle" TargetType="Button">
    <Setter Property="Background" Value="{StaticResource highlight-gray}" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Border Background="{TemplateBinding Background}" CornerRadius="4">
                    <ContentPresenter
                        x:Name="content"
                        HorizontalAlignment="Center"
                        VerticalAlignment="Center"
                        Content="{TemplateBinding Content}" />
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="Background" Value="{StaticResource dark-highlight-gray}" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

按钮绑定代码 #

<Button
     Background="{Binding OutstandingAR_Pagination.Page, Converter={StaticResource PageToBgColorConverter}, ConverterParameter='2'}"
     Style="{StaticResource PaginationButtonStyle}">
     <TextBlock Text="2" />
 </Button>

转换器代码 #

using System;
using System.Globalization;
using System.Windows.Data;

namespace Dental_Practice_Monitor.Utilities
{
    public class PageToBgColorConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            if (value is int currentPage && parameter != null)
            {
                string param = parameter.ToString();
                int buttonNumber = Helpers.ConvertStringToInteger(param);
                if (currentPage == buttonNumber) 
                {
                    return "#ECECEC";
                }
            }
            return "#FAFAFA";
        }

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            return "#FAFAFA";
        }
    }
}

目前背景可通过转换器动态切换，但悬停效果未生效，请问问题出在哪里？是否需要为触发器也绑定数据？

问题原因 #

你直接在Button元素上绑定了Background属性，这会覆盖Style中Setter的优先级，导致ControlTemplate里的Trigger无法修改Background属性。WPF中元素直接设置的属性值优先级最高，会忽略Style触发器的Setter操作。

修复方案 #

不需要修改转换器，只需要调整Style和按钮的绑定逻辑：

1. 修改Style，直接控制模板内Border的背景 #

把触发器的Setter目标指向ControlTemplate里的Border，绕开Button本身的Background绑定限制：

<Style x:Key="PaginationButtonStyle" TargetType="Button">
    <Setter Property="Background" Value="#FAFAFA" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <!-- 给Border命名，方便触发器定位 -->
                <Border x:Name="buttonBorder" Background="{TemplateBinding Background}" CornerRadius="4">
                    <ContentPresenter
                        HorizontalAlignment="Center"
                        VerticalAlignment="Center"
                        Content="{TemplateBinding Content}" />
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <!-- 直接修改Border的Background，而非Button的Background -->
                        <Setter TargetName="buttonBorder" Property="Background" Value="{StaticResource dark-highlight-gray}" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

2. 优化按钮绑定（可选，提升灵活性） #

把按钮页码放到Tag属性中，避免重复写参数值，方便批量复用：

<Button
    Tag="2"
    Background="{Binding OutstandingAR_Pagination.Page, Converter={StaticResource PageToBgColorConverter}, ConverterParameter={Binding RelativeSource={RelativeSource Self}, Path=Tag}}"
    Style="{StaticResource PaginationButtonStyle}">
    <TextBlock Text="2" />
</Button>

扩展：区分选中/未选中的悬停效果 #

如果需要选中状态下的悬停颜色和未选中不同，可以添加MultiTrigger：

<ControlTemplate.Triggers>
    <!-- 未选中时的悬停效果 -->
    <Trigger Property="IsMouseOver" Value="True">
        <Setter TargetName="buttonBorder" Property="Background" Value="{StaticResource dark-highlight-gray}" />
    </Trigger>
    <!-- 选中时的悬停效果 -->
    <MultiTrigger>
        <MultiTrigger.Conditions>
            <Condition Property="IsMouseOver" Value="True" />
            <Condition Binding="{Binding OutstandingAR_Pagination.Page, Converter={StaticResource PageToBgColorConverter}, ConverterParameter={TemplateBinding Tag}}" Value="#ECECEC" />
        </MultiTrigger.Conditions>
        <Setter TargetName="buttonBorder" Property="Background" Value="#DCDCDC" />
    </MultiTrigger>
</ControlTemplate.Triggers>

修改后，悬停效果就能正常触发，因为触发器直接操作的是模板内的Border元素，不会被按钮上的绑定覆盖。

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