WPF ToggleButton点击后无法切换背景颜色问题求助

核心问题 #

直接在ToggleButton控件上设置的Background和BorderBrush属于本地值，WPF值优先级体系中，本地值优先级高于Style和ControlTemplate中的Trigger Setter，导致触发器无法修改这些属性。另外当前代码缺少针对IsChecked状态的背景切换逻辑，且存在重复的IsPressed触发器定义。

修复步骤 #

• 移除控件上的本地属性设置，将默认背景、边框色移到Style的Setter中，让Style控制默认值
• 在ControlTemplate的Triggers里添加IsChecked状态的触发器，分别设置激活/取消激活时的颜色
• 清理Style.Triggers里重复的IsPressed触发器，统一在ControlTemplate.Triggers中处理交互状态

修复后的完整代码 #

<ToggleButton
    x:Name="Video_Capture"
    FontFamily="Arial"
    FontSize="17"
    Foreground="White">
    <ToggleButton.Style>
        <Style TargetType="ToggleButton">
            <!-- 默认样式设置 -->
            <Setter Property="Background" Value="#FF505050"/>
            <Setter Property="BorderBrush" Value="#FF505050"/>
            <Setter Property="Content" Value="Video Capture is OFF" />
            
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ToggleButton">
                        <Border
                            Padding="1,1,60,1"
                            Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="1">
                            <ContentPresenter Width="162" TextBlock.TextAlignment="Left"/>
                        </Border>
                        <ControlTemplate.Triggers>
                            <!-- 鼠标悬停状态 -->
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="Background" Value="#342350"/>
                            </Trigger>
                            <!-- 禁用状态 -->
                            <Trigger Property="IsEnabled" Value="False">
                                <Setter Property="Background" Value="#FF505050"/>
                                <Setter Property="BorderBrush" Value="#FF505050"/>
                            </Trigger>
                            <!-- 按下状态 -->
                            <Trigger Property="IsPressed" Value="True">
                                <Setter Property="Background" Value="#342350"/>
                                <Setter Property="BorderBrush" Value="#342350"/>
                            </Trigger>
                            <!-- 激活（选中）状态 -->
                            <Trigger Property="IsChecked" Value="True">
                                <Setter Property="Background" Value="#342350"/>
                                <Setter Property="BorderBrush" Value="#342350"/>
                            </Trigger>
                            <!-- 取消激活（未选中）状态 -->
                            <Trigger Property="IsChecked" Value="False">
                                <Setter Property="Background" Value="#FF505050"/>
                                <Setter Property="BorderBrush" Value="#FF505050"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            
            <Style.Triggers>
                <!-- 内容切换逻辑保留 -->
                <Trigger Property="IsChecked" Value="True">
                    <Setter Property="Content" Value="Video Capture is ON" />
                </Trigger>
            </Style.Triggers>
        </Style>
    </ToggleButton.Style>
</ToggleButton>

额外技巧 #

• 可将颜色值定义为StaticResource，方便全局统一修改：

  <Window.Resources>
      <SolidColorBrush x:Key="ToggleBtnDefaultBg" Color="#FF505050"/>
      <SolidColorBrush x:Key="ToggleBtnActiveBg" Color="#342350"/>
  </Window.Resources>
  

  后续在Style中用{StaticResource ToggleBtnDefaultBg}引用即可。
• 若需要平滑过渡效果，可在ControlTemplate中添加VisualStateManager实现颜色切换动画。

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