How to animate page navigation in Windows Phone 8?

In Windows Phone 8, the developers generally use the NavigationService.Navigate method to navigate from one page to another. By default, this does not include any kind of animation or transition when navigating.

How to animate page navigation in Windows Phone 8?

To animate page navigation in windows phone 8, you should download the Windows Phone Toolkit which is available for download from phone.codeplex.com

The Windows Phone Toolkit includes the navigation transitions which can be included to the page by following the below steps.

1. In the app.xaml.cs, the RootFrame should be instantiates with the TransitionFrame

RootFrame = new TransitionFrame();

2. In the App.xaml , page include the namespace

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

3. Include the Navigation transition animation in the XAML or via designer. The code for the NavigationInTrainsition looks like below.

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

4. You are done. When you navigate from one page to another in windows phone, you should see the transitions applied.