How to Change MaterialDesignSwitchToggleButton Track Color When IsChecked=True in WPF?

Question

I'm working on a WPF application using the MaterialDesignInXamlToolkit, and I'm trying to customize the appearance of a MaterialDesignSwitchToggleButton. Specifically, I need to change the Track background color when IsChecked is True.

I've attempted to create a Style based on MaterialDesignSwitchToggleButton with a trigger, but it seems to only affect the Thumb color, not the Track.

Here's my current style code:

<Style x:Key="ToggleButtonStyle"
       TargetType="{x:Type ToggleButton}"
       BasedOn="{StaticResource MaterialDesignSwitchToggleButton}">
    <Style.Triggers>
        <Trigger Property="IsChecked" Value="True">
            <Setter Property="Background" Value="Green" />
            <!-- Need to change Track color here -->
        </Trigger>
    </Style.Triggers>
</Style>

I've attached images for better visualization: Toggle Actual, and Toggle Correct.

Is there a straightforward way to accomplish changing the Track background color when IsChecked is True while maintaining the desired Thumb color?

I've already attempted to change the foreground color without success.

Answer 1

You can use the ToggleButtonAssist.SwitchTrackOffBackground and ToggleButtonAssist.SwitchTrackOnBackground attached properties to change the colour of the track:

<Style x:Key="ToggleButtonStyle" TargetType="{x:Type ToggleButton}"
       BasedOn="{StaticResource MaterialDesignSwitchToggleButton}">
    <Setter Property="materialDesign:ToggleButtonAssist.SwitchTrackOffBackground" Value="Red" />
    <Style.Triggers>
        <Trigger Property="IsChecked" Value="True">
            <Setter Property="Background" Value="Green" />
            <Setter Property="materialDesign:ToggleButtonAssist.SwitchTrackOnBackground" Value="Green" />
        </Trigger>
    </Style.Triggers>
</Style>