Windows Phone 8: How to animate page navigation?

Question

I am new to Win Phone 8 development and after a tiresome unfruitful Googling, I am posting this simple question here:

How to animate page navigation?

Yes, I know how to navigate from one page to another:

NavigationService.Navigate(new Uri("/AnotherPage.xaml", UriKind.Relative));

But this navigation is instant, and doesn't include any kind of transition. Please help SO!

Answer 1

Install the Windows Phone Toolkit using Nuget: https://nuget.org/packages/WPtoolkit.

In app.xaml.cs:

RootFrame = new TransitionFrame();

Then, in your page XAML:

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

and

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