Utilizing Page Transition Animations in Windows Phone 8.1 Apps

Windows Phone 8 developers will be familiar with having to either make their own page transitions or using third-party kits like WPToolkit or Telerik's RadControls to offer transition effects when navigating between pages. Windows Phone 8.1 runtime apps have that covered for you though and here's how you can add them into your upgraded apps.

Transitions in Windows Phone 8.1 runtime apps are all created in your view's XAML, meaning that you have nothing extra to do than fiddle around with the default transitions in the SDK until you're happy with the results.

As part of your view, if you've created a page from one of the extended templates provided, you may have noticed these lines of XAML at the top of your view:

<Page.Transitions>
    <TransitionCollection>
        <NavigationThemeTransition>
            <NavigationThemeTransition.DefaultNavigationTransitionInfo>
                <SlideNavigationTransitionInfo/>
            </NavigationThemeTransition.DefaultNavigationTransitionInfo>
        </NavigationThemeTransition>
    </TransitionCollection>
</Page.Transitions>

These are the lines of code that simply turn your static Windows Phone app into a live, flowing application that provides stunning results for very little effort.

SlideNavigationTransitionInfo

Since I've already provided an example of a transition that you can use, I will describe it to you. SlideNavigationTransitionInfo, as the name says, provides a sliding navigation transition. Using it will result in this transition in your app:



CommonNavigationTransitionInfo

CommonNavigationTransitionInfo provides the “common” navigation transition that you see when you first launch an app on your phone. It's that roll in from the right transition and replacing the “SlideNavigationTransitionInfo” in the XAML above with “CommonNavigationTransitionInfo” will result in this animation.



ContinuumNavigationTransitionInfo

ContinuumNavigationTransitionInfo is a very short zoom-in navigation transition. This is a useful transition to navigate pages that drill into information or for when the act of the navigation is to bring something to the front of the app.



As well as these page navigation transitions, you can also specify transitions for content on your page. Although I will go through these in a later article, here's a quick look at how to manipulate your content on entering a page.

<Grid VerticalAlignment="Center" HorizontalAlignment="Center">
    <Grid.ChildrenTransitions>
        <TransitionCollection>
            <EntranceThemeTransition FromHorizontalOffset="480" />
        </TransitionCollection>
    </Grid.ChildrenTransitions>

    <TextBlock Style="{StaticResource SubheaderTextBlockStyle}" Text="Transitioned."/>
</Grid>

This will result in the following animation on your content:



You can download the page transition sample code from the attached file.

Check back in tomorrow for a look at more you can do transitions with your content and how you can improve your app's quality.