Change the color of a ToogleButton when IsChecked="false"

Question

Surely this question has already been asked but I have not found it. I want to change the color of a ToogleButton when IsChecked="false". The background of the grid where the ToogleButton lives is dark. So when IsChecked property is false user see this:

If IsChecked is true then the color of the ToogleButton is fine:

I'm using MaterialDesign.

I tried the following code but it change the shape of the ToogleButton:

<ToggleButton IsChecked="{Binding Path=SelectedAllData, Mode=TwoWay}" 
                          Width="50" Height="20" Background="{StaticResource PrimaryHueDarkBrush}" Cursor="Hand">
                <ToggleButton.Style>
                    <Style TargetType="{x:Type ToggleButton}">
                        <Style.Triggers>
                            <Trigger Property="IsChecked" Value="False">
                                <Setter Property="Background" Value="{StaticResource PrimaryHueLightBrush}"/>
                            </Trigger>
                        </Style.Triggers>
                    </Style>
                </ToggleButton.Style>
            </ToggleButton>

Also I would like to know how to set IsEnababled property to false when IsChecked="true". Thanks!

EDIT

Answer 1

The Fill of the Ellipse in the template is current hardcoded so you'll have to copy the entire template and edit it:

<ToggleButton>
    <ToggleButton.Template>
        <ControlTemplate TargetType="{x:Type ToggleButton}">
            <ControlTemplate.Resources>
                <SineEase x:Key="RippleEasingFunction" EasingMode="EaseInOut"/>
                <Storyboard x:Key="ShowRipple">
                    <DoubleAnimation Storyboard.TargetName="RippleThumb" Storyboard.TargetProperty="Opacity"
                                             EasingFunction="{StaticResource RippleEasingFunction}"
                                             To="0.26" Duration="0"/>
                    <DoubleAnimation Storyboard.TargetName="RippleThumb" Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleX)"
                                             EasingFunction="{StaticResource RippleEasingFunction}"
                                             From="1" To="2.5" Duration="0:0:0.2"/>
                    <DoubleAnimation Storyboard.TargetName="RippleThumb" Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleY)"
                                             EasingFunction="{StaticResource RippleEasingFunction}"
                                             From="1" To="2.5" Duration="0:0:0.2"/>
                </Storyboard>
                <Storyboard x:Key="HideRipple">
                    <DoubleAnimation Storyboard.TargetName="RippleThumb" Storyboard.TargetProperty="Opacity"
                                             EasingFunction="{StaticResource RippleEasingFunction}"
                                             To="0" Duration="0:0:0.3"/>
                </Storyboard>
            </ControlTemplate.Resources>
            <Viewbox Width="34">
                <VisualStateManager.VisualStateGroups>
                    <VisualStateGroup x:Name="CheckStates">
                        <VisualStateGroup.Transitions>
                            <VisualTransition From="*" To="Checked">
                                <Storyboard>
                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)" Storyboard.TargetName="ThumbHolder">
                                        <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                                        <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="23.5">
                                            <EasingDoubleKeyFrame.EasingFunction>
                                                <QuadraticEase EasingMode="EaseOut"/>
                                            </EasingDoubleKeyFrame.EasingFunction>
                                        </EasingDoubleKeyFrame>
                                    </DoubleAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualTransition>
                            <VisualTransition From="Checked" To="Unchecked">
                                <Storyboard>
                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)" Storyboard.TargetName="ThumbHolder">
                                        <EasingDoubleKeyFrame KeyTime="0" Value="23.5"/>
                                        <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0">
                                            <EasingDoubleKeyFrame.EasingFunction>
                                                <QuadraticEase EasingMode="EaseOut"/>
                                            </EasingDoubleKeyFrame.EasingFunction>
                                        </EasingDoubleKeyFrame>
                                    </DoubleAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualTransition>
                        </VisualStateGroup.Transitions>
                        <VisualState x:Name="Checked">
                            <Storyboard>
                                <DoubleAnimation Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)" Storyboard.TargetName="ThumbHolder"
                                                         Duration="0" To="23.5" />
                            </Storyboard>
                        </VisualState>
                        <VisualState x:Name="Unchecked">
                            <Storyboard>
                                <DoubleAnimation Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)" Storyboard.TargetName="ThumbHolder"
                                                         Duration="0" To="0" />
                            </Storyboard>
                        </VisualState>
                    </VisualStateGroup>
                </VisualStateManager.VisualStateGroups>
                <Grid>
                    <Rectangle x:Name="Track" 
                                       Fill= "{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(materialDesign:ToggleButtonAssist.SwitchTrackOffBackground)}" 
                                       Opacity="0.26"
                                       HorizontalAlignment="Left" 
                                       Height="15" 
                                       Margin="4.211,5,4.211,0" 
                                       Stroke="{x:Null}" 
                                       VerticalAlignment="Top" 
                                       Width="40" 
                                       RadiusY="7.5" 
                                       RadiusX="7.5"/>
                    <Grid x:Name="ThumbHolder"
                                  HorizontalAlignment="Left" VerticalAlignment="Top">
                        <Ellipse x:Name="RippleThumb"
                                         Fill="{DynamicResource PrimaryHueLightBrush}"
                                         Height="25" Width="25"
                                         IsHitTestVisible="False"
                                         Opacity="0.26"
                                         Margin="0"
                                         HorizontalAlignment="Center" VerticalAlignment="Center"
                                         RenderTransformOrigin="0.5,0.5">
                            <Ellipse.RenderTransform>
                                <ScaleTransform ScaleX="1" ScaleY="1"/>
                            </Ellipse.RenderTransform>
                        </Ellipse>
                        <AdornerDecorator CacheMode="{Binding RelativeSource={RelativeSource Self}, Path=(materialDesign:ShadowAssist.CacheMode)}">
                            <Ellipse x:Name="Thumb"
                                             Fill="#FFFAFAFA" Stroke="{x:Null}" 
                                             HorizontalAlignment="Center" VerticalAlignment="Center"
                                             Width="25" Height="25"
                                             Margin="0,0,0,0"
                                             RenderTransformOrigin="0.5,0.5"
                                             Effect="{DynamicResource MaterialDesignShadowDepth1}">
                            </Ellipse>
                        </AdornerDecorator>
                        <ContentPresenter ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}"
                                                  Margin="{TemplateBinding Padding}"
                                                  x:Name="ContentPresenter"
                                                  HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" 
                                                  FlowDirection="LeftToRight"/>
                        <Grid.RenderTransform>
                            <TranslateTransform X="0" Y="0"/>
                        </Grid.RenderTransform>
                    </Grid>
                </Grid>
            </Viewbox>
            <ControlTemplate.Triggers>
                <Trigger Property="IsChecked" Value="True">
                    <Setter TargetName="Thumb" Property="Fill" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Background}" />
                    <Setter TargetName="Track" Property="Fill" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(materialDesign:ToggleButtonAssist.SwitchTrackOnBackground)}" />
                    <Setter Property="Foreground" Value="{DynamicResource PrimaryHueMidForegroundBrush}"/>
                </Trigger>
                <MultiTrigger>
                    <MultiTrigger.Conditions>
                        <Condition Property="IsChecked" Value="True" />
                        <Condition Property="materialDesign:ToggleButtonAssist.HasOnContent" Value="True" />
                    </MultiTrigger.Conditions>
                    <Setter TargetName="ContentPresenter" Property="Content" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(materialDesign:ToggleButtonAssist.OnContent)}" />
                    <Setter TargetName="ContentPresenter" Property="ContentTemplate" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(materialDesign:ToggleButtonAssist.OnContentTemplate)}" />
                </MultiTrigger>
                <Trigger Property="IsChecked" Value="False">
                    <Setter Property="Foreground" Value="{DynamicResource PrimaryHueMidBrush}"/>
                    <Setter TargetName="Thumb" Property="Fill" Value="Red" />
                </Trigger>
                <Trigger Property="Button.IsDefaulted" Value="true"/>
                <Trigger Property="IsMouseOver" Value="true"/>
                <Trigger Property="IsPressed" Value="true">
                    <Trigger.EnterActions>
                        <BeginStoryboard Storyboard="{StaticResource ShowRipple}"/>
                    </Trigger.EnterActions>
                    <Trigger.ExitActions>
                        <BeginStoryboard Storyboard="{StaticResource HideRipple}"/>
                    </Trigger.ExitActions>
                </Trigger>
                <Trigger Property="IsEnabled" Value="false">
                    <Setter TargetName="Thumb" Property="Fill" Value="#BDBDBD" />
                    <Setter TargetName="Track" Property="Fill">
                        <Setter.Value>
                            <SolidColorBrush Color="Black" Opacity=".12" />
                        </Setter.Value>
                    </Setter>
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
    </ToggleButton.Template>
</ToggleButton>

You change the colour by setting the Value property of the IsChecked trigger. It's set to Red in my example.