Creating Page Transitions in Windows Phone

Creating page transitions is not difficult at all when you have Silverlight Toolkit available in market. So follow the steps written below

Step 1: Using Silverlight Toolkit

So first download the latest copy of Silverlight Toolkit and follow the steps belowAdd a reference of Microsoft.Phone.Controls.Toolkit in your application

Step 2: Modify App.xaml.cs

Next modify App.xaml.cs to enable loading a page with transitions instead of a normal page.

Find out, this line

RootFrame = new PhoneApplicationFrame();

This has to be replaced by

RootFrame = new Microsoft.Phone.Controls.TransitionFrame();

Step 3: Apply transitions to page

Add the XML name space for toolkit in your page first if it is not already presented:

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

Now, add appropriate transition to your page (not as a resource). Few samples are as shown below:

Example 1: Rotate pages when loading and exiting

<toolkit:TransitionService.NavigationInTransition>
<toolkit:NavigationInTransition>
<toolkit:NavigationInTransition.Backward>
<toolkit:RotateTransition />
</toolkit:NavigationInTransition.Backward>
<toolkit:NavigationInTransition.Forward>
<toolkit:RotateTransition />
</toolkit:NavigationInTransition.Forward>
</toolkit:NavigationInTransition>
</toolkit:TransitionService.NavigationInTransition>
<toolkit:TransitionService.NavigationOutTransition>
<toolkit:NavigationOutTransition>
<toolkit:NavigationOutTransition.Backward>
<toolkit:RotateTransition />
</toolkit:NavigationOutTransition.Backward>
<toolkit:NavigationOutTransition.Forward>
<toolkit:RotateTransition />
</toolkit:NavigationOutTransition.Forward>
</toolkit:NavigationOutTransition>
</toolkit:TransitionService.NavigationOutTransition>

Example 2: Turnstile motion when loading and exiting

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

Step 4: You are done!

Execute your application and see the page transitions working fine!

Reference: Creating Page Transitions in Windows Phone from our NCG partner Punit Ganshani at the Punit Ganshani blog blog.