Beautiful Page Transitions (Practically) Free

Windows Phone Tutorial

I don’t just mean you don’t pay for the code, or the control, I mean we’re talking about 2 minutes of effort.  No joke.

Step 1 is to download the November Windows Phone Toolkit and install it

Step 2 is to create a new application with two pages.  Add a button to the first page and in the click even handler for the button navigate to page 2,

private void button1_Click( object sender, RoutedEventArgs e )
{
    NavigationService.Navigate( 
        new Uri( "/Page2.xaml", UriKind.Relative ) );
}

Run the application and note that the transition between page 1 and 2 is instantaneous and does not have that nice Metro feel to it.

Now, make three changes.  First, in App.xaml.cs locate

RootFrame = new PhoneApplicationFrame();

and replace it with

RootFrame = new TransitionFrame();

Second, at the top of both pages place this namespace definition.

Note, if you drag any control from the toolkit onto your page, the system will generate this namespace definition for you automatically.

xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;
   assembly=Microsoft.Phone.Controls.Toolkit">

Finally, add the following Xaml to each page (above the LayoutRoot),

<toolkit:TransitionService.NavigationInTransition>
   <toolkit:NavigationInTransition>
      <toolkit:NavigationInTransition.Backward>
         <toolkit:TurnstileTransition
            Mode="BackwardIn" />
      </toolkit:NavigationInTransition.Backward>
      <toolkit:NavigationInTransition.Forward>
         <toolkit:TurnstileTransition
            Mode="ForwardIn" />
      </toolkit:NavigationInTransition.Forward>
   </toolkit:NavigationInTransition>
</toolkit:TransitionService.NavigationInTransition>
<toolkit:TransitionService.NavigationOutTransition>
   <toolkit:NavigationOutTransition>
      <toolkit:NavigationOutTransition.Backward>
         <toolkit:TurnstileTransition
            Mode="BackwardOut" />
      </toolkit:NavigationOutTransition.Backward>
      <toolkit:NavigationOutTransition.Forward>
         <toolkit:TurnstileTransition
            Mode="ForwardOut" />
      </toolkit:NavigationOutTransition.Forward>
   </toolkit:NavigationOutTransition>
</toolkit:TransitionService.NavigationOutTransition>

Run the application. You should see a much nicer transition now between your first and second page.  That’s really all there is to it.

You can of course use the toolkit to create other kinds of transitions, and even your own transitions, but here you have beautiful Metro-style transitions with 2 minutes effort.