wpf 动画

<UserControl
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk" xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions" mc:Ignorable="d"
x:Class="FlipDemo.MainPage"
Width="640" Height="480">

<Grid x:Name="LayoutRoot" DataContext="{Binding Source={StaticResource SampleDataSource}}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="VisualStateGroup">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:3"/>
<VisualTransition GeneratedDuration="0:0:3" To="ToFront">
<Storyboard>
<DoubleAnimation Duration="0:0:0.9" To="0.25" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" Storyboard.TargetName="dataGrid"/>
<DoubleAnimation Duration="0:0:0.9" To="0.25" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="dataGrid"/>
<DoubleAnimation BeginTime="0:0:1" Duration="0:0:0.4" To="-180" Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationY)" Storyboard.TargetName="dataGrid"/>
<DoubleAnimation BeginTime="0:0:1.2" Duration="0" To="-10" Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.GlobalOffsetZ)" Storyboard.TargetName="dataGrid"/>
<DoubleAnimation BeginTime="0:0:1.5" Duration="0:0:1.5" To="1" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" Storyboard.TargetName="canvas"/>
<DoubleAnimation BeginTime="0:0:1.5" Duration="0:0:1.5" To="1" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="canvas"/>
<DoubleAnimation BeginTime="0:0:1" Duration="0:0:0.4" To="-360" Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationY)" Storyboard.TargetName="canvas"/>
</Storyboard>
</VisualTransition>
<VisualTransition From="ToFront" GeneratedDuration="0:0:3">
<Storyboard>
<DoubleAnimation BeginTime="0:0:1.5" Duration="0:0:1.5" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="dataGrid"/>
<DoubleAnimation BeginTime="0:0:1.5" Duration="0:0:1.5" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" Storyboard.TargetName="dataGrid"/>
<DoubleAnimation BeginTime="0:0:1.5" Duration="0:0:1.5" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="dataGrid"/>
<DoubleAnimation BeginTime="0:0:1" Duration="0:0:0.5" Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationY)" Storyboard.TargetName="dataGrid"/>
<DoubleAnimation BeginTime="0:0:1.1" Duration="0:0:0.2" Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.GlobalOffsetZ)" Storyboard.TargetName="dataGrid"/>
<DoubleAnimation Duration="0:0:0.9" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" Storyboard.TargetName="canvas"/>
<DoubleAnimation Duration="0:0:0.9" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="canvas"/>
<DoubleAnimation BeginTime="0:0:1" Duration="0:0:0.5" Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationY)" Storyboard.TargetName="canvas"/>
</Storyboard>
</VisualTransition>
</VisualStateGroup.Transitions>
<VisualState x:Name="Normal"/>
<VisualState x:Name="ToFront">
<Storyboard>
<DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="dataGrid" d:IsOptimized="True"/>
<DoubleAnimation Duration="0" To="0.25" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" Storyboard.TargetName="dataGrid" d:IsOptimized="True"/>
<DoubleAnimation Duration="0" To="0.25" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="dataGrid" d:IsOptimized="True"/>
<DoubleAnimation Duration="0" To="-180" Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationY)" Storyboard.TargetName="dataGrid" d:IsOptimized="True"/>
<DoubleAnimation Duration="0" To="-10" Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.GlobalOffsetZ)" Storyboard.TargetName="dataGrid" d:IsOptimized="True"/>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" Storyboard.TargetName="canvas" d:IsOptimized="True"/>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="canvas" d:IsOptimized="True"/>
<DoubleAnimation Duration="0" To="-360" Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationY)" Storyboard.TargetName="canvas" d:IsOptimized="True"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Black" Offset="0"/>
<GradientStop Color="#FF3080D8" Offset="1"/>
</LinearGradientBrush>
</Grid.Background>
<Canvas x:Name="canvas" Margin="66,65,60,90" RenderTransformOrigin="0.5,0.5">
<Canvas.Projection>
<PlaneProjection RotationY="-180"/>
</Canvas.Projection>
<Canvas.RenderTransform>
<CompositeTransform ScaleX="0.25" ScaleY="0.25"/>
</Canvas.RenderTransform>
<Canvas.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF14C4DE" Offset="0"/>
<GradientStop Color="#FF0A4249" Offset="0.996"/>
</LinearGradientBrush>
</Canvas.Background>
<sdk:Calendar Canvas.Left="43" Canvas.Top="23"/>
</Canvas>
<sdk:DataGrid x:Name="dataGrid" Margin="66,65,60,90" AutoGenerateColumns="False" ItemsSource="{Binding Collection}" RenderTransformOrigin="0.5,0.5">
<sdk:DataGrid.Projection>
<PlaneProjection/>
</sdk:DataGrid.Projection>
<sdk:DataGrid.RenderTransform>
<CompositeTransform/>
</sdk:DataGrid.RenderTransform>
<sdk:DataGrid.Columns>
<sdk:DataGridTextColumn Binding="{Binding Address}" Header="Address"/>
<sdk:DataGridTextColumn Binding="{Binding Company}" Header="Company"/>
<sdk:DataGridTextColumn Binding="{Binding Email}" Header="Email"/>
<sdk:DataGridTextColumn Binding="{Binding Name}" Header="Name"/>
<sdk:DataGridTextColumn Binding="{Binding Tel}" Header="Tel"/>
</sdk:DataGrid.Columns>
</sdk:DataGrid>
<StackPanel Height="49" Margin="166,0,163,0" VerticalAlignment="Bottom" Orientation="Horizontal" Background="#FF434740">
<Button Content="查看日期" Height="32" Margin="56,0,0,0" Width="74" VerticalAlignment="Center" HorizontalAlignment="Left">
<i:Interaction.Triggers>
<i:EventTrigger EventName="Click">
<ei:GoToStateAction StateName="ToFront"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</Button>
<Button Content="查看信息" Height="31" Margin="71,0,55,0" Width="68" RenderTransformOrigin="0.64,1.967" HorizontalAlignment="Center" VerticalAlignment="Center">
<i:Interaction.Triggers>
<i:EventTrigger EventName="Click">
<ei:GoToStateAction StateName="Normal"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</Button>
</StackPanel>
</Grid>
</UserControl>