title: Dynamic Flip Animation in windows phone 8 using C#
body: <p>I have a requirement that involves flipping of multiple grid cells in windows phone 8.</p>
  
  <p>I am using a Grid layout as below.</p>
  
  <pre><code>-------------------------  
  |  A  |  B  |  C  |  D  |
  +-----+-----+-----+-----+  
  |  A  |  B  |  C  |  D  |
  +-----+-----+-----+-----+  
  |  A  |  B  |  C  |  D  |
  +-----+-----+-----+-----+ 
  |  A  |  B  |  C  |  D  |
  ------------------------- 
  </code></pre>
  
  <p>When i click on <code>| A |</code>in the first row, it flips horizontally and this comes up <code>| A' |</code>. Like wise i need to add flip animations for all the cells present above. Is there any easy way using C# that i can achieve this. Currently i am using the below way to do this.</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="180"/&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.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="180"/&gt;
                      &lt;/DoubleAnimationUsingKeyFrames&gt;
  
                  &lt;/Storyboard&gt;
              &lt;/VisualState&gt;
  
              &lt;VisualState x:Name="FlipCardBack" &gt;
                  &lt;Storyboard &gt;
                      &lt;DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationY)" Storyboard.TargetName="aceSpades"&gt;
                          &lt;EasingDoubleKeyFrame KeyTime="0" Value="180"/&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="cardBack"&gt;
                          &lt;EasingDoubleKeyFrame KeyTime="0:0:1" Value="90"/&gt;
                          &lt;EasingDoubleKeyFrame KeyTime="0:0:2" Value="0"/&gt;
                      &lt;/DoubleAnimationUsingKeyFrames&gt;
                  &lt;/Storyboard&gt;
              &lt;/VisualState&gt;
          &lt;/VisualStateGroup&gt;
  
  
  
  // adding one more visual state group for another rectangle cell.
  
  
          &lt;VisualStateGroup x:Name="VisualStateGroup1"&gt;
          &lt;VisualState x:Name="FlipCard1" &gt;
              &lt;Storyboard &gt;
                  &lt;DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationY)" Storyboard.TargetName="cardBack1"&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="aceSpades1"&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="aceSpades1"&gt;
                      &lt;EasingDoubleKeyFrame KeyTime="0:0:1" Value="90"/&gt;
                      &lt;EasingDoubleKeyFrame KeyTime="0:0:2" Value="180"/&gt;
                  &lt;/DoubleAnimationUsingKeyFrames&gt;
              &lt;/Storyboard&gt;
          &lt;/VisualState&gt;
  
          &lt;VisualState x:Name="FlipCardBack1" &gt;
              &lt;Storyboard &gt;
                  &lt;DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationY)" Storyboard.TargetName="aceSpades1"&gt;
                      &lt;EasingDoubleKeyFrame KeyTime="0" Value="180"/&gt;
                      &lt;EasingDoubleKeyFrame KeyTime="0:0:1" Value="90"/&gt;
                  &lt;/DoubleAnimationUsingKeyFrames&gt;
                  &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="aceSpades1"&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="cardBack1"&gt;
                      &lt;EasingDoubleKeyFrame KeyTime="0:0:1" Value="90"/&gt;
                      &lt;EasingDoubleKeyFrame KeyTime="0:0:2" Value="0"/&gt;
                  &lt;/DoubleAnimationUsingKeyFrames&gt;
              &lt;/Storyboard&gt;
          &lt;/VisualState&gt;
  
          &lt;/VisualStateGroup&gt;  
            &lt;!--   &lt;VisualStateGroup x:Name="VisualStateGroup2"&gt; ......
               ....
               .....
               ...... (same repeats for other rectangle cell with different IDs)
          &lt;   --&gt;
      &lt;/VisualStateManager.VisualStateGroups&gt;
      &lt;Grid.RowDefinitions&gt;
  
          &lt;RowDefinition Height="*"/&gt;
          &lt;RowDefinition Height="*"/&gt;
      &lt;/Grid.RowDefinitions&gt;
      &lt;Grid.ColumnDefinitions&gt;
  
          &lt;ColumnDefinition Width="*"/&gt;
          &lt;ColumnDefinition Width="*"/&gt;
      &lt;/Grid.ColumnDefinitions&gt;
  
      &lt;!--TitlePanel contains the name of the application and page title--&gt;
  
  
      &lt;!--ContentPanel - place additional content here--&gt;
      &lt;Grid x:Name="ContentPanel" Grid.Row="0" Grid.Column="0"  Margin="12,0,12,0"&gt;
          &lt;Rectangle x:Name="aceSpades"  Fill="Tomato" Stretch="Fill" Tap="cardBack_Tap" Visibility="Collapsed"&gt;
              &lt;Rectangle.RenderTransform&gt;
                  &lt;CompositeTransform/&gt;
              &lt;/Rectangle.RenderTransform&gt;
              &lt;Rectangle.Projection&gt;
                  &lt;PlaneProjection/&gt;
              &lt;/Rectangle.Projection&gt;
          &lt;/Rectangle&gt;
          &lt;Rectangle x:Name="cardBack" Fill="Tan" Stretch="Fill" Tap="cardBack_Tap"&gt;
              &lt;Rectangle.Projection&gt;
                  &lt;PlaneProjection/&gt;
              &lt;/Rectangle.Projection&gt;
              &lt;Rectangle.RenderTransform&gt;
                  &lt;CompositeTransform/&gt;
              &lt;/Rectangle.RenderTransform&gt;
          &lt;/Rectangle&gt;&lt;/Grid&gt;
  
  
  //adding another cell here
  
  
       &lt;Grid x:Name="ContentPanel1" Grid.Row="0" Grid.Column="1"  Margin="12,0,12,0"&gt;
          &lt;Rectangle x:Name="aceSpades1"  Fill="Aqua" Stretch="Fill" Tap="cardBack_Tap" Visibility="Collapsed"&gt;
              &lt;Rectangle.RenderTransform&gt;
                  &lt;CompositeTransform/&gt;
              &lt;/Rectangle.RenderTransform&gt;
              &lt;Rectangle.Projection&gt;
                  &lt;PlaneProjection/&gt;
              &lt;/Rectangle.Projection&gt;
          &lt;/Rectangle&gt;
          &lt;Rectangle x:Name="cardBack1"  Fill="Brown" Stretch="Fill" Tap="cardBack_Tap"&gt;
              &lt;Rectangle.Projection&gt;
                  &lt;PlaneProjection/&gt;
              &lt;/Rectangle.Projection&gt;
              &lt;Rectangle.RenderTransform&gt;
                  &lt;CompositeTransform/&gt;
              &lt;/Rectangle.RenderTransform&gt;
          &lt;/Rectangle&gt;
      &lt;/Grid&gt;
  
    &lt;!--  &lt;Grid x:Name="ContentPane3" Grid.Row="1" Grid.Column="0"  Margin="12,0,12,0"&gt;
          ......
          ...... (untill how many cells we wish to have)
      &lt;/Grid&gt;--&gt;
  &lt;/Grid&gt;
  </code></pre>
  
  <p></p>
  
  <p>But if i add up like that, i end up with huge lines and I am not sure if this is the way to add. I wanted to check if there is any way to add the same using c# code. </p>
  
  <p>I can add the child Grid views manually though, but not sure how to add the Visualstatemanager objects using code and attach the same to the story board. </p>
  
  <p>Please Help.</p>