If you see any in-built application on Windows Phone 7, you would notice nice transition effects when navigating from one page to another. These transitions certainly improves the overall user experience of the application.

When you create a new Windows Phone 7 Application using Visual Studio 2010 or Blend, you do not get theses nice transitions in your application.

For this, you would need to add a reference to the Microsoft.Phone.Controls.Toolkit.dll in your project. Once this is done, you would need to use the Transition Service in every page that you want to have the transition effect.

xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
<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>

Copy the above XAML and paste it in your Page, preferebly at the end.

This would enable the tranitions for this page.  Now if you would like thses transitions to work automatically, without any additional code you woudl need to set the Root visual Transition Frame rather than the Page Application Frame.

RootFrame = new TransitionFrame();

There are three  five transitions available in the toolkit:

  • Turnstile Transition
  • Swivel Transition
  • Slide Transition
  • Roll Transition
  • Rotate Transition
You can use any one of them in your application, however just make sure that there is some consistency in all the transitions that you have provided in your application.
You can download the entire source code from code plex.
UPDATE
For more details on each of these transitions, please read my post Page Transitions in Windows Phone 7 – Part 2
Related Links
Advertisements

3 thoughts on “Page Transitions in Windows Phone 7

  1. Nice article. But you missed the part where you have to declare the toolkit namespace in the xaml:
    xmlns:toolkit=”clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit”

Leave a Reply to Faraz Azhar Cancel reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s