<Window x:Class="CustomControlsClient.FlipPanelAlternateTemplate"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="FlipPanelAlternateTemplate" Height="300" Width="300"
 xmlns:lib="clr-namespace:CustomControls;assembly=CustomControls" >
    <Window.Resources>
        <ControlTemplate x:Key="AlternateTemplate" TargetType="lib:FlipPanel">
            <Grid>
                <VisualStateManager.VisualStateGroups>
                    <VisualStateGroup x:Name="ViewStates">                    

                        <VisualState x:Name="Normal">
                            <Storyboard>
                                <DoubleAnimation Storyboard.TargetName="FrontContentTransform"
                       Storyboard.TargetProperty="ScaleY" To="1" ></DoubleAnimation>

                                <DoubleAnimation Storyboard.TargetName="FrontContentEffect" 
                       Storyboard.TargetProperty="Radius" To="0" ></DoubleAnimation>

                                <DoubleAnimation Storyboard.TargetName="BackContentTransform"
                       Storyboard.TargetProperty="ScaleY" To="0" ></DoubleAnimation>

                                <DoubleAnimation Storyboard.TargetName="BackContentEffect" 
                       Storyboard.TargetProperty="Radius" To="30" ></DoubleAnimation>
                            </Storyboard>
                        </VisualState>

                        <VisualState x:Name="Flipped">
                            <Storyboard>
                                <DoubleAnimation Storyboard.TargetName="FrontContentTransform"
                       Storyboard.TargetProperty="ScaleY" To="0" ></DoubleAnimation>

                                <DoubleAnimation Storyboard.TargetName="FrontContentEffect" 
                       Storyboard.TargetProperty="Radius" To="30" ></DoubleAnimation>

                                <DoubleAnimation Storyboard.TargetName="BackContentTransform"
                       Storyboard.TargetProperty="ScaleY" To="1" ></DoubleAnimation>

                                <DoubleAnimation Storyboard.TargetName="BackContentEffect" 
                       Storyboard.TargetProperty="Radius" To="0" ></DoubleAnimation>
                            </Storyboard>
                        </VisualState>
                    </VisualStateGroup>
                </VisualStateManager.VisualStateGroups>



                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"></RowDefinition>
                    <RowDefinition Height="Auto"></RowDefinition>
                </Grid.RowDefinitions>

                <!-- This is the front content. -->
                <Border BorderBrush="{TemplateBinding BorderBrush}"
               BorderThickness="{TemplateBinding BorderThickness}"
               CornerRadius="{TemplateBinding CornerRadius}"
                            Background="{TemplateBinding Background}" 
               >
                    <Border.RenderTransform>
                        <ScaleTransform x:Name="FrontContentTransform"></ScaleTransform>
                    </Border.RenderTransform>
                    <Border.Effect>
                        <BlurEffect x:Name="FrontContentEffect" Radius="0"></BlurEffect>
                    </Border.Effect>

                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition></RowDefinition>
                            <RowDefinition Height="Auto"></RowDefinition>
                        </Grid.RowDefinitions>
                        <ContentPresenter
                     Content="{TemplateBinding FrontContent}">
                        </ContentPresenter>

                        <Rectangle Grid.Row="1" Stretch="Fill" Fill="LightSteelBlue"></Rectangle>
                        <ToggleButton Grid.Row="1" x:Name="FlipButton" Margin="5" Padding="15,0" 
                             Content="˄" FontWeight="Bold" FontSize="12" HorizontalAlignment="Right">
                        </ToggleButton>
                    </Grid>

                </Border>

                <!-- This is the back content. -->
                <Border BorderBrush="{TemplateBinding BorderBrush}"
           BorderThickness="{TemplateBinding BorderThickness}"
           CornerRadius="{TemplateBinding CornerRadius}"
           Background="{TemplateBinding Background}" RenderTransformOrigin="0,1">
                    <Border.RenderTransform>
                        <ScaleTransform x:Name="BackContentTransform" ScaleY="0"></ScaleTransform>
                    </Border.RenderTransform>
                    <Border.Effect>
                        <BlurEffect x:Name="BackContentEffect" Radius="30"></BlurEffect>
                    </Border.Effect>

                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"></RowDefinition>
                            <RowDefinition></RowDefinition>
                        </Grid.RowDefinitions>

                        <Rectangle Stretch="Fill" Fill="LightSteelBlue"></Rectangle>
                        <ToggleButton x:Name="FlipButtonAlternate" Margin="5" Padding="15,0" 
                             Content="˅" FontWeight="Bold" FontSize="12" HorizontalAlignment="Right">
                        </ToggleButton>

                        <ContentPresenter Grid.Row="1"
                     Content="{TemplateBinding BackContent}">
                        </ContentPresenter>

                    </Grid>

                </Border>

            </Grid>

        </ControlTemplate>
    </Window.Resources>

    <Grid x:Name="LayoutRoot" Background="White">
        <lib:FlipPanel x:Name="panel" BorderBrush="DarkOrange" BorderThickness="3" CornerRadius="4" Margin="10" 
           Template="{StaticResource AlternateTemplate}">
            <lib:FlipPanel.FrontContent>
                <StackPanel Margin="6">
                    <TextBlock TextWrapping="Wrap" Margin="3" FontSize="16" Foreground="DarkOrange">This is the front side of the FlipPanel.</TextBlock>
                    <Button Margin="3" Padding="3" Content="Button One"></Button>
                    <Button Margin="3" Padding="3" Content="Button Two"></Button>
                    <Button Margin="3" Padding="3" Content="Button Three"></Button>
                    <Button Margin="3" Padding="3" Content="Button Four"></Button>
                </StackPanel>
            </lib:FlipPanel.FrontContent>
            <lib:FlipPanel.BackContent>
                <Grid Margin="6">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"></RowDefinition>
                        <RowDefinition></RowDefinition>
                    </Grid.RowDefinitions>
                    <TextBlock TextWrapping="Wrap" Margin="3" FontSize="16" Foreground="DarkMagenta">This is the back side of the FlipPanel.</TextBlock>
                    <Button Grid.Row="2" Margin="3" Padding="10" Content="Flip Back to Front" HorizontalAlignment="Center" VerticalAlignment="Center" Click="cmdFlip_Click"></Button>
                </Grid>
            </lib:FlipPanel.BackContent>
        </lib:FlipPanel>
    </Grid>
</Window>
