Windows Phone 8.1 Page transitions

original: http://www.visuallylocated.com/post/2014/06/24/Page-transitions-and-animations-in-Windows-Phone-Runtime.aspx

With the release of Windows Phone 8.1 Runtime (aka XAML) comes a lot of functionality that previously only existed in the Windows Phone Toolkit or other third party control suites. One of these are page transitions and animations on objects. In Windows Phone 8 apps your best option for page transitions was the Windows Phone Toolkit or Telerik. I’ve used both, but really enjoy the robustness and ease of use of Teleriks transitions. With Teleriks RadTransitionControl you could setup forward and backward animations with three lines of XAML! Contrast that with the Windows Phone Toolkit where it takes 20 lines of XAML!! Because I like Teleriks transitions this post will cover moving from the Windows Phone Toolkit or the Teleriks transitions to the new transitions in the Windows Phone Runtime.

In both the Windows Phone Toolkit and Telerik you had to set the RootFrame of the App to be the control suite transition frame.

// Default

RootFrame = new PhoneApplicationFrame();

// WP Toolkit

RootFrame = new TransitionFrame();

// Telerik

RootFrame = new RadPhoneApplicationFrame();

With Windows Phone Runtime apps you do not need to do anything. When you create a new phone project, everything will be setup so that every page will show a turnstile transition! The transitions are setup within the RootFrame_FirstNavigated method,

rootFrame.ContentTransitions = this.transitions ?? new TransitionCollection() { new NavigationThemeTransition() };

Note: It is important to set the ContentTransitions of the frame. If this is null your app can crash while trying to navigate.

This sets up your app to show the NavigationThemeTransition. This is a “generic” transition that can be used all by itself. With this one line of code, every page you navigate to will use a turnstile transition!

The NavigationThemeTransition has a property, DefaultNavigationTransitionInfo, that specifies what transition to use for the page. There are three default classes that can be used, CommonNavigationTransitionInfo, SlideNavigationTransitionInfo. and ContinuumNavigationTransitionInfo. Setting up a page to use one of these is pretty simple.

<Page.Transitions>

    <TransitionCollection>

        <NavigationThemeTransition>

            <NavigationThemeTransition.DefaultNavigationTransitionInfo>

                <SlideNavigationTransitionInfo/>

            </NavigationThemeTransition.DefaultNavigationTransitionInfo>

        </NavigationThemeTransition>

    </TransitionCollection>

</Page.Transitions>

I’m not going to show how the WPToolkit or Telerik equivalent for the transitions as it would be too much.

The CommonNavigationTransitionInfo is the default NavigationTransitionInfo. It states that the page will use the turnstile transition. The CommonNavigationTransitionInfo also allows you to specify that a feather (aka stagger) page transitionshould be used. SlideNavigationTransitionInfo states that the page will use a slide transition that will animate from bottom to top when navigating in and top to bottom when navigating out. Finally, the ContinuumNavigationTransitionInfo allows you to show a “Fly away” transition like when tapping an email in the mail app. I’ll go into this in another post as well.

Along with the NavigationThemeTransition, there are other transitions that can be used for pages. The PaneThemeTransition and EdgeUIThemeTransition provide exactly the same functionality. They both allow you to use a slide transition, but to specify which edge to slide the content in from, and out to.

<TransitionCollection>

    <PaneThemeTransition Edge="Bottom" />

</TransitionCollection>

The EntranceThemeTransition is pretty cool because it allows you specify the horizontal and vertical offset that the page should navigate from. This means you can slide your page in diagonally.

<TransitionCollection>

    <EntranceThemeTransition FromVerticalOffset="200" FromHorizontalOffset="200" />

</TransitionCollection>

Those are the basic page transitions for pages. One really awesome thing that you can do with the new transitions is create what I call partial and complex transitions. This technique requires that you do not set a default transition to the root frames ContentTransitions like is done by default. You still need to create a new TransitionCollection, but do not put anything in it! With a partial or complex transition, you will [most likely] not set a transition for the page. Instead you will place transitions on the ChildrenTransitions of individual panels. The example below uses the EdgeUIThemeTransition is a sample of what I call a “complex transition”. It  slides items in from alternating sides.

<StackPanel Margin="0,0,0,9.5">

    <StackPanel.ChildrenTransitions>

        <TransitionCollection>

            <EdgeUIThemeTransition Edge="Right"/>

        </TransitionCollection>

    </StackPanel.ChildrenTransitions>

    <TextBlock Text="Item One" Style="{ThemeResource BodyTextBlockStyle}"/>

</StackPanel>

<StackPanel Margin="0,0,0,9.5">

    <StackPanel.ChildrenTransitions>

        <TransitionCollection>

            <EdgeUIThemeTransition Edge="Left"/>

        </TransitionCollection>

    </StackPanel.ChildrenTransitions>

    <TextBlock Text="Item Two" Style="{ThemeResource BodyTextBlockStyle}"/>

</StackPanel>

<StackPanel Margin="0,0,0,9.5">

    <StackPanel.ChildrenTransitions>

        <TransitionCollection>

            <EdgeUIThemeTransition Edge="Right"/>

        </TransitionCollection>

    </StackPanel.ChildrenTransitions>

    <TextBlock Text="Item Three" Style="{ThemeResource BodyTextBlockStyle}"/>

</StackPanel>

Aside from page transitions, there are some awesome animations that can be used on items. One exciting animation is tilt. Tilt is enabled on all “clickable” items by default (eg: Button, ListViewItem)! This is exciting because previously you had to set this yourself. There are a few ways to enable tilt on non-clickable items, read this post to find out more. Another awesome animation is the slide in animation that you get when changing PivotItems within a Pivot. This is a staggered slide that you get for each line of an item. Enabling this requires setting the SlideInAnimationGroup on each element you want to stagger sliding.

<DataTemplate>

    <StackPanel Margin="0,0,0,9.5">

        <TextBlock Pivot.SlideInAnimationGroup="1"

                   Text="{Binding Title}"

                   Style="{ThemeResource ListViewItemTextBlockStyle}"

                   Margin="0,0,19,0"/>

        <TextBlock Pivot.SlideInAnimationGroup="2" 

                   Text="{Binding Description}"

                   TextWrapping="WrapWholeWords"

                   Style="{ThemeResource ListViewItemContentTextBlockStyle}"

                   Margin="0,0,19,0"/>

    </StackPanel>

</DataTemplate>

I have noticed a weird bug with this animation in which items do not slide in when first changing pivot items. Keep this in mind when testing.

Another handy animation is the AddDeleteThemeTransition. With this transition, when an item is added it will open a space and be inserted into that space. When an item is removed, the item will go away and then the content will slide up in its place. This transition is already enabled on the ListView and GridView.

<ItemsControl ItemsSource="{Binding Items}" 

              ItemTemplate="{StaticResource ItemsTemplate}">

    <ItemsControl.ItemContainerTransitions>

        <TransitionCollection>

            <AddDeleteThemeTransition/>

        </TransitionCollection>

    </ItemsControl.ItemContainerTransitions>

</ItemsControl>