WPF 中带有绑定的自定义按钮的悬停颜色

Question

我有这个自定义按钮，想要根据绑定应用按钮的背景颜色。至于按钮的用途，基本上这是一个分页按钮。取消选择页面时，背景为浅灰色，背景颜色变为较深的颜色。但我希望悬停效果是相同的。这是我到目前为止的代码：

<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";
        }
    }
}

使用此代码，背景成功地根据转换器及其参数动态更改，但未应用悬停效果。我做错了什么或者我也必须使用绑定作为触发器？

Answer 1

要使悬停效果与页码绑定共存，最简单的方法之一就是将 DataTrigger 绑定到与悬停效果的跳跳器处于同一级别的 DataTrigger。

<local:PageMultiConverter x:Key="PageMultiConverter"/>
<Style x:Key="PaginationButtonStyle" TargetType="Button">
    <Setter Property="Background" Value="#FAFAFA"/>
    <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="#ECECEC"/>
                    </Trigger>
                    <DataTrigger Value="True">
                        <DataTrigger.Binding>
                            <MultiBinding Converter="{StaticResource PageMultiConverter}">
                                <Binding Path="Content" RelativeSource="{RelativeSource Self}" Mode="OneWay"/>
                                <Binding Path="Page" Mode="OneWay"/>
                            </MultiBinding>
                        </DataTrigger.Binding>
                        <Setter Property="Background" Value="#ECECEC"/>
                    </DataTrigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

以上的多值转换器。

public class PageMultiConverter : IMultiValueConverter
{
    public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)
    {
        if (values is { Length: 2})
        {
            return values[0]?.ToString() == values[1]?.ToString();
        }
        return false;
    }

    public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture)
    {
        throw new NotSupportedException();
    }
}

申请按钮。

<Button Style="{StaticResource PaginationButtonStyle}"
        Content="2"/>