根据状态设置切换按钮的背景答案

【问题标题】：Setting background of a toggle button based on its state根据状态设置切换按钮的背景
【发布时间】：2020-08-14 14:23:20
【问题描述】：

如果 isChecked=true 或 false 并且鼠标悬停在控件上，我正在尝试将切换按钮的背景颜色设置为透明。可以这么说，在任何情况下。

这是我上次尝试的：

<ToggleButton DockPanel.Dock="Right" Width="48" IsChecked="{Binding DownloadImages}">
<ToggleButton.Style>
    <Style TargetType="{x:Type ToggleButton}">
        <Setter Property="BorderThickness" Value="0"/>
        <Setter Property="Background" Value="Aqua"/>
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="true">
                <Setter Property="Background" Value="Red"/>
            </Trigger>
            <DataTrigger Binding="{Binding DownloadImages}" Value="True">
                <Setter Property="Background" Value="Green"/>
                <Setter Property="Content">
                    <Setter.Value>
                        <Image Style="{StaticResource ToggleOnImage}" />
                    </Setter.Value>
                </Setter>
            </DataTrigger>
            <DataTrigger Binding="{Binding DownloadImages}" Value="False">
                <Setter Property="Background" Value="Blue"/>
                <Setter Property="Content">
                    <Setter.Value>
                       <Image Style="{StaticResource ToggleOffImage}" />
                    </Setter.Value>
                </Setter>
            </DataTrigger>
        </Style.Triggers>
    </Style>
</ToggleButton.Style>

不幸的是，它产生了以下结果：

这表明只有蓝色背景设置器在工作。图像交换正确，只有 On 状态和 MouseOver 的背景仍然是窗口风格的蓝色。

你知道我做错了什么吗？

【问题讨论】：

DownloadImages 的触发器是互斥的，因此其中一个每次都有效。它们的优先级高于IsMouseOver 触发器，因为它们是在 IsMouseOver 之后编写的。你可能应该把 IsMouseOver 触发器放在最后，或者使用 MultiDataTrigger 与多个条件

标签： wpf button background styles toggle

【解决方案1】：

在这种情况下，我必须完全重写模板属性，我建议大家这样做。始终自定义模板，即使您不想编辑任何内容。可以摆脱一半的 xaml 问题。并避免其他一堆代码错误：始终设置 ControlTemplate 的 TargetType。

代码：

<ToggleButton.Style>
    <Style TargetType="{x:Type ToggleButton}">
        <Setter Property="Template"/>
           <Setter.Value>
             <ControlTemplate TargetType="{x:Type ToggleButton}">
               <Grid....>

【讨论】：