如何在WPF的XAML中修改单个按钮的背景与悬停颜色？

我在WPF项目中构建了界面，想要修改“Browse”按钮的悬停背景色和文本前景色，给按钮添加了<Button.Style>样式，设置了Background属性和IsMouseOver触发器，但按钮始终显示白色，样式未生效。以下是我的XAML代码：

<Window x:Class="Base64ToFileWPF.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:Base64ToFileWPF"
        mc:Ignorable="d"
        Title="MainWindow" Width="800" SizeToContent="Height" ResizeMode="NoResize" WindowStartupLocation="CenterScreen">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>


        <StackPanel Grid.Row="0">
            <Label Name="lblQuestion" Margin="15,10,0,0" FontSize="22" VerticalContentAlignment="Center" HorizontalAlignment="Left" Height="45" Foreground="#FF2641D8">Base64 String to File</Label>
            <Label Name="subQuestion" Margin="16,0,0,10" FontSize="16" VerticalContentAlignment="Center" HorizontalAlignment="Left" Height="33" Foreground="#FF676D92">Please enter your Base64 string below:</Label>
        </StackPanel>

        <StackPanel Grid.Row="1">
            <RichTextBox Height="270" FontFamily="Input Mono" FontSize="15px" Margin="23,0,23,0" Padding="8" VerticalScrollBarVisibility="Visible" Foreground="#FFA2A4A9">
                <FlowDocument>
                    <Paragraph LineHeight="24px">
                        <Run Text="PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgLTEwMDEgMTAwMSAxMDAxIj4NCgk8cGF0aCBmaWxsPSIjMDAwMDAwIiBkPSJNOTkyIC0yNDBRMTAxMCAtMjMxIDk5MiAtMjI1TDUxOCAtN1E1MDAgMiA0ODMgLTdMOSAtMjI1US05IC0yMzEgOSAtMjQwTDEyMiAtMjkxUTE0MCAtMzAwIDE1OCAtMjkxTDQ4MyAtMTQyUTUwMSAtMTMzIDUxOCAtMTQyTDg0MyAtMjkxUTg2MSAtMzAwIDg3OSAtMjkxWk05OTIgLTUwOVExMDEwIC01MDAgOTkyIC00OTJMNTE4IC0yNzRRNTAwIC0yNjcgNDgzIC0yNzRMOSAtNDkyUS05IC01MDEgOSAtNTA5TDEyMiAtNTYxUTE0MCAtNTY5IDE1OCAtNTYxTDQ4MyAtNDEyUTUwMSAtNDAzIDUxOCAtNDEyTDg0MyAtNTYxUTg2MSAtNTY5IDg3OSAtNTYxWk05IC03NjFRLTkgLTc3MCA5IC03NzZMNDgzIC05OTRRNTAxIC0xMDAzIDUxOCAtOTk0TDk5MiAtNzc2UTEwMTAgLTc3MCA5OTIgLTc2MUw1MTggLTU0M1E1MDAgLTUzNCA0ODMgLTU0M1oiLz4NCjwvc3ZnPg=="/>
                    </Paragraph>
                </FlowDocument>
            </RichTextBox>
        </StackPanel>

        <StackPanel Orientation = "Horizontal" Grid.Row="2" HorizontalAlignment="Left">
            <Button Content="Browse" Height="30" Width="100" Margin="23,15,15,15" FontFamily="Helvetica Now Text" FontSize="14" Foreground="#777777">
                <Button.Style>
                    <Style TargetType="Button">
                        <Setter Property="Background" Value="Green"/>
                        <Setter Property="Template">
                            <Setter.Value>
                                <ControlTemplate TargetType="Button">
                                    <Border Background="#FFFFFF" BorderBrush="#AAAAAA" BorderThickness="1" CornerRadius="2">
                                        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                                    </Border>
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                        <Style.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="Background" Value="#FF0000"/>
                            </Trigger>
                        </Style.Triggers>
                    </Style>
                </Button.Style>
            </Button>
            <TextBox Text="Enter your full filename here." Height="30" Width="400" Padding="10,0,0,1" VerticalContentAlignment="Center" FontFamily="Helvetica Now Text" FontSize="13px" Foreground="#FF4E4E4E" />
        </StackPanel>

        <StackPanel Orientation = "Horizontal" Grid.Row="2" HorizontalAlignment="Right">
            <Button Content="Cancel" Height="30" Width="100" Margin="23,15,15,15" ></Button>
            <Button Content="Create File" Height="30" Width="100" Margin="0,15,23,15" ></Button>
        </StackPanel>

    </Grid>
</Window>

问题原因 #

你自定义的ControlTemplate里硬编码了Border的Background为#FFFFFF，且没有绑定到Button的Background属性，导致Style中设置的Background值和触发器都无法作用到按钮的视觉呈现上。

修复后的代码 #

修改Button的Style部分，让Border和ContentPresenter的属性绑定到Button自身的对应属性，同时添加悬停时的前景色设置：

<Button Content="Browse" Height="30" Width="100" Margin="23,15,15,15" FontFamily="Helvetica Now Text" FontSize="14">
    <Button.Style>
        <Style TargetType="Button">
            <Setter Property="Background" Value="Green"/>
            <Setter Property="Foreground" Value="#777777"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Border Background="{TemplateBinding Background}" 
                                BorderBrush="#AAAAAA" 
                                BorderThickness="1" 
                                CornerRadius="2">
                            <ContentPresenter HorizontalAlignment="Center" 
                                              VerticalAlignment="Center"
                                              Foreground="{TemplateBinding Foreground}"/>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Background" Value="#FF0000"/>
                    <Setter Property="Foreground" Value="White"/>
                </Trigger>
            </Style.Triggers>
        </Style>
    </Button.Style>
</Button>

关键修改点 #

1. {TemplateBinding Background}：让Border的背景跟随Button的Background属性变化，Style中的Setter和触发器才能生效
2. {TemplateBinding Foreground}：让文本颜色跟随Button的Foreground属性，实现悬停时文本变色
3. 将Button标签上的Foreground移到Style的Setter中，保持样式统一管理

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