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.

Share

About Jesse Liberty

Jesse Liberty is an independent consultant and programmer with three decades of experience writing and delivering software projects. He is the author of 2 dozen books and multiple Pluralsight courses, and has been 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 Xamarin Certified Mobile Developer and a Xamarin MVP, Microsoft MVP and Telerik 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

  1. Damir says:

    Its great tool, but correction, sugegstions and glossary is not working ! I see them on the back end, but not on site translation.I tried enter correction from front end (the site) and i don’t see them on back end and not on the site.I try to enter then from back end (Google translate manager) I don’t see them on the site translation.Help is needed, because my site get very bad translation to Hebrew.I tried to publish my corrections and glossary, nothing is working !and a word to all those that can’t open their staff.the translation manager has been moved, so if you try to open sugegstions, etc. from link you saved,you get an error.Look again for link from Google search, and update your bookmarks.

  2. Vince McGowan says:

    Very simple and elegant. But I’ve run into a situation when the transition is on a page where I use the toolkit LongListSelector. I copied the code from the toolkit example for the selector and when I navigate to the detail page for the selection, I get the transition, but there is a flash of a panel with the PhoneAccentColor. Any ideas how to inhibit this behavior? Thanks for the blog – read it regularly and you are a great help.

  3. Phil Cole says:

    Yup. It really is that simple. But, how about how to roll your own transitions? Don’t see many tutorials on doing that. Never-the-less. Thanks for sharing. 🙂

Leave a Reply

Your email address will not be published.