在悬停和单击时更改按钮背景

Question

我正在使用按钮制作各种仪表板。根据某些对象的值，我更改了按钮的 background。当用户悬停或单击按钮时，我想更改背景颜色以指示其已按下。我有以下代码：

<Button Height="100" Width="230" Command="{Binding Path=SetSelectedCollection}" CommandParameter="option1" >
    <Button.Style>
        <Style TargetType="{x:Type Button}">
            <Style.Triggers>
                <DataTrigger Binding="{Binding Path=Item.IsOk}" Value="True">
                    <Setter Property="Background" Value="#8FCE5D"/>
                </DataTrigger>
                <DataTrigger Binding="{Binding Path=Item.HasWarnings}" Value="True">
                    <Setter Property="Background" Value="#FFBE39"/>
                </DataTrigger>
                <DataTrigger Binding="{Binding Path=Item.HasErrors}" Value="True">
                    <Setter Property="Background" Value="#C01318"/>
                </DataTrigger>
            </Style.Triggers>

            <Setter Property="FontSize" Value="15" />
            <Setter Property="SnapsToDevicePixels" Value="True" />

            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Border Background="{TemplateBinding Background}">
                           <ContentPresenter/>                                                                                                           

                        </Border>

                        <ControlTemplate.Triggers>

                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="Background" Value="#E59400" />
                                <Setter Property="Foreground" Value="White" />
                                <Setter Property="Cursor" Value="Hand" />
                            </Trigger>

                            <Trigger Property="IsPressed" Value="True">
                                <Setter Property="Background" Value="OrangeRed" />
                                <Setter Property="Foreground" Value="White" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Button.Style>
</Button>

所以第一部分一切正常，我也根据我绑定的项目的状态获得正确的颜色按钮，但是当我将鼠标悬停或 select 它的颜色不会改变。前景色改变，光标改变，但背景色不变。我不明白为什么不呢。我怎样才能做到这一点？

Answer 1

我很确定您在 DataTriggers 中设置的背景颜色会覆盖 ControlTemplate 触发器。一种解决方案是更改边框画笔以指示鼠标悬停或按下鼠标。另一个想法是在项目有错误等情况下向按钮的模板添加一个图标，而不是更改背景颜色。

这是您的原始代码，修改后它更改了鼠标状态的边框颜色，并保留了 IsOk/HasErrors/HasWarnings:

的背景颜色

<Style TargetType="{x:Type Button}">
<Style.Triggers>
    <DataTrigger Binding="{Binding Path=Item.IsOk}" Value="True">
        <Setter Property="Background" Value="#8FCE5D"/>
    </DataTrigger>
    <DataTrigger Binding="{Binding Path=Item.HasWarnings}" Value="True">
        <Setter Property="Background" Value="#FFBE39"/>
    </DataTrigger>
    <DataTrigger Binding="{Binding Path=Item.HasErrors}" Value="True">
        <Setter Property="Background" Value="#C01318"/>
    </DataTrigger>
</Style.Triggers>

<Setter Property="FontSize" Value="15" />
<Setter Property="SnapsToDevicePixels" Value="True" />
<Setter Property="BorderThickness" Value="1"/>

<Setter Property="Template">
    <Setter.Value>
        <ControlTemplate TargetType="{x:Type Button}">
            <Border Background="{TemplateBinding Background}"
                    BorderThickness="{TemplateBinding BorderThickness}"
                    BorderBrush="{TemplateBinding BorderBrush}">
                <ContentPresenter/>

            </Border>

            <ControlTemplate.Triggers>

                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="BorderBrush" Value="#E59400" />
                    <Setter Property="Foreground" Value="White" />
                    <Setter Property="Cursor" Value="Hand" />
                </Trigger>

                <Trigger Property="IsPressed" Value="True">
                    <Setter Property="BorderBrush" Value="OrangeRed" />
                    <Setter Property="Foreground" Value="White" />
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
    </Setter.Value>
</Setter>

在悬停和单击时更改按钮背景

Changing a buttons background on hover and click

wpf

xaml

triggers

button

styling