Using Page Animations


Animation between Page navigation is very simple and completely defined by design in xaml. There are currently the following animations available but everyone can create custom animations by subclassing the PageAnimation class:


  • FadeAnimation
    simply fades a page in or out.
  • SwingAnimation
    Swings a page at the left edge in or out.
  • TurnstileAnimation
    Swings a page with a listbox in or out by delaying each item in the listbox.
  • ListDetailAnimation
    Used to transition from a selected item in a listbox page to a details page as seen in WP7 at the emails –> details transition.

  • SlideAnimation
    Used to transition from or to a page where the page slides up or down and fades in, while the previous page is still visible.
  • SnapshotAnimation
    This is actually no animation, but prepares the SlideAnimation to be navigated to and back from to have a “snapshot” of the current page.

To add Animation to page navigation, you don’t need to write code, you only need to  add a xaml description at design time as followed:
first, add the namespaces


to your page and then you can insert the following code:

        <odc:TurnstileAnimation SwingMode="SwingOut" ItemDelay="0:0:0.05" /> 
        <odc:ListDetailAnimation Duration="0:0:0.20" Source="/DetailPage2.xaml" /> 


In this example, we specified the animation of the page when it navigates from and to other pages:

when the page navigates from/to  DetailsPage2.xaml, it uses the ListDetailAnimation with a duration of 200 milliseconds, otherwise the TurnstileAnimation is used to navigate between any other page type since the Source property is left empty. Every PageTransition has some dedicated properties. For instance, TurnstileAnimation offers a SwingMode where you can specify whether to swing in or out. There is also the ItemDelay which describes how each listbox item delays before it starts to swing.

In the example below, we used a page with a listbox for the ListDetailAnimation, and therefore the initial Behavor property was set to “List”. In the following scenario, we specify the ListDetailAnimation again, but now for the detail page:


        <odc:ListDetailAnimation Behavior="Detail" Duration="0:0:0.2" TitleName="ApplicationTitle" DetailToYOffset="500" /> 

As you see, the Behavior is now set to “Detail” and there are the new TitleName property which specifies the name of the visual to be animated to it’s target place when the page is navigating to, and the DetailToYOffset property which describes the initial Y-Offset of the title to animate.


within PageTransitionService, you can specify various PageAnimates for individual transitions depending on the target where to navigate to or from. It is even possible to use different animations for navigating to and navigating from a page as the following example illustrates:

        <odc:FadeAnimation Mode="Show" /> 
        <odc:SwingAnimation Mode="Hide" /> 


In this scenario, The page uses a FadeAnimation when it is navigated from another page (shown), and a SwingAnimation when it navigates to another page (hides).

Last edited Oct 26, 2010 at 1:34 AM by Tom69, version 4


No comments yet.