Add custom color to ToggleButton IsChecked = false

Question

So i have this style:

<Style x:Key="AnimatedSwitch" TargetType="{x:Type ToggleButton}">
            <Setter Property="Foreground" Value="Black" />
            <Setter Property="Background" Value="Crimson" />
            <Setter Property="BorderBrush" Value="#EAEAEB" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ToggleButton">
                        <Viewbox Stretch="Uniform">
                            <Canvas Name="Layer_1" Width="20" Height="20" Canvas.Left="10" Canvas.Top="0">
                                <Ellipse  Canvas.Left="0" Width="20" Height="20" Fill="{TemplateBinding Background}" Stroke="{TemplateBinding BorderBrush}" StrokeThickness="0.5"/>
                                <Ellipse  Canvas.Left="15" Width="20" Height="20" Fill="{TemplateBinding Background}" Stroke="{TemplateBinding BorderBrush}" StrokeThickness="0.5"/>
                                <Border Canvas.Left="10" Width="15" Height="20" Name="rect416927" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="0,0.5,0,0.5"/>
                                <Ellipse x:Name="ellipse"  Canvas.Left="0" Width="20" Height="20" Fill="White" Stroke="{TemplateBinding BorderBrush}" StrokeThickness="0.3">
                                    <Ellipse.RenderTransform>
                                        <TranslateTransform X="0" Y="0" />
                                    </Ellipse.RenderTransform>
                                    <Ellipse.BitmapEffect>
                                        <DropShadowBitmapEffect Softness="0.1" ShadowDepth="0.7" Direction="270" Color="#BBBBBB"/>
                                    </Ellipse.BitmapEffect>
                                </Ellipse>
                            </Canvas>
                        </Viewbox>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsChecked" Value="True" >
                                <Trigger.EnterActions>
                                    <BeginStoryboard>
                                        <Storyboard>
                                            <ColorAnimation Storyboard.TargetProperty="Background.Color" To="LightSeaGreen" Duration="0:0:0.2" />
                                            <ColorAnimation Storyboard.TargetProperty="BorderBrush.Color" To="LightSeaGreen" Duration="0:0:0.2" />
                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Ellipse.RenderTransform).(TranslateTransform.X)" Storyboard.TargetName="ellipse">
                                                <SplineDoubleKeyFrame KeyTime="0" Value="0"/>
                                                <SplineDoubleKeyFrame KeyTime="0:0:0.4" Value="15" KeySpline="0, 1, 0.6, 1"/>
                                            </DoubleAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </BeginStoryboard>
                                </Trigger.EnterActions>
                                <Trigger.ExitActions>
                                    <BeginStoryboard>
                                        <Storyboard>
                                            <ColorAnimation Storyboard.TargetProperty="Background.Color" To="#FAFAFB" Duration="0:0:0.2" />
                                            <ColorAnimation Storyboard.TargetProperty="BorderBrush.Color" To="#FAFAFB" Duration="0:0:0.2" />
                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Ellipse.RenderTransform).(TranslateTransform.X)" Storyboard.TargetName="ellipse">
                                                <SplineDoubleKeyFrame KeyTime="0" Value="15"/>
                                                <SplineDoubleKeyFrame KeyTime="0:0:0.3" Value="0" KeySpline="0, 0.5, 0.5, 1"/>
                                            </DoubleAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </BeginStoryboard>
                                </Trigger.ExitActions>
                            </Trigger>

                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

I have changed the color when IsChecked = True (color LightSeaGreen) and i duplicated this for IsChecked = False to Redcolor:

<Trigger Property="IsChecked" Value="False" >
    <Trigger.EnterActions>
        <BeginStoryboard>
            <Storyboard>
                <ColorAnimation Storyboard.TargetProperty="Background.Color" To="Red" Duration="0:0:0.2" />
                <ColorAnimation Storyboard.TargetProperty="BorderBrush.Color" To="Red" Duration="0:0:0.2" />
                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Ellipse.RenderTransform).(TranslateTransform.X)" Storyboard.TargetName="ellipse">
                    <SplineDoubleKeyFrame KeyTime="0" Value="0"/>
                    <SplineDoubleKeyFrame KeyTime="0:0:0.4" Value="15" KeySpline="0, 1, 0.6, 1"/>
                </DoubleAnimationUsingKeyFrames>
            </Storyboard>
        </BeginStoryboard>
    </Trigger.EnterActions>
    <Trigger.ExitActions>
        <BeginStoryboard>
            <Storyboard>
                <ColorAnimation Storyboard.TargetProperty="Background.Color" To="#FAFAFB" Duration="0:0:0.2" />
                <ColorAnimation Storyboard.TargetProperty="BorderBrush.Color" To="#FAFAFB" Duration="0:0:0.2" />
                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Ellipse.RenderTransform).(TranslateTransform.X)" Storyboard.TargetName="ellipse">
                    <SplineDoubleKeyFrame KeyTime="0" Value="15"/>
                    <SplineDoubleKeyFrame KeyTime="0:0:0.3" Value="0" KeySpline="0, 0.5, 0.5, 1"/>
                </DoubleAnimationUsingKeyFrames>
            </Storyboard>
        </BeginStoryboard>
    </Trigger.ExitActions>
</Trigger>

So my problem is that that after my ToggleButton is checked it become Red instead of LightSeaGreen and when unchecked it become White instead of Red. This hapenning only after add this IsChecked = False

Answer 1

Your issue is these lines:

<ColorAnimation Storyboard.TargetProperty="Background.Color" To="#FAFAFB" Duration="0:0:0.2" />
<ColorAnimation Storyboard.TargetProperty="BorderBrush.Color" To="#FAFAFB" Duration="0:0:0.2" />

You have to set in the ExitActions the To to Crimson again and it should work properly