更改悬停按钮背景并单击答案

【问题标题】：Changing a buttons background on hover and click更改悬停按钮背景并单击
【发布时间】：2015-07-01 15:15:39
【问题描述】：

我正在使用按钮制作各种仪表板。根据某个对象的值，我更改了按钮的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>

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

【问题讨论】：

我的猜测是，它使用的是您根据是否有警告、错误等指定的背景，而不是为 MouseOver 或 IsPressed 属性指定的背景。为什么不改变背景以外的东西？似乎您正试图仅使用背景颜色来显示许多不同的信息。
我还尝试在鼠标悬停和按下时添加边框，也没有效果。我应该采取另一种方法吗？

标签： wpf xaml button triggers styling

【解决方案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>

【讨论】：