aistudio-wpf-diagram/AIStudio.Wpf.DiagramDesigner.Additionals/Controls/Flipper.xaml

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"                   
                    xmlns:controls="clr-namespace:AIStudio.Wpf.DiagramDesigner.Additionals.Controls"
                    xmlns:converter="clr-namespace:AIStudio.Wpf.DiagramDesigner.Additionals.Converters">

    <converter:CardClipConverter x:Key="CardClipConverter" />
    <converter:Object2VisibilityConverter x:Key="Object2VisibilityConverter"/>
    
    <SineEase x:Key="FlipEase" EasingMode="EaseInOut" />

    <Style x:Key="FlipperStyle" TargetType="{x:Type controls:Flipper}">
        <Setter Property="Background" Value="Transparent" />
        <Setter Property="Focusable" Value="False"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type controls:Flipper}">
                    <Border x:Name="Border">
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="FlipStates">
                                <VisualStateGroup.Transitions>
                                    <VisualTransition From="Unflipped" To="Flipped">
                                        <Storyboard FillBehavior="HoldEnd">
                                            <DoubleAnimationUsingKeyFrames Duration="0:0:0.4" Storyboard.TargetProperty="RotationY" Storyboard.TargetName="PART_Plane3D">
                                                <EasingDoubleKeyFrame Value="0" KeyTime="0:0:0.0" EasingFunction="{StaticResource FlipEase}" />
                                                <EasingDoubleKeyFrame Value="-90" KeyTime="0:0:0.2" EasingFunction="{StaticResource FlipEase}" />
                                                <EasingDoubleKeyFrame Value="90" KeyTime="0:0:0.2" EasingFunction="{StaticResource FlipEase}" />
                                                <EasingDoubleKeyFrame Value="0" KeyTime="0:0:0.4" EasingFunction="{StaticResource FlipEase}" />
                                            </DoubleAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames  Storyboard.TargetProperty="Visibility" Storyboard.TargetName="BackContentPresenter">
                                                <DiscreteObjectKeyFrame Value="{x:Static Visibility.Visible}" KeyTime="0:0:0.2" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames  Storyboard.TargetProperty="Visibility" Storyboard.TargetName="FrontContentPresenter">
                                                <DiscreteObjectKeyFrame Value="{x:Static Visibility.Collapsed}" KeyTime="0:0:0.2" />
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualTransition>
                                    <VisualTransition From="Flipped" To="Unflipped">
                                        <Storyboard FillBehavior="HoldEnd">
                                            <DoubleAnimationUsingKeyFrames Duration="0:0:0.4" Storyboard.TargetProperty="RotationY" Storyboard.TargetName="PART_Plane3D">
                                                <EasingDoubleKeyFrame Value="0" KeyTime="0:0:0.0" EasingFunction="{StaticResource FlipEase}" />
                                                <EasingDoubleKeyFrame Value="90" KeyTime="0:0:0.2" EasingFunction="{StaticResource FlipEase}" />
                                                <EasingDoubleKeyFrame Value="-90" KeyTime="0:0:0.2" EasingFunction="{StaticResource FlipEase}" />
                                                <EasingDoubleKeyFrame Value="0" KeyTime="0:0:0.4" EasingFunction="{StaticResource FlipEase}" />
                                            </DoubleAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames  Storyboard.TargetProperty="Visibility" Storyboard.TargetName="BackContentPresenter">
                                                <DiscreteObjectKeyFrame Value="{x:Static Visibility.Collapsed}" KeyTime="0:0:0.2" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames  Storyboard.TargetProperty="Visibility" Storyboard.TargetName="FrontContentPresenter">
                                                <DiscreteObjectKeyFrame Value="{x:Static Visibility.Visible}" KeyTime="0:0:0.2" />
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualTransition>
                                </VisualStateGroup.Transitions>

                                <VisualState x:Name="Unflipped">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames  Storyboard.TargetProperty="Visibility" Storyboard.TargetName="BackContentPresenter">
                                            <DiscreteObjectKeyFrame Value="{x:Static Visibility.Collapsed}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames  Storyboard.TargetProperty="Visibility" Storyboard.TargetName="FrontContentPresenter">
                                            <DiscreteObjectKeyFrame Value="{x:Static Visibility.Visible}" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Flipped">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames  Storyboard.TargetProperty="Visibility" Storyboard.TargetName="BackContentPresenter">
                                            <DiscreteObjectKeyFrame Value="{x:Static Visibility.Visible}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames  Storyboard.TargetProperty="Visibility" Storyboard.TargetName="FrontContentPresenter">
                                            <DiscreteObjectKeyFrame Value="{x:Static Visibility.Collapsed}" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <controls:Plane3D x:Name="PART_Plane3D" RotationY="0" ZFactor="2.055">
                            <Grid>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition/>
                                    <RowDefinition Height="Auto"/>
                                </Grid.RowDefinitions>
                                <Border x:Name="Bg" Grid.RowSpan="3" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                                        BorderBrush="{TemplateBinding BorderBrush}" 
                                        BorderThickness="{TemplateBinding BorderThickness}"
                                        Background="{TemplateBinding Background}" 
                                        Padding="{TemplateBinding Padding}"/>

                                <Border BorderThickness="0,0,0,1" Visibility="{TemplateBinding Header, Converter={StaticResource Object2VisibilityConverter}}" BorderBrush="{TemplateBinding BorderBrush}">
                                    <ContentPresenter ContentSource="Header" ContentTemplate="{TemplateBinding HeaderTemplate}" ContentTemplateSelector="{TemplateBinding HeaderTemplateSelector}" ContentStringFormat="{TemplateBinding HeaderStringFormat}"/>
                                </Border>

                                <ContentPresenter Grid.Row="1" x:Name="FrontContentPresenter"                    
                                                      Margin="{TemplateBinding Padding}"                            
                                                      Content="{TemplateBinding FrontContent}" 
                                                      ContentTemplate="{TemplateBinding FrontContentTemplate}" 
                                                      ContentTemplateSelector="{TemplateBinding FrontContentTemplateSelector}" 
                                                      ContentStringFormat="{TemplateBinding FrontContentStringFormat}"
                                                      RenderTransformOrigin=".5,.5" />
                                <ContentPresenter Grid.Row="1" x:Name="BackContentPresenter"                    
                                                      Visibility="Collapsed"
                                                      Margin="{TemplateBinding Padding}"                            
                                                      Content="{TemplateBinding BackContent}" 
                                                      ContentTemplate="{TemplateBinding BackContentTemplate}" 
                                                      ContentTemplateSelector="{TemplateBinding BackContentTemplateSelector}" 
                                                      ContentStringFormat="{TemplateBinding BackContentStringFormat}"
                                                      RenderTransformOrigin=".5,.5" />


                                <Border Grid.Row="2" BorderThickness="0,1,0,0"  Visibility="{TemplateBinding Footer, Converter={StaticResource Object2VisibilityConverter}}" BorderBrush="{TemplateBinding BorderBrush}">
                                    <ContentPresenter ContentSource="Footer" ContentTemplate="{TemplateBinding FooterTemplate}" ContentTemplateSelector="{TemplateBinding FooterTemplateSelector}" ContentStringFormat="{TemplateBinding FooterStringFormat}"/>
                                </Border>
                            </Grid>
                        </controls:Plane3D>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style BasedOn="{StaticResource FlipperStyle}" TargetType="{x:Type controls:Flipper}"/>
</ResourceDictionary>