title: WPF Flip Animation
body: <p>I'm trying to create a control in WPF, similar to a card, that will have bound data on both "sides".  Using the following code I can get it to flip from FIRST NAME to LAST NAME, just not back.  Once it flips to LAST NAME and I click it just flashes like it's performing the same animation and not running the reverse.  Any insight into this problem would be greatly appreciated.</p>
  
  <pre><code>&lt;UserControl x:Class="WpfApplication2.TileControl"
           xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
           xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"&gt;
  
  &lt;UserControl.Resources&gt;
    &lt;Storyboard x:Key="FlipFirst"&gt;
       &lt;DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="Back"&gt;
          &lt;EasingDoubleKeyFrame KeyTime="0" Value="0"/&gt;
          &lt;EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/&gt;
          &lt;EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="1"/&gt;
       &lt;/DoubleAnimationUsingKeyFrames&gt;
       &lt;DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="Back"&gt;
          &lt;EasingDoubleKeyFrame KeyTime="0" Value="-1"/&gt;
          &lt;EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/&gt;
          &lt;EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="1"/&gt;
       &lt;/DoubleAnimationUsingKeyFrames&gt;
       &lt;DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="Front"&gt;
          &lt;EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/&gt;
       &lt;/DoubleAnimationUsingKeyFrames&gt;
       &lt;DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="Front"&gt;
          &lt;EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/&gt;
          &lt;EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="-1"/&gt;
       &lt;/DoubleAnimationUsingKeyFrames&gt;
    &lt;/Storyboard&gt;
    &lt;Storyboard x:Key="FlipLast"&gt;
       &lt;DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="Back"&gt;
          &lt;SplineDoubleKeyFrame KeyTime="0" Value="1"/&gt;
          &lt;SplineDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/&gt;
          &lt;SplineDoubleKeyFrame KeyTime="0:0:0.4" Value="0"/&gt;
       &lt;/DoubleAnimationUsingKeyFrames&gt;
       &lt;DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="Back"&gt;
          &lt;SplineDoubleKeyFrame KeyTime="0" Value="1"/&gt;
          &lt;SplineDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/&gt;
          &lt;SplineDoubleKeyFrame KeyTime="0:0:0.4" Value="-1"/&gt;
       &lt;/DoubleAnimationUsingKeyFrames&gt;
       &lt;DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="Front"&gt;
          &lt;SplineDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/&gt;
          &lt;SplineDoubleKeyFrame KeyTime="0:0:0.4" Value="1"/&gt;
       &lt;/DoubleAnimationUsingKeyFrames&gt;
       &lt;DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="Front"&gt;
          &lt;SplineDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/&gt;
          &lt;SplineDoubleKeyFrame KeyTime="0:0:0.4" Value="1"/&gt;
       &lt;/DoubleAnimationUsingKeyFrames&gt;
    &lt;/Storyboard&gt;
  &lt;/UserControl.Resources&gt;
  &lt;UserControl.Triggers&gt;
    &lt;EventTrigger RoutedEvent="UIElement.MouseLeftButtonDown" SourceName="Front"&gt;
       &lt;BeginStoryboard x:Name="Storyboard_Begin" Storyboard="{StaticResource FlipFirst}"/&gt;
    &lt;/EventTrigger&gt;
    &lt;EventTrigger RoutedEvent="UIElement.MouseLeftButtonDown" SourceName="Back"&gt;
       &lt;StopStoryboard BeginStoryboardName="Storyboard_Begin" /&gt;
       &lt;BeginStoryboard x:Name="Storyboard_Reversed" Storyboard="{StaticResource FlipLast}" /&gt;
    &lt;/EventTrigger&gt;
  &lt;/UserControl.Triggers&gt;
  
  &lt;Grid x:Name="LayoutRoot" Width="280" Height="680"&gt;
    &lt;Grid x:Name="Back" HorizontalAlignment="Left" Height="680" VerticalAlignment="Top" Width="280" Background="{DynamicResource {x:Static SystemColors.ActiveCaptionBrushKey}}" RenderTransformOrigin="0.5,0.5"&gt;
       &lt;Grid.RenderTransform&gt;
          &lt;TransformGroup&gt;
             &lt;ScaleTransform/&gt;
             &lt;SkewTransform/&gt;
             &lt;RotateTransform/&gt;
             &lt;TranslateTransform/&gt;
          &lt;/TransformGroup&gt;
       &lt;/Grid.RenderTransform&gt;
       &lt;TextBlock x:Name="LastName" HorizontalAlignment="Center" TextWrapping="Wrap" VerticalAlignment="Center" Margin="0" Text="LAST NAME" Width="100" Height="100"/&gt;
    &lt;/Grid&gt;
    &lt;Grid x:Name="Front" HorizontalAlignment="Left" Height="680" VerticalAlignment="Top" Width="280" Background="{DynamicResource {x:Static SystemColors.ActiveCaptionBrushKey}}" RenderTransformOrigin="0.5,0.5"&gt;
       &lt;Grid.RenderTransform&gt;
          &lt;TransformGroup&gt;
             &lt;ScaleTransform/&gt;
             &lt;SkewTransform/&gt;
             &lt;RotateTransform/&gt;
             &lt;TranslateTransform/&gt;
          &lt;/TransformGroup&gt;
       &lt;/Grid.RenderTransform&gt;
       &lt;TextBlock x:Name="FirstName" HorizontalAlignment="Center" TextWrapping="Wrap" Text="FIRST NAME" VerticalAlignment="Center" Width="100" Height="100"/&gt;
    &lt;/Grid&gt;
  &lt;/Grid&gt;
  &lt;/UserControl&gt;
  </code></pre>