ToggleButton选中状态下鼠标悬停颜色无法修改问题求助

你遇到的问题根源在于WPF默认的ToggleButton控件模板：Background和BorderBrush的视觉呈现由模板内部的元素控制，这些元素的属性并没有直接和控件本身的Background/BorderBrush绑定，或者模板内置的触发器优先级更高，导致你在Style触发器里设置的Setter无法覆盖原有视觉效果。而BorderThickness是控件的直接属性，模板会直接使用这个值，所以修改能生效。

要解决这个问题，你需要重写ToggleButton的ControlTemplate，确保内部视觉元素绑定到控件的Background和BorderBrush属性，这样外部Style的设置才能传递到视觉层。以下是两种可行的实现方式：

方式1：在ControlTemplate的触发器中直接控制视觉元素 #

这种方式直接在模板内部定义状态逻辑，优先级最高，效果最可靠：

<!--App.xaml-->
<ResourceDictionary>
    <Style x:Key="MyStyle" TargetType="{x:Type ToggleButton}">
        <Setter Property="Background" Value="#FFE5E5E5"/>
        <Setter Property="BorderBrush" Value="#FF707070"/>
        <Setter Property="BorderThickness" Value="1"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ToggleButton}">
                    <Border x:Name="btnBorder" 
                            Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}"
                            SnapsToDevicePixels="True">
                        <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                          VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                          SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                    </Border>
                    <ControlTemplate.Triggers>
                        <!-- 选中+鼠标悬停的状态 -->
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="IsChecked" Value="True"/>
                                <Condition Property="IsMouseOver" Value="True"/>
                            </MultiTrigger.Conditions>
                            <Setter TargetName="btnBorder" Property="BorderThickness" Value="10"/>
                            <Setter TargetName="btnBorder" Property="BorderBrush" Value="Red"/>
                            <Setter TargetName="btnBorder" Property="Background" Value="Red"/>
                        </MultiTrigger>
                        <!-- 可按需添加其他状态的样式，比如普通鼠标悬停、未选中状态 -->
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter TargetName="btnBorder" Property="Background" Value="#FFE8F4FF"/>
                        </Trigger>
                        <Trigger Property="IsChecked" Value="True">
                            <Setter TargetName="btnBorder" Property="Background" Value="#FFD1E7FF"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

方式2：保持Style触发器，确保模板绑定控件属性 #

如果想保留原有的Style触发器结构，只需要确保模板内部的元素绑定到控件的Background和BorderBrush即可：

<!--App.xaml-->
<ResourceDictionary>
    <Style x:Key="MyStyle" TargetType="{x:Type ToggleButton}">
        <Setter Property="Background" Value="#FFE5E5E5"/>
        <Setter Property="BorderBrush" Value="#FF707070"/>
        <Setter Property="BorderThickness" Value="1"/>
        <!-- 重写模板，绑定核心属性 -->
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ToggleButton}">
                    <Border Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}"
                            SnapsToDevicePixels="True">
                        <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                          VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                          SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <!-- 原有的Style触发器现在可以生效了 -->
        <Style.Triggers>
            <MultiTrigger>
                <MultiTrigger.Conditions>
                    <Condition Property="IsChecked" Value="True"/>
                    <Condition Property="IsMouseOver" Value="True"/>
                </MultiTrigger.Conditions>
                <Setter Property="BorderThickness" Value="10"/>
                <Setter Property="BorderBrush" Value="Red"/>
                <Setter Property="Background" Value="Red"/>
            </MultiTrigger>
        </Style.Triggers>
    </Style>
</ResourceDictionary>

说明 #

• TemplateBinding用于将模板内部元素的属性绑定到控件本身的属性，这样控件属性的变化会同步到视觉元素上。
• 如果需要保留默认ToggleButton的所有视觉状态（比如按下、禁用），可以基于WPF的默认模板进行修改，而不是从零开始写极简模板。

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