Home » Software Development » Creating Page Transitions in Windows Phone

About Punit Ganshani

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.

Leave a Reply

Your email address will not be published. Required fields are marked *

*