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!

Solution 1

You could use the navigational transitions from the toolkit. http://phone.codeplex.com/

Solution 2

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>

Comments

[Christian Graf]

as seen on geekchamp.com/articles/… ;) works for Wp8, too

[Abbas]

This is definitly the better answer, should be THE answer.

[Misters]

how do I set a duration? its too fast :p

[trydis]

@Misters: You can download the source code from Codeplex and change them. The storyboards are defined here: phone.codeplex.com/SourceControl/…