How to Cancel ToggleButton Animation on Window Switch

Question

I use this ToggleButton for my SettingsWindow. When i switch over to my SettingsWindow i can see the Animation of Every ToggleButton that is in the ON State. I want them to be fully enabled already without seeing the Animation of them. How can i achieve this?

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <Style BasedOn="{StaticResource {x:Type ToggleButton}}" TargetType="ToggleButton" x:Key="ToggleButton">
        <Style.Setters>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ToggleButton">
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition Width="*"/>
                            </Grid.ColumnDefinitions>
                            <StackPanel Orientation="Horizontal" Grid.Column="0" VerticalAlignment="Bottom" HorizontalAlignment="Center" Margin="0,0,0,10">
                                <Border x:Name="border" Cursor="Hand" CornerRadius="12.5" Width="50" Height="25">
                                    <Border.Background>
                                        <SolidColorBrush Color="#363031" x:Name="backgroundbrush"/>
                                    </Border.Background>
                                    <Border CornerRadius="12.5">
                                        <Border.Background>
                                            <SolidColorBrush Color="#000000" Opacity="0" x:Name="hoverbrush"/>
                                        </Border.Background>
                                        <Ellipse Width="17.5" Height="17.5" Fill="#ffffff" Margin="-25,0,0,0" x:Name="ellipse"/>
                                    </Border>
                                </Border>
                            </StackPanel>
                            <Label FontFamily="Livvic" Content="{TemplateBinding Content}" Foreground="White" FontSize="20" FontWeight="Bold" Grid.Column="1" Margin="5,0,0,0" VerticalAlignment="Center" HorizontalAlignment="Center" Padding="0,0,0,0">
                                <Label.Effect>
                                    <DropShadowEffect BlurRadius="4" ShadowDepth="4" Opacity="0.25"/>
                                </Label.Effect>
                            </Label>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="ToggleButton.IsChecked" Value="True">
                                <Trigger.EnterActions>
                                    <BeginStoryboard>
                                        <Storyboard>
                                            <ColorAnimation To="#d151ff" Duration="0:0:0.2" Storyboard.TargetName="backgroundbrush" Storyboard.TargetProperty="Color"/>
                                            <ThicknessAnimation To="25,0,0,0" Duration="0:0:0.2" Storyboard.TargetName="ellipse" Storyboard.TargetProperty="Margin"/>
                                        </Storyboard>
                                    </BeginStoryboard>
                                </Trigger.EnterActions>
                                <Trigger.ExitActions>
                                    <BeginStoryboard>
                                        <Storyboard>
                                            <ColorAnimation To="#363031" Duration="0:0:0.2" Storyboard.TargetName="backgroundbrush" Storyboard.TargetProperty="Color"/>
                                            <ThicknessAnimation To="-25,0,0,0" Duration="0:0:0.2" Storyboard.TargetName="ellipse" Storyboard.TargetProperty="Margin"/>
                                        </Storyboard>
                                    </BeginStoryboard>
                                </Trigger.ExitActions>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style.Setters>
    </Style>
</ResourceDictionary>

I want the Buttons i turned On before to be fully on the On State when i Switch to my Settings Window.

Answer 1

The animation is playing whenever the ToggleButton's IsChecked property is set to true - even if that's the initial visible state - because the Trigger can't distinguish between an initial state of true and a transition from false to true. Or more specifically from the built-in control states of Unchecked to Checked.

Instead you can use VisualStateManager and VisualState's to get the right behavior:

<ControlTemplate TargetType="ToggleButton">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="CheckStates">
                <VisualStateGroup.Transitions>
                    <VisualTransition From="Unchecked"
                                      To="Checked">
                        <Storyboard>
                            <ColorAnimationUsingKeyFrames Storyboard.TargetName="backgroundbrush"
                                                          Storyboard.TargetProperty="Color"
                                                          Duration="00:00:00.2">
                                <EasingColorKeyFrame Value="#d151ff" />
                            </ColorAnimationUsingKeyFrames>
                            <ThicknessAnimationUsingKeyFrames Storyboard.TargetName="ellipse"
                                                              Storyboard.TargetProperty="Margin"
                                                              Duration="00:00:00.2">
                                <EasingThicknessKeyFrame Value="25,0,0,0"/>
                            </ThicknessAnimationUsingKeyFrames>
                        </Storyboard>
                    </VisualTransition>
                    <VisualTransition From="Checked"
                                      To="Unchecked">
                        <Storyboard>
                            <ColorAnimationUsingKeyFrames Storyboard.TargetName="backgroundbrush"
                                                          Storyboard.TargetProperty="Color"
                                                          Duration="00:00:00.2">
                                <EasingColorKeyFrame Value="#363031" />
                            </ColorAnimationUsingKeyFrames>
                            <ThicknessAnimationUsingKeyFrames Storyboard.TargetName="ellipse"
                                                              Storyboard.TargetProperty="Margin"
                                                              Duration="00:00:00.2">
                                <EasingThicknessKeyFrame Value="-25,0,0,0"/>
                            </ThicknessAnimationUsingKeyFrames>
                        </Storyboard>
                    </VisualTransition>
                </VisualStateGroup.Transitions>
                <VisualState x:Name="Checked">
                    <Storyboard>
                        <ColorAnimationUsingKeyFrames Storyboard.TargetName="backgroundbrush"
                                                      Storyboard.TargetProperty="Color">
                            <EasingColorKeyFrame Value="#d151ff" 
                                                 KeyTime="0"/>
                        </ColorAnimationUsingKeyFrames>
                        <ThicknessAnimationUsingKeyFrames Storyboard.TargetName="ellipse"
                                                          Storyboard.TargetProperty="Margin">
                            <EasingThicknessKeyFrame Value="25,0,0,0"
                                                     KeyTime="0"/>
                        </ThicknessAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="Unchecked" />
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        <StackPanel Orientation="Horizontal"
                    Grid.Column="0"
                    VerticalAlignment="Bottom"
                    HorizontalAlignment="Center"
                    Margin="0,0,0,10">
            <Border x:Name="border"
                    Cursor="Hand"
                    CornerRadius="12.5"
                    Width="50"
                    Height="25">
                <Border.Background>
                    <SolidColorBrush Color="#363031"
                                     x:Name="backgroundbrush" />
                </Border.Background>
                <Border CornerRadius="12.5">
                    <Border.Background>
                        <SolidColorBrush Color="#000000"
                                         Opacity="0"
                                         x:Name="hoverbrush" />
                    </Border.Background>
                    <Ellipse Width="17.5"
                             Height="17.5"
                             Fill="#ffffff"
                             Margin="-25,0,0,0"
                             x:Name="ellipse" />
                </Border>
            </Border>
        </StackPanel>
        <Label FontFamily="Livvic"
               Content="{TemplateBinding Content}"
               Foreground="White"
               FontSize="20"
               FontWeight="Bold"
               Grid.Column="1"
               Margin="5,0,0,0"
               VerticalAlignment="Center"
               HorizontalAlignment="Center"
               Padding="0,0,0,0">
            <Label.Effect>
                <DropShadowEffect BlurRadius="4"
                                  ShadowDepth="4"
                                  Opacity="0.25" />
            </Label.Effect>
        </Label>
    </Grid>
</ControlTemplate>

Again these states are built into the Control's internal/private backing code (invoked via VisualStateManager.GoToState). Any time you're re-templating a Control, you should always look up the default states and template on the WPF documentation site so you can respond to these states as you want.

Unfortunately it is a lot of XAML and there is some duplication - you need to fully specify the static/initial state for Checked as well as the end states for both transition animations. I'm not aware of any way around this but if I'm wrong I'm sure someone will correct me. On the flip side you don't need anything special for the Unchecked state because that matches the normal state of the control as you've templated it.