Animating Page Transitions in Xamarin Forms

When developing mobile applications, having a good UI/UX is one of the most important things. One way we can help with our UX by having smooth transitions between pages. Xamarin Forms uses the default standard transition navigation:

But what if you want to go further? And do some of those cool transition animations that the community is doing?

Achieving this is easy when using the awesome NuGet package by Giampaolo Gabba Xamarin.Plugin.SharedTransitions.

Let’s do it step by step

The animation that is shown above is the result of the example we are going to do Step by Step. It has two pages (HomePage and DetailPage), when selecting an item from the HomePage list, it will navigate to the DetailPage.

1. Install the NuGet package SharedTransitions in each of our Xamarin projects.

2. Use SharedTransitionNavigationPage for Navigation

When navigating, instead of using the default NavigationPage you will use this one:

Ex.

Prism Ex:

If you are using Prism you must register the SharedTransitionNavigationPage, and use it when navigating:

NOTE: If you check my code on Github you will see that I created a subclass of SharedTransitionNavigationPage (CustomTransitionNavPage) and registered it and used it instead of using the SharedTransitionNavigationPage that’s because I wanted to add some extra logic to make the NavigationBar translucent.

3. Specify the Animation/Duration/Group on the page from where you navigate.

On the page from where you navigate (HomePage) you must specify three main attached properties:

TransitionSelectedGroup: Unique group used to associate transition groups in dynamic lists. (It can be the Id of the element selected)
TransitionDuration: Duration in milliseconds of the shared transition.
BackgroundAnimation: It supports 6 types of animations (Fade, Flip, SlideFromLeft, SlideFromRight, SlideFromTop and SlideFromBottom)

4. Add the name and the group to the element you want to animate in the page from where you navigate (HomePage).

You must specify two main properties:

Transition.Name: The name of the transition used to associate views between pages.
Transition.Group: A unique identifier of the item (If you are using a list, it can be the id)

Check the full view Here.

5. Add the Navigation to the page you are navigating to and set the TransitionSelectedGroup property.

Before Navigating make sure to set the TransitionSelectedGroup (Specified in Step 3).

Since I’m using Prism and I’m doing the Navigation in the ViewModel I have a SelectedPlaceId property to set the value when selecting an item of the list, but if you are not using any framework, you can do it in the code behind and set the value directly.

Check the full ViewModel here.

5. On the DetailPage add the same id used in Step 4 as TransitionName to the same element type

Full Detail Page here and Full ViewModel here.

IMPORTANT: For this example, I also added some logic to make the NavigationPage translucent, therefore you don’t see the Navigation Bar in the git. If you want this same behavior here is the extra code I added:

–