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.

About Jesse Liberty

Jesse Liberty has three decades of experience writing and delivering software projects and is the author of 2 dozen books and a couple dozen online courses. His latest book, Building APIs with .NET will be released early in 2025. Liberty is a Senior SW Engineer for CNH and he was a Senior Technical Evangelist for Microsoft, a Distinguished Software Engineer for AT&T, a VP for Information Services for Citibank and a Software Architect for PBS. He is a Microsoft MVP.
This entry was posted in Animation, Essentials, Mango, Mini-Tutorial, Patterns & Skills, Toolkit, UI, WindowsPhone and tagged . Bookmark the permalink.

5 Responses to Beautiful Page Transitions (Practically) Free

Comments are closed.