Awesome Open Source
Awesome Open Source

Updates: Published NuGet Package.

Animation Navigation Page

Override the default Page Transitions for Xamarin.Forms when calling PushAsync and PopAsync.

Using the AnimationNavPage we can demonstrate how to create a custom transition between different pages.

Android iOS


  • Set Animation Duration.
  • Select Animation type (Empty, Push, Fade, Flip, Slide, Roll, Rotate).
  • Select Animation Subtype (Default, FromLeft, FromRight, FromTop, FromBottom).


Support platforms

  • [x] Android
  • [x] iOS


Setting-up and using the component happens in 3 steps:

  1. Install nuget package for PCL/Net.Standard, IOS and Android projects
  2. Declare AnimationNavigationPage
  3. Create and Animation page


Download the package from

Next, add 'FormsControls.Touch.Main.Init()' into AppDelegate.cs of your Xamarin.iOS Project:

public partial class AppDelegate : Xamarin.Forms.Platform.iOS.FormsApplicationDelegate
    public override bool FinishedLaunching(UIApplication app, NSDictionary options)
        LoadApplication(new App());
        return base.FinishedLaunching(app, options);

Finaly, add 'FormsControls.Droid.Main.Init()' into MainActivity.cs of your Xamarin Droid Project:

public class MainActivity : Xamarin.Forms.Platform.Android.FormsAppCompatActivity
    protected override void OnCreate(Bundle bundle)
        TabLayoutResource = Resource.Layout.Tabbar;
        ToolbarResource = Resource.Layout.Toolbar;
        Xamarin.Forms.Forms.Init(this, bundle);
        LoadApplication(new App());


In your App, declare your new main page as follows:

public class App : Application
        public App()
            MainPage = new AnimationNavigationPage(new StartPage());


There are 3 ways to create an Animation Page:

  1. Implement the IAnimationPage interface
  2. Use XAML Tags - No Binding
  3. Use XAML Tags - With Binding

OPTION 1 - Implement the IAnimationPage interface

Firstly, add the interface declaration to your class definition as follows:

public partial class InterfaceImplementedPage : ContentPage, IAnimationPage 

Next, add the following code to the class:

public IPageAnimation PageAnimation { get; } = new FlipPageAnimation { Duration = AnimationDuration.Long, Subtype = AnimationSubtype.FromTop };

public void OnAnimationStarted(bool isPopAnimation)
	// Put your code here but leaving empty works just fine

public void OnAnimationFinished(bool isPopAnimation)
	// Put your code here but leaving empty works just fine

Note that depending on the type of transition you want, you can change FlipPageAnimation into SlidePageAnimation, FadePageAnimation… or whichever animation you require. Further configuration such as Duration and Subtype can be easily done.

OPTION 2 - Use XAML no Binding

Firstly, make sure that the code behind inherits from AnimationPage:

public partial class XamlNoBindingPage : AnimationPage

Next, use the 'controls:AnimationPage' tag instead of the 'ContentPage' tag as follows:

<controls:AnimationPage xmlns="" 
    Title="XAML No Binding">

Lastly, we must declare a tag in the page to specify which transition we would like to use:

   <controls:RotatePageAnimation Duration="Medium" Subtype="FromLeft" />

Notice that here we are declaring a RotatePageAnimation but again we can pick whatever Animation we want. Properties are also available to further customize the animation (duration, subtype…).

After this you are now able to configure your page as you would in a normal content page.


The component allows you to bind the PageAnimation property. To do this declare the 'controls:AnimationPage' as follows:

<controls:AnimationPage xmlns="" 
    Title="XAML With Binding"
    PageAnimation="{Binding MyPageAnimation}">

In this case Your ViewModel should then have a ‘MyPageAnimation’ property defined. We are using Fody so our simplified code looks like this:

public IPageAnimation MyPageAnimation { get; set; }

This property can then be set in the following way:

MyPageAnimation = new SlidePageAnimation()
  	Duration = AnimationDuration.Long,
	Subtype = AnimationSubtype.FromTop

Again, we can use different types of animations and further configure the properties.

So, there you have it. A simple example on how to set-up Custom Transitions using 3 different implementation techniques.

Enjoy and any question or improvements, please let me know.

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
C Sharp (277,106
Android (41,700
Ios (19,612
Animation (5,235
Xamarin (1,779
Xamarin Forms (1,253
Android Xamarin (2
Ios Xamarin (2
Related Projects