Re-Triggering WPF animations - wpf

Question

I've the following WPF XAML that tries to animate the visibility of 2 rectangles depending on the IsChecked property of a checkbox. So Checked means the blue box appears and the red box disappears after a second, Unchecked means the red box appears and the blue box disappears, and Undetermined means none are visible.
I'm using storyboards but I'm missing something. It work's for the first trigger but some of the animated properties get stuck.
<DataTemplate x:Key="dt">
<DockPanel>
<CheckBox x:Name="ckToggle" Content="Toggle" DockPanel.Dock="Top" IsThreeState="True"/>
<StackPanel Orientation="Horizontal">
<Rectangle x:Name="a" Visibility="Hidden" Width="100" Height="100" Fill = "Red"/>
<Rectangle x:Name="b" Visibility="Hidden" Width="100" Height="100" Fill = "Blue"/>
</StackPanel>
</DockPanel>
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding ElementName=ckToggle, Path=IsChecked}" Value="True">
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="a" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="00:00:01" Value="{x:Static Visibility.Visible}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
<BeginStoryboard>
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="b" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="00:00:00" Value="{x:Static Visibility.Visible}"/>
<DiscreteObjectKeyFrame KeyTime="00:00:01" Value="{x:Static Visibility.Hidden}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
<DataTrigger.ExitActions>
</DataTrigger.ExitActions>
</DataTrigger>
<DataTrigger Binding="{Binding ElementName=ckToggle, Path=IsChecked}" Value="False">
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="b" Storyboard.TargetProperty="Visibility" >
<DiscreteObjectKeyFrame KeyTime="00:00:01" Value="{x:Static Visibility.Visible}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
<BeginStoryboard>
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="a" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="00:00:00" Value="{x:Static Visibility.Visible}"/>
<DiscreteObjectKeyFrame KeyTime="00:00:01" Value="{x:Static Visibility.Hidden}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
<DataTrigger.ExitActions>
</DataTrigger.ExitActions>
</DataTrigger>
</DataTemplate.Triggers>
</DataTemplate>
<ContentControl ContentTemplate="{StaticResource dt}"/>
If anyone can help, thanks
Bryan

Answer 1

The problem you have is a property of a wpf storyboard. It´s the case that when you begin a storyboard it´ll never stop until you tell it to to that. So the first storyboard you call is still running when you call the second one and you get in trouble. The way to get out there is the following:
First combine the two storyboards for each trigger in one (You can put multiple animations in one storyboard, you don´t have to do that but it makes things easier..). Now add a name to each of the two remaining BeginStoryboard calls and add StopStoryboard calls with the same names to each dataTrigger in the exitActions block. I ended up with the following code that (hopefully) works as you want:
<Window x:Class="Test.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:Test"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<DataTemplate x:Key="dt">
<DockPanel>
<CheckBox x:Name="ckToggle" Content="Toggle" DockPanel.Dock="Top" IsThreeState="True"/>
<StackPanel Orientation="Horizontal">
<Rectangle x:Name="a" Visibility="Hidden" Width="100" Height="100" Fill = "Red"/>
<Rectangle x:Name="b" Visibility="Hidden" Width="100" Height="100" Fill = "Blue"/>
</StackPanel>
</DockPanel>
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding ElementName=ckToggle, Path=IsChecked}" Value="True">
<DataTrigger.EnterActions>
<BeginStoryboard Name="st1">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="a" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="00:00:01" Value="{x:Static Visibility.Visible}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="b" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="00:00:00" Value="{x:Static Visibility.Visible}"/>
<DiscreteObjectKeyFrame KeyTime="00:00:01" Value="{x:Static Visibility.Hidden}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
<DataTrigger.ExitActions>
<StopStoryboard BeginStoryboardName="st1"/>
</DataTrigger.ExitActions>
</DataTrigger>
<DataTrigger Binding="{Binding ElementName=ckToggle, Path=IsChecked}" Value="False">
<DataTrigger.EnterActions>
<BeginStoryboard Name="st2">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="b" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="00:00:01" Value="{x:Static Visibility.Visible}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="a" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="00:00:00" Value="{x:Static Visibility.Visible}"/>
<DiscreteObjectKeyFrame KeyTime="00:00:01" Value="{x:Static Visibility.Hidden}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
<DataTrigger.ExitActions>
<StopStoryboard BeginStoryboardName="st2"/>
</DataTrigger.ExitActions>
</DataTrigger>
</DataTemplate.Triggers>
</DataTemplate>
</Window.Resources>
<ContentControl ContentTemplate="{StaticResource dt}"/></Window>