Create Resource for each RenderTransform
<Window.Resources>
<!-- Slide and Fade -->
<Storyboard x:Key="SlideAndFadeIn">
<ThicknessAnimation Duration="0:0:.75"
Storyboard.TargetProperty="Margin"
From="500,0,-500,0"
To="0"
DecelerationRatio=".9" />
<DoubleAnimation Duration="0:0:.25"
Storyboard.TargetProperty="Opacity"
From="0"
To="1" />
</Storyboard>
<Storyboard x:Key="SlideAndFadeOut">
<ThicknessAnimation Duration="0:0:.5"
Storyboard.TargetProperty="Margin"
To="-500,0,500,0"
AccelerationRatio=".9" />
<DoubleAnimation Duration="0:0:.5"
Storyboard.TargetProperty="Opacity"
To="0" />
</Storyboard>
<!-- Fade -->
<Storyboard x:Key="FadeIn">
<DoubleAnimation Duration="0:0:.25"
Storyboard.TargetProperty="Opacity"
From="0"
To="1" />
</Storyboard>
<Storyboard x:Key="FadeOut">
<DoubleAnimation Duration="0:0:.5"
Storyboard.TargetProperty="Opacity"
To="0" />
</Storyboard>
<!-- Slide -->
<Storyboard x:Key="SlideIn">
<ThicknessAnimation Duration="0:0:.75"
Storyboard.TargetProperty="Margin"
From="500,0,-500,0"
To="0"
DecelerationRatio=".9" />
</Storyboard>
<Storyboard x:Key="SlideOut">
<ThicknessAnimation Duration="0:0:.5"
Storyboard.TargetProperty="Margin"
To="-500,0,500,0"
AccelerationRatio=".9" />
</Storyboard>
<!-- Grow -->
<Storyboard x:Key="GrowIn">
<DoubleAnimation Storyboard.TargetProperty="(RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)"
From="0"
To="1"
Duration="0:0:.75"
DecelerationRatio=".9" />
<DoubleAnimation Storyboard.TargetProperty="(RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)"
From="0"
To="1"
Duration="0:0:.75"
DecelerationRatio=".9" />
</Storyboard>
<Storyboard x:Key="GrowOut">
<DoubleAnimation Storyboard.TargetProperty="(RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)"
To="0"
Duration="0:0:.75"
AccelerationRatio=".9" />
<DoubleAnimation Storyboard.TargetProperty="(RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)"
To="0"
Duration="0:0:.75"
AccelerationRatio=".9" />
</Storyboard>
<!-- Grow and Fade -->
<Storyboard x:Key="GrowAndFadeIn">
<DoubleAnimation Storyboard.TargetProperty="(RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)"
From="0"
To="1"
Duration="0:0:.75"
DecelerationRatio=".9" />
<DoubleAnimation Storyboard.TargetProperty="(RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)"
From="0"
To="1"
Duration="0:0:.75"
DecelerationRatio=".9" />
<DoubleAnimation Duration="0:0:.25"
Storyboard.TargetProperty="Opacity"
From="0"
To="1" />
</Storyboard>
<Storyboard x:Key="GrowAndFadeOut">
<DoubleAnimation Storyboard.TargetProperty="(RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)"
To="0"
Duration="0:0:.75"
AccelerationRatio=".9" />
<DoubleAnimation Storyboard.TargetProperty="(RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)"
To="0"
Duration="0:0:.75"
AccelerationRatio=".9" />
<DoubleAnimation Duration="0:0:.75"
Storyboard.TargetProperty="Opacity"
To="0" />
</Storyboard>
<!-- Flip -->
<Storyboard x:Key="FlipIn">
<DoubleAnimation Storyboard.TargetProperty="(RenderTransform).(TransformGroup.Children)[1].(SkewTransform.AngleX)"
From="-100"
To="0"
Duration="0:0:.75"
DecelerationRatio=".9" />
<DoubleAnimation Storyboard.TargetProperty="(RenderTransform).(TransformGroup.Children)[1].(SkewTransform.AngleY)"
From="-100"
To="0"
Duration="0:0:.75"
DecelerationRatio=".9" />
</Storyboard>
<Storyboard x:Key="FlipOut">
<DoubleAnimation Storyboard.TargetProperty="(RenderTransform).(TransformGroup.Children)[1].(SkewTransform.AngleX)"
To="100"
Duration="0:0:.75"
AccelerationRatio=".9" />
<DoubleAnimation Storyboard.TargetProperty="(RenderTransform).(TransformGroup.Children)[1].(SkewTransform.AngleY)"
To="100"
Duration="0:0:.75"
AccelerationRatio=".9" />
</Storyboard>
<!-- Flip and Fade -->
<Storyboard x:Key="FlipAndFadeIn">
<DoubleAnimation Storyboard.TargetProperty="(RenderTransform).(TransformGroup.Children)[1].(SkewTransform.AngleX)"
From="-100"
To="0"
Duration="0:0:.75"
DecelerationRatio=".9" />
<DoubleAnimation Storyboard.TargetProperty="(RenderTransform).(TransformGroup.Children)[1].(SkewTransform.AngleY)"
From="-100"
To="0"
Duration="0:0:.75"
DecelerationRatio=".9" />
<DoubleAnimation Duration="0:0:.25"
Storyboard.TargetProperty="Opacity"
From="0"
To="1" />
</Storyboard>
<Storyboard x:Key="FlipAndFadeOut">
<DoubleAnimation Storyboard.TargetProperty="(RenderTransform).(TransformGroup.Children)[1].(SkewTransform.AngleX)"
To="100"
Duration="0:0:.75"
AccelerationRatio=".9" />
<DoubleAnimation Storyboard.TargetProperty="(RenderTransform).(TransformGroup.Children)[1].(SkewTransform.AngleY)"
To="100"
Duration="0:0:.75"
AccelerationRatio=".9" />
<DoubleAnimation Duration="0:0:.75"
Storyboard.TargetProperty="Opacity"
To="0" />
</Storyboard>
<!-- Spin -->
<Storyboard x:Key="SpinIn">
<DoubleAnimation Storyboard.TargetProperty="(RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)"
From="-360"
To="0"
Duration="0:0:.75"
DecelerationRatio=".9" />
<DoubleAnimation Storyboard.TargetProperty="(RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)"
From="0"
To="1"
Duration="0:0:.75"
DecelerationRatio=".9" />
<DoubleAnimation Storyboard.TargetProperty="(RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)"
From="0"
To="1"
Duration="0:0:.75"
DecelerationRatio=".9" />
</Storyboard>
<Storyboard x:Key="SpinOut">
<DoubleAnimation Storyboard.TargetProperty="(RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)"
To="360"
Duration="0:0:.75"
AccelerationRatio=".9" />
<DoubleAnimation Storyboard.TargetProperty="(RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)"
To="0"
Duration="0:0:.75"
AccelerationRatio=".9" />
<DoubleAnimation Storyboard.TargetProperty="(RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)"
To="0"
Duration="0:0:.75"
AccelerationRatio=".9" />
</Storyboard>
<!-- Spin and Fade -->
<Storyboard x:Key="SpinAndFadeIn">
<DoubleAnimation Storyboard.TargetProperty="(RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)"
From="-360"
To="0"
Duration="0:0:.75"
DecelerationRatio=".9" />
<DoubleAnimation Storyboard.TargetProperty="(RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)"
From="0"
To="1"
Duration="0:0:.75"
DecelerationRatio=".9" />
<DoubleAnimation Storyboard.TargetProperty="(RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)"
From="0"
To="1"
Duration="0:0:.75"
DecelerationRatio=".9" />
<DoubleAnimation Duration="0:0:.25"
Storyboard.TargetProperty="Opacity"
From="0"
To="1" />
</Storyboard>
<Storyboard x:Key="SpinAndFadeOut">
<DoubleAnimation Storyboard.TargetProperty="(RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)"
To="360"
Duration="0:0:.75"
AccelerationRatio=".9" />
<DoubleAnimation Storyboard.TargetProperty="(RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)"
To="0"
Duration="0:0:.75"
AccelerationRatio=".9" />
<DoubleAnimation Storyboard.TargetProperty="(RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)"
To="0"
Duration="0:0:.75"
AccelerationRatio=".9" />
<DoubleAnimation Duration="0:0:.75"
Storyboard.TargetProperty="Opacity"
To="0" />
</Storyboard>
</Window.Resources>
Add Frame Control into your Page and Set Transforms in TransformGroups
<Frame x:Name="FrameWithinGrid"
ContentRendered="FrameWithinGrid_ContentRendered"
Source="Home.xaml">
<Frame.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX="1"
ScaleY="1"
CenterX="{Binding ElementName=FrameWithinGrid, Path=ActualWidth, Converter={StaticResource CenterConverter}}"
CenterY="{Binding ElementName=FrameWithinGrid, Path=ActualHeight, Converter={StaticResource CenterConverter}}" />
<SkewTransform AngleX="0"
AngleY="0"
CenterX="{Binding ElementName=FrameWithinGrid, Path=ActualWidth, Converter={StaticResource CenterConverter}}"
CenterY="{Binding ElementName=FrameWithinGrid, Path=ActualHeight, Converter={StaticResource CenterConverter}}" />
<RotateTransform Angle="0"
CenterX="{Binding ElementName=FrameWithinGrid, Path=ActualWidth, Converter={StaticResource CenterConverter}}"
CenterY="{Binding ElementName=FrameWithinGrid, Path=ActualHeight, Converter={StaticResource CenterConverter}}" />
<TranslateTransform X="0"
Y="0" />
</TransformGroup>
</Frame.RenderTransform>
</Frame>
Use Your Resource as a Storyboard in FrameWithinGrid_ContentRendered Event
private void FrameWithinGrid_ContentRendered(object sender, EventArgs e)
{
Storyboard sb = this.Resources["GrowOut"] as Storyboard;
sb.Completed += new EventHandler(sb_Completed);
sb.Begin(FrameWithinGrid);
}
void sb_Completed(object sender, EventArgs e)
{
Storyboard sb = this.Resources["GrowIn"] as Storyboard;
sb.Begin(FrameWithinGrid);
}