Let’s explore different ways to animate the navigation across Frames in an Universal App. These animations are called Transitions, and UWP provides a few kinds to choose from.

We will see how easy it is to create a transition coming out from and going back to a left edge of the screen. With some extra code, we will create transitions that look like continuous scrolling in one direction. Finally, we will see demo videos of all transitions.

Explore the source code and run the demo app yourself!

Basic transition

To add an animated transition to your page, just pass in a type of the transition to Page.Transitions. UWP invokes the animation behind the scenes when you’re navigating to and from the page.

<!-- <Page -->
    <Page.Transitions>
        <TransitionCollection>
            <EntranceThemeTransition />
        </TransitionCollection>
    </Page.Transitions>

UWP provides a few implementations of Windows.UI.Xaml.Media.Animation.Transition that you can plug into TransitionCollection. Some implementations are more suitable for page navigation than others, and some of them allow you to pass in a parameter that further customizes the behavior. You can see all implementations below.

Directional animation

If a page always comes out from one edge and returns there afterwards, it’s the easiest to pass in transition’s parameters through xaml.

Here, the red popup page uses EdgeUIThemeTransition associated with the left edge.

<Page.Transitions>
    <TransitionCollection>
        <EdgeUIThemeTransition Edge="Left" />
    </TransitionCollection>
</Page.Transitions>

Some transitions play exceptionally nice with others. Here, we are navigating between PaneThemeTransition and EdgeUIThemeTransition in the popup.

Continuous swiping animation

Transitions are not aware of direction of navigation. You can pass in a parameter into the Navigate method which you can later access in OnNavigatedTo and OnNavigatingFrom methods.

To implement scrolling in the same direction for both to and from animations, you will need to inverese the direction of one of the animations.

First, pass in an optional parameter to the Navigate method to indicate the animation direction.

// In the navigation logic
bool navigatingRight = true;
Frame rootFrame = Window.Current.Content as Frame;
rootFrame.Navigate(typeof(MyView), parameter: navigatingRight);

Now, add code that adjusts the transition’s property just before the animation plays.

Notice that properties in from animation are opposites of these in to animation. This way, the page won’t return to its initial position, but will simulate animation in one direction.

// in MyView.xaml.cs
public sealed partial class MyView : Page
{
    protected override void OnNavigatedTo(NavigationEventArgs e)
    {
        if (!(e.Parameter is bool))
            return;
        bool navigatingRight = (bool)e.Parameter;

        EntranceAnimation.FromHorizontalOffset = navigatingRight ? 300 : -300;
    }

    protected override void OnNavigatingFrom(NavigatingCancelEventArgs e)
    {
        if (!(e.Parameter is bool))
            return;
        bool navigatingRight = (bool)e.Parameter;
        
        EntranceAnimation.FromHorizontalOffset = navigatingRight ? -300 : 300;
    }
}

Finally, give a name to the transition, so that you can access it from the C# code.

<!-- in MyView.xaml -->
    <EntranceThemeTransition x:Name="EntranceAnimation" />

or use it without the name:

// in MyView.xaml.cs
    var entranceAnimation = this.Transitions.FirstOrDefault() as EntranceThemeTransition;
    entranceAnimation.FromHorizontalOffset = navigatingRight ? -300 : 300;

Voilà!

All screen captures that demonstrate navigation left and right use this code.

Demo of all transitions

Check out the source code and see the animations in high fidelity. The code is using reflection to find implementations of Windows.UI.Xaml.Media.Animation.Transition

AddDeleteThemeTransition

ContentThemeTransition

EdgeThemeTransition

EntranceThemeTransition

PaneThemeTransition

PopupThemeTransition

ReorderThemeTransition

RepositionThemeTransition

NavigationThemeTransition

Cheers!