Animated navigation in Universal Apps
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!