title: How to Perform a Card Flip Animation
body: <p>I would like to be able to perform a card flip animation from one half of the device screen to the other when a user taps the screen. I have never used animations before so I am at a loss of how to accomplish this. I referenced <a href="http://blogs.msdn.com/b/kevinash/archive/2011/12/21/flipping-card-animation-for-windows-phone-7-using-expression-blend.aspx" rel="nofollow">http://blogs.msdn.com/b/kevinash/archive/2011/12/21/flipping-card-animation-for-windows-phone-7-using-expression-blend.aspx</a> but I do not know how to modify the solution so appropriately. What I ultimately need is to be able to flip through an entire deck of cards in this manner.</p>
  
  <p>MainPage.xaml</p>
  
  <pre><code>&lt;phone:PhoneApplicationPage.Resources&gt;
      &lt;Storyboard x:Name="Storyboard1"&gt;
          &lt;PointAnimation Duration="0:0:2" To="0.5,0.5" Storyboard.TargetProperty="(UIElement.RenderTransformOrigin)" Storyboard.TargetName="cardBack" d:IsOptimized="True"/&gt;
          &lt;DoubleAnimation Duration="0:0:2" To="90" Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationY)" Storyboard.TargetName="cardBack" d:IsOptimized="True"/&gt;
          &lt;DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationY)" Storyboard.TargetName="aceSpades"&gt;
              &lt;EasingDoubleKeyFrame KeyTime="0:0:2" Value="90"/&gt;
              &lt;EasingDoubleKeyFrame KeyTime="0:0:4" Value="0"/&gt;
          &lt;/DoubleAnimationUsingKeyFrames&gt;
          &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="aceSpades"&gt;
              &lt;DiscreteObjectKeyFrame KeyTime="0:0:2"&gt;
                  &lt;DiscreteObjectKeyFrame.Value&gt;
                      &lt;Visibility&gt;Visible&lt;/Visibility&gt;
                  &lt;/DiscreteObjectKeyFrame.Value&gt;
              &lt;/DiscreteObjectKeyFrame&gt;
          &lt;/ObjectAnimationUsingKeyFrames&gt;
      &lt;/Storyboard&gt;
  &lt;/phone:PhoneApplicationPage.Resources&gt;
  
  &lt;!--LayoutRoot is the root grid where all page content is placed--&gt;
  &lt;Grid x:Name="LayoutRoot" Background="Transparent"&gt;
      &lt;VisualStateManager.VisualStateGroups&gt;
          &lt;VisualStateGroup x:Name="VisualStateGroup"&gt;
              &lt;VisualState x:Name="FlipCard" &gt;
                  &lt;Storyboard &gt;
                      &lt;DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationX)" Storyboard.TargetName="cardBack"&gt;
                          &lt;EasingDoubleKeyFrame KeyTime="0" Value="0"/&gt;
                          &lt;EasingDoubleKeyFrame KeyTime="0:0:1" Value="0"/&gt;
                      &lt;/DoubleAnimationUsingKeyFrames&gt;
                      &lt;DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationY)" Storyboard.TargetName="cardBack"&gt;
                          &lt;EasingDoubleKeyFrame KeyTime="0" Value="0"/&gt;
                          &lt;EasingDoubleKeyFrame KeyTime="0:0:1" Value="90"/&gt;
                      &lt;/DoubleAnimationUsingKeyFrames&gt;
                      &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="aceSpades"&gt;
                          &lt;DiscreteObjectKeyFrame KeyTime="0:0:1"&gt;
                              &lt;DiscreteObjectKeyFrame.Value&gt;
                                  &lt;Visibility&gt;Visible&lt;/Visibility&gt;
                              &lt;/DiscreteObjectKeyFrame.Value&gt;
                          &lt;/DiscreteObjectKeyFrame&gt;
                      &lt;/ObjectAnimationUsingKeyFrames&gt;
                      &lt;DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationY)" Storyboard.TargetName="aceSpades"&gt;
                          &lt;EasingDoubleKeyFrame KeyTime="0:0:1" Value="90"/&gt;
                          &lt;EasingDoubleKeyFrame KeyTime="0:0:2" Value="0"/&gt;
                      &lt;/DoubleAnimationUsingKeyFrames&gt;
                      &lt;DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationZ)" Storyboard.TargetName="cardBack"&gt;
                          &lt;EasingDoubleKeyFrame KeyTime="0" Value="0"/&gt;
                          &lt;EasingDoubleKeyFrame KeyTime="0:0:1" Value="0"/&gt;
                      &lt;/DoubleAnimationUsingKeyFrames&gt;
                  &lt;/Storyboard&gt;
              &lt;/VisualState&gt;
          &lt;/VisualStateGroup&gt;
      &lt;/VisualStateManager.VisualStateGroups&gt;
      &lt;Grid.RowDefinitions&gt;
          &lt;RowDefinition Height="Auto"/&gt;
          &lt;RowDefinition Height="*"/&gt;
      &lt;/Grid.RowDefinitions&gt;
  
      &lt;!--TitlePanel contains the name of the application and page title--&gt;
      &lt;StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28"&gt;
          &lt;TextBlock x:Name="ApplicationTitle" Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/&gt;
          &lt;TextBlock x:Name="PageTitle" Text="flipping card" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/&gt;
      &lt;/StackPanel&gt;
  
      &lt;!--ContentPanel - place additional content here--&gt;
      &lt;Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"&gt;
          &lt;Image x:Name="aceSpades" Margin="55,20,51,37" Source="AceSpades.png" Stretch="Fill" Visibility="Collapsed"&gt;
              &lt;Image.RenderTransform&gt;
                  &lt;CompositeTransform/&gt;
              &lt;/Image.RenderTransform&gt;
              &lt;Image.Projection&gt;
                  &lt;PlaneProjection/&gt;
              &lt;/Image.Projection&gt;
          &lt;/Image&gt;
          &lt;Image x:Name="cardBack" Margin="55,20,51,37" Source="CardBack.png" Stretch="Fill" Tap="cardBack_Tap"&gt;
              &lt;Image.Projection&gt;
                  &lt;PlaneProjection/&gt;
              &lt;/Image.Projection&gt;
              &lt;Image.RenderTransform&gt;
                  &lt;CompositeTransform/&gt;
              &lt;/Image.RenderTransform&gt;
          &lt;/Image&gt;&lt;/Grid&gt;
  &lt;/Grid&gt;
  </code></pre>
  
  <p>MainPage.xaml.cs</p>
  
  <pre><code>public MainPage()
      {
          InitializeComponent();
      }
  
      private void cardBack_Tap(object sender, System.Windows.Input.GestureEventArgs e)
      {
          VisualStateManager.GoToState(this,"FlipCard",true);
      }
  </code></pre>