Windows Phone 8.1 Transitions

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 provided 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 which provides stunning results for very little effort.

SlideNavigationTransitionInfo

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

Sliding page navigation

Sliding page navigation

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.

CommonNavigationTransitionInfo

Roll in from the right page navigation

ContinuumNavigationTransitionInfo

ContinuumNavigationTransitionInfo is a very short zoom-in navigation transition. This is a useful transition if you’re wanting 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.

ContinuumNavigationTransitionInfo

Short zoom-in page navigation

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 post, 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:

Fly In Content

Fly In Content

You can download the page transition sample code here: NavigationTransitionSample

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

Join the discussion 7 Comments

  • Kamil says:

    Very good job thank you

  • Erik hoeksma says:

    Great article James! One question though and perhaps you know the answer: I’ve got these nice transitions working now, but if a user navigates BACK, the transitions aren’t inverted. Basically if the user goes to a new page with the SlideNavigationTransitionInfo, I’d like my user to navigate back with an inverted slide (so the page basically slides back down).

    Do you know where this is possible?

  • Vasile says:

    While the transition is performed, we can also notice in the animations on this site that there is still the black blackground. Can that be made white?

    • Vasile says:

      I actually investigated a bit more and thought that a Frame element handles the pages. So changing the Background to the desired color provided me with the desired result. I performed the changes in App.xaml.cs file where the Frame is initialized.

  • anilkumar says:

    Really helped, Nice one

  • Royden Rego says:

    Nice, really helped for what I was looking for.

Leave a comment