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>

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

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>

在悬停时更改按钮背景，然后点击

1 个答案: