How to do a flip panel?

This is XAML code till now

<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        x:Class="Flip_Panel.MainWindow"
        x:Name="Window"
        Title="MainWindow"
        Width="750"
        Height="550"
        Loaded="Window_Loaded">
    <StackPanel x:Name="Panel">
        <Grid Margin="10"
              x:Name="Flip"
              Height="480"
              Width="750">
            <StackPanel x:Name="Front">
                <Image x:Name="Vinodh_Object"></Image>
            </StackPanel>
            <StackPanel x:Name="Back"
                        Height="480"
                        Width="750">
                <Image x:Name="Thilak_Object"></Image>
            </StackPanel>
        </Grid>
        <Button x:Name="FlipButton"
                Width="100"
                Height="25"
                Content="Flip to Back"
                HorizontalAlignment="Center"
                Margin="0,-50,0,0"></Button>
        <Button x:Name="FlipButton1"
                Width="100"
                Height="25"
                Content="Flip to Front"
                HorizontalAlignment="Center"
                Margin="0,-50,0,0"></Button>
    </StackPanel>
</Window>

Now When the f开发者_StackOverflowirst click event occurs I want the panel to flip and then when I again after clicking I want the panel to flip again to show the first image ?

How do i proceed from here on ?

Thanks

I use something that gives the impression of flipping. You'll want to add your own variables names but this might help you get started.

<Storyboard Name="sbFlip"
            x:Key="sbFlip">
    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
                                   Storyboard.TargetName="frontSideContainer"
                                   Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleY)">
        <SplineDoubleKeyFrame KeyTime="00:00:00.2"
                              Value="0" />
    </DoubleAnimationUsingKeyFrames>
    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00.2"
                                   Storyboard.TargetName="backPanel"
                                   Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleY)">
        <SplineDoubleKeyFrame KeyTime="00:00:00.3"
                              Value="1" />
    </DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Name="sbReverse"
            x:Key="sbReverse">
    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
                                   Storyboard.TargetName="backPanel"
                                   Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleY)">
        <SplineDoubleKeyFrame KeyTime="00:00:00.2"
                              Value="0" />
    </DoubleAnimationUsingKeyFrames>
    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00.2"
                                   Storyboard.TargetName="frontSideContainer"
                                   Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleY)">
        <SplineDoubleKeyFrame KeyTime="00:00:00.3"
                              Value="1" />
    </DoubleAnimationUsingKeyFrames>
</Storyboard>

Effectively it's changing the height of one panel and bringing into view another. It will give you a flip effect.

If you want to execute this is C# you could use something like the following:

    public void Flip()
    {
        if (!Reversed)
        {
            Storyboard sbFlip = Resources["sbFlip"] as Storyboard;
            sbFlip.Begin();
            Reversed = true;
        }
        else
        {
            Reversed = false;
            Storyboard sbReverse = Resources["sbReverse"] as Storyboard;
            sbReverse.Begin();
        }
    }