Create Resource for each RenderTransform
Add Frame Control into your Page and Set Transforms in TransformGroups
Use Your Resource as a Storyboard in FrameWithinGrid_ContentRendered Event
<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);
}
Can you post your CenterConverter class?
ReplyDeletehalf through the animation is loads the second frame.
ReplyDeletethis means when sliding out the first frame, you see it change to the second
Delete