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 )
        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.



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

            Mode="BackwardIn" />
            Mode="ForwardIn" />
            Mode="BackwardOut" />
            Mode="ForwardOut" />

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 Pluralsight & LinkedIn Learning courses. 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 Xamarin Certified Mobile Developer and a Xamarin MVP and 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.