Tuesday, July 10, 2012

Page Transition within Frame in WPF

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);
  } 

3 comments:

  1. Can you post your CenterConverter class?

    ReplyDelete
  2. half through the animation is loads the second frame.

    ReplyDelete
    Replies
    1. this means when sliding out the first frame, you see it change to the second

      Delete