How to Perform a Card Flip Animation

Question

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 http://blogs.msdn.com/b/kevinash/archive/2011/12/21/flipping-card-animation-for-windows-phone-7-using-expression-blend.aspx 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.

MainPage.xaml

<phone:PhoneApplicationPage.Resources>
    <Storyboard x:Name="Storyboard1">
        <PointAnimation Duration="0:0:2" To="0.5,0.5" Storyboard.TargetProperty="(UIElement.RenderTransformOrigin)" Storyboard.TargetName="cardBack" d:IsOptimized="True"/>
        <DoubleAnimation Duration="0:0:2" To="90" Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationY)" Storyboard.TargetName="cardBack" d:IsOptimized="True"/>
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationY)" Storyboard.TargetName="aceSpades">
            <EasingDoubleKeyFrame KeyTime="0:0:2" Value="90"/>
            <EasingDoubleKeyFrame KeyTime="0:0:4" Value="0"/>
        </DoubleAnimationUsingKeyFrames>
        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="aceSpades">
            <DiscreteObjectKeyFrame KeyTime="0:0:2">
                <DiscreteObjectKeyFrame.Value>
                    <Visibility>Visible</Visibility>
                </DiscreteObjectKeyFrame.Value>
            </DiscreteObjectKeyFrame>
        </ObjectAnimationUsingKeyFrames>
    </Storyboard>
</phone:PhoneApplicationPage.Resources>

<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="VisualStateGroup">
            <VisualState x:Name="FlipCard" >
                <Storyboard >
                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationX)" Storyboard.TargetName="cardBack">
                        <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                        <EasingDoubleKeyFrame KeyTime="0:0:1" Value="0"/>
                    </DoubleAnimationUsingKeyFrames>
                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationY)" Storyboard.TargetName="cardBack">
                        <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                        <EasingDoubleKeyFrame KeyTime="0:0:1" Value="90"/>
                    </DoubleAnimationUsingKeyFrames>
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="aceSpades">
                        <DiscreteObjectKeyFrame KeyTime="0:0:1">
                            <DiscreteObjectKeyFrame.Value>
                                <Visibility>Visible</Visibility>
                            </DiscreteObjectKeyFrame.Value>
                        </DiscreteObjectKeyFrame>
                    </ObjectAnimationUsingKeyFrames>
                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationY)" Storyboard.TargetName="aceSpades">
                        <EasingDoubleKeyFrame KeyTime="0:0:1" Value="90"/>
                        <EasingDoubleKeyFrame KeyTime="0:0:2" Value="0"/>
                    </DoubleAnimationUsingKeyFrames>
                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationZ)" Storyboard.TargetName="cardBack">
                        <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                        <EasingDoubleKeyFrame KeyTime="0:0:1" Value="0"/>
                    </DoubleAnimationUsingKeyFrames>
                </Storyboard>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <!--TitlePanel contains the name of the application and page title-->
    <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
        <TextBlock x:Name="ApplicationTitle" Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/>
        <TextBlock x:Name="PageTitle" Text="flipping card" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
    </StackPanel>

    <!--ContentPanel - place additional content here-->
    <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
        <Image x:Name="aceSpades" Margin="55,20,51,37" Source="AceSpades.png" Stretch="Fill" Visibility="Collapsed">
            <Image.RenderTransform>
                <CompositeTransform/>
            </Image.RenderTransform>
            <Image.Projection>
                <PlaneProjection/>
            </Image.Projection>
        </Image>
        <Image x:Name="cardBack" Margin="55,20,51,37" Source="CardBack.png" Stretch="Fill" Tap="cardBack_Tap">
            <Image.Projection>
                <PlaneProjection/>
            </Image.Projection>
            <Image.RenderTransform>
                <CompositeTransform/>
            </Image.RenderTransform>
        </Image></Grid>
</Grid>

MainPage.xaml.cs

public MainPage()
    {
        InitializeComponent();
    }

    private void cardBack_Tap(object sender, System.Windows.Input.GestureEventArgs e)
    {
        VisualStateManager.GoToState(this,"FlipCard",true);
    }

Answer 1

Too complicated methods! There is plane projection pane in VS and Expression Blend. You need just to set 180 degrees and thats it.

Sample:

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
        <Rectangle x:Name="rectangle" Fill="#FF2525CD" HorizontalAlignment="Left" Height="221" Margin="207,182,0,0" Stroke="Black" VerticalAlignment="Top" Width="145">
            <Rectangle.Projection>
                <PlaneProjection/>
            </Rectangle.Projection>
        </Rectangle>

    </Grid>

States:

<VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="VisualStateGroup">
            <VisualStateGroup.Transitions>
                <VisualTransition GeneratedDuration="0:0:0.5"/>
            </VisualStateGroup.Transitions>
            <VisualState x:Name="NotFliped"/>
            <VisualState x:Name="Fliped">
                <Storyboard>
                    <DoubleAnimation Duration="0" To="-180" Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationY)" Storyboard.TargetName="rectangle" d:IsOptimized="True"/>
                </Storyboard>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>

And thats it