Using Windows Phone Toolkit Transitions

The following steps outline how to add page transitions to your app:

1. Add the Windows Phone Toolkit library to your project via NuGet by opening the package manager console. In Visual Studio select Tools/Library Package Manager/Package Manager Console. At the PM prompt, enter the following command:

Install-Package WPtoolkit

If you receive an error message indicating that the wptoolkit package does not support Windows Phone version 8.0, you need to install the latest version of NuGet from www.nuget.org.

2. Replace the default PhoneApplicationFrame with a TransitionFrame from the Windows Phone Toolkit. To replace your app’s standard PhoneApplicationFrame, modify the App class, either in XAML or in the code-beside, and set the custom frame as the application’s RootVisual.

The following excerpt shows how the App.xaml file can be modified to use a Windows Phone Toolkit TransitionFrame:

Click here to view code image

<Application.RootVisual>
    <toolkit:TransitionFrame x:Name="RootFrame"
                             Navigated="RootFrame_Navigated"
                             Navigating="RootFrame_Navigating"
                             NavigationFailed="RootFrame_NavigationFailed">
            <!-- Content omitted. -->
    </toolkit:TransitionFrame>
    <!-- Content omitted. -->
</Application.RootVisual>

If the RootVisual is assigned in the App.xaml.cs file, as is the case by default, modify the InitializedPhoneApplication method to assign the TransitionFrame, as shown in the following excerpt:

void InitializePhoneApplication()
{
    if (phoneApplicationInitialized)
    {
        return;
    }

    RootFrame = new TransitionFrame();

    // Content omitted.
}

3. In the page that you want to add a transition effect, add the toolkit namespace definition as shown:

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

4. Associate a transition with each navigation event by adding the TransitionService.NavigationInTransition and NavigationOutTransition attached properties to the page, as shown in the following excerpt:

Click here to view code image

<phone:PhoneApplicationPage
    ...
    xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls; assembly=Microsoft.Phone.Controls.Toolkit">

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

    <!-- Content omitted. -->

</phone:PhoneApplicationPage>

At this point, a turnstile animation will be applied to the page when navigating to and from the page.

You can view the transition effect by uncommenting the toolkit:TransitionFrame element in the App.xaml file in the WPUnleashed.Examples project. Then launch the downloadable sample, and tap the TransitionPage1 page in the PageOrientation section.