Custom Page Transitions in Xamarin Forms when using ContentPage

Question

I am creating a xamarin forms app and i want to change the transition when navigating between pages. I couldnt use https://components.xamarin.com/view/customnavpage because im using ContentPage. I also read the famous thread on xamarin forums but nothing worked for me. here is the link.

https://forums.xamarin.com/discussion/18818/custom-page-transitions-with-xamarin-forms

i'm using xamarin forms 2.3.4.247 and android api level 25 and appCompat 23.3.0.

any idea?

Currently there is no way to customize page transition in Xamarin.Forms. — Elvis Xia - MSFT

pouyada pouyada · Accepted Answer · 2017-11-07T10:05:09

I found a workaround and I answer my own question maybe it helps someone else. First we need to create a custom renderer for any platform(in this case android) . create a new class under your Renderers folder in Droid target.

CustomTransitionsRenderer.cs

[assembly:ExportRenderer(typeof(NavigationPage),typeof(CustomTransitionsRenderer))]
namespace TesarSmartwatchForms.Droid.Renderers
{
public class CustomTransitionsRenderer : Xamarin.Forms.Platform.Android.AppCompat.NavigationPageRenderer
{
    //SwitchContentAsync
    protected override void SetupPageTransition(Android.Support.V4.App.FragmentTransaction transaction, bool isPush)
    {
        if (isPush)
            transaction.SetCustomAnimations(Resource.Animator.move_in_left, 0);
        else //prevView enter:
            transaction.SetCustomAnimations(Resource.Animator.side_in_right, 0);
    }
}
}

and then add your custom animations under Droid>Resources>animator like these:

move_in_left.xml

<?xml version="1.0" encoding="UTF-8" ?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/accelerate_interpolator">
    <translate
    android:fromXDelta="-100%p"
    android:toXDelta="0"
    android:duration="300"/>
</set>

and slide_in_right.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/linear_interpolator">

    <translate
    android:fromXDelta="100%p"
    android:toXDelta="0"
    android:duration="300" />
</set>

then we need to modify our android theme just adding this line

<item name="android:windowBackground">@android:color/transparent</item>

and remember to navigate between pages with the default navigation transition, just like this

Navigation.PushAsync(page);

Custom Page Transitions in Xamarin Forms when using ContentPage

1 Answers