WPF中如何在IsChecked=True时修改MaterialDesignSwitchToggleButton轨道颜色？

我正在开发使用MaterialDesignInXamlToolkit的WPF应用，需要自定义MaterialDesignSwitchToggleButton的外观：当IsChecked为True时修改Track的背景色。尝试基于原样式创建自定义Style并添加触发器，但仅能修改Thumb颜色，无法改变Track颜色。当前代码如下：

<Style x:Key="ToggleButtonStyle"
       TargetType="{x:Type ToggleButton}"
       BasedOn="{StaticResource MaterialDesignSwitchToggleButton}">
    <Style.Triggers>
        <Trigger Property="IsChecked" Value="True">
            <Setter Property="Background" Value="Green" />
            <!-- 需要修改Track颜色 -->
        </Trigger>
    </Style.Triggers>
</Style>

此前尝试修改前景色未成功，希望找到简便方法实现需求，同时保留Thumb的目标颜色。

解决方案 #

MaterialDesignSwitchToggleButton的Track选中状态颜色由动态资源MaterialDesignSwitchTrackChecked控制，Thumb的选中颜色对应MaterialDesignSwitchThumbChecked。以下两种方法可实现需求：

方法1：通过Style触发器覆盖动态资源（最简方案） #

无需修改控件模板，直接在触发器中重写Track的选中颜色资源：

<Style x:Key="ToggleButtonStyle"
       TargetType="{x:Type ToggleButton}"
       BasedOn="{StaticResource MaterialDesignSwitchToggleButton}">
    <Style.Triggers>
        <Trigger Property="IsChecked" Value="True">
            <!-- 若需自定义Thumb颜色，可添加此行，否则保留原有样式 -->
            <!-- <Setter Property="Resources[MaterialDesignSwitchThumbChecked]" Value="你的Thumb颜色" /> -->
            <!-- 设置Track选中背景色为绿色 -->
            <Setter Property="Resources[MaterialDesignSwitchTrackChecked]" Value="Green" />
        </Trigger>
    </Style.Triggers>
</Style>

方法2：修改控件模板中的Track触发器（灵活自定义） #

如果需要更精细的样式控制，可提取原控件模板并修改Track的选中状态设置：

<Style x:Key="ToggleButtonStyle"
       TargetType="{x:Type ToggleButton}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ToggleButton}">
                <Grid x:Name="grid">
                    <Rectangle x:Name="Track"
                               Fill="{DynamicResource MaterialDesignSwitchTrack}"
                               Height="14"
                               RadiusY="7"
                               RadiusX="7"
                               Width="32" />
                    <Ellipse x:Name="Thumb"
                             Fill="{DynamicResource MaterialDesignSwitchThumb}"
                             Height="20"
                             Width="20"
                             Margin="-3"
                             Stroke="{DynamicResource MaterialDesignSwitchThumbStroke}"
                             StrokeThickness="1" />
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsChecked" Value="True">
                        <!-- 修改Track填充色为绿色 -->
                        <Setter TargetName="Track" Property="Fill" Value="Green" />
                        <!-- 保留Thumb原有选中样式 -->
                        <Setter TargetName="Thumb" Property="Fill" Value="{DynamicResource MaterialDesignSwitchThumbChecked}" />
                        <Setter TargetName="Thumb" Property="Stroke" Value="{DynamicResource MaterialDesignSwitchThumbCheckedStroke}" />
                        <Setter TargetName="Thumb" Property="RenderTransform">
                            <Setter.Value>
                                <TranslateTransform X="18" />
                            </Setter.Value>
                        </Setter>
                    </Trigger>
                    <!-- 保留原模板的其他触发器（如IsEnabled、MouseOver等） -->
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

说明 #

• 方法1适合仅需修改颜色的场景，操作简单且不破坏原有模板结构。
• 方法2适合需要调整Track/Thumb形状、大小等更多样式细节的场景。

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