Animating Page Translations in Xamarin Forms


Isn't it fun,

to instantly listen to a blog on the go? PLAY !

 
 

Animating_Page_Translations_in_Xamarin_Forms

Table of Content

Translation

The translation is performed point-to-point. When building an app that requires animation, we need to create a view entirely in C# instead of XAML. For most simple animation sequences, we can use XAML which is what we are going to do here.

First, we create MainPage.XAML in a new Xamarin.Forms project. Now, add square BoxView to the view and give a name. We need to give the BoxView name so it can be accessed in MainPage.XAML.cs file. Add GestureRecognizer which allows us to act after the event has occurred.

In this blog, we will learn Animating Page Translation in xamarin form. Let’s dive into the topic practically.

MainPage.xaml File:



    
        





Now we need to add a new method to MainPage.XAML.cs to perform the actual animation. Open MainPage.XAML.cs and add event handler method.

MainPage.xaml.cs File:
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;

namespace Translation
{
public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
}

private void GestureRecognizer_Tap (object sender, EventArgs e)
{

boxView.TranslationY -= 25;

}
}
}

Now run the application and tap on BoxView.

Output:

Smooth Translation:

The translation was performed point to point translation it does not look very good. When building translation in our app we need to have a smooth translate routine.

In our code behind to use TranslateTo.

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;

namespace Translation
{
public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
}

private void GestureRecognizer_Tap(object sender, EventArgs e)
{
boxView.TranslateTo(0, boxView.TranslationY - 100);
}
}
}

Output:

Slow and Smooth Translation:

This code may be running way too fast for your project and slow down Translation is easy enough to add. In our code behind to use TranslateTo has a default value for length which is the time animation takes in a millisecond.

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;
	
namespace Translation
{
public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
}

private void GestureRecognizer_Tap(object sender, EventArgs e)
{
boxView.TranslateTo(0, boxView.TranslationY - 100, 2000);
}
}
}

Output:



Page Translation

We can create a xamarin form Application. For creating a design view we can create MainView.XAML and write code. When we click on a flip button the screen is flip.

When clicking on the back button it will again and back to the original form.

MainView.xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="TransitionNavigationPage.Views.MainView"
             Title="Transitions">
    <ContentPage.Content>
        <ScrollView>
            <StackLayout>
                <Button
                    Text="Fade"
                    Command="{Binding FadeCommand}"/>
                <Button
                    Text="Flip"
                    Command="{Binding FlipCommand}"/>
                <Button
                    Text="Scale"
                    Command="{Binding ScaleCommand}"/>
                <Button
                    Text="SlideFromLeft"
                    Command="{Binding SlideFromLeftCommand}"/>
                <Button
                    Text="SlideFromRight"
                    Command="{Binding SlideFromRightCommand}"/>
                <Button 
                    Text="SlideFromTop"
                    Command="{Binding SlideFromTopCommand}"/>
                <Button 
                    Text="SlideFromBottom"
                    Command="{Binding SlideFromBottomCommand}"/>
            </StackLayout>
        </ScrollView>
    </ContentPage.Content>
</ContentPage>



MainView.xaml.cs
using TransitionNavigationPage.Enums;
using TransitionNavigationPage.ViewModels;
using Xamarin.Forms;
using Xamarin.Forms.Xaml;
namespace TransitionNavigationPage.Views
{
    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class MainView : ContentPage
    {
        public MainView()
        {
            InitializeComponent();

            BindingContext = new MainViewModel();
        }
        protected override void OnAppearing()
        {
            base.OnAppearing();
            MessagingCenter.Subscribe(this, AppSettings.TransitionMessage, (sender, arg) => 
            {
                var transitionType = (TransitionType)arg;
                var transitionNavigationPage = Parent as Controls.TransitionNavigationPage;

                if (transitionNavigationPage != null)
                {
                    transitionNavigationPage.TransitionType = transitionType;
                    Navigation.PushAsync(new DetailView());
                }
            });
        }

        protected override void OnDisappearing()
        {
            base.OnDisappearing();
            MessagingCenter.Unsubscribe(this, AppSettings.TransitionMessage);
        }
    }
}

DetailView.xaml

When we can click button then go to DetailView.xaml page.


<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="TransitionNavigationPage.Views.DetailView">
    <ContentPage.Content>
        <Grid>
            <Label
                Text="Go back!"
                HorizontalOptions="Center"
                VerticalOptions="Center"/>
        </Grid>
    </ContentPage.Content>
</ContentPage>

MainViewModel.cs
using System.Windows.Input;
using TransitionNavigationPage.Enums;
using Xamarin.Forms;
namespace TransitionNavigationPage.ViewModels
{
    public class MainViewModel : BindableObject
    {
        public ICommand FadeCommand => new Command(Fade);
        public ICommand FlipCommand => new Command(Flip);
        public ICommand ScaleCommand => new Command(Scale);
        public ICommand SlideFromLeftCommand => new Command(SlideFromLeft);
        public ICommand SlideFromRightCommand => new Command(SlideFromRight);
        public ICommand SlideFromTopCommand => new Command(SlideFromTop);
        public ICommand SlideFromBottomCommand => new Command(SlideFromBottom);
        private void Fade()
        {
            MessagingCenter.Send(this, AppSettings.TransitionMessage, TransitionType.Fade);
        }

        private void Flip()
        {
            MessagingCenter.Send(this, AppSettings.TransitionMessage, TransitionType.Flip);
        }

        private void Scale()
        {
            MessagingCenter.Send(this, AppSettings.TransitionMessage, TransitionType.Scale);
        }

        private void SlideFromLeft()
        {
            MessagingCenter.Send(this, AppSettings.TransitionMessage, TransitionType.SlideFromLeft);
        }

        private void SlideFromRight()
        {
            MessagingCenter.Send(this, AppSettings.TransitionMessage, TransitionType.SlideFromRight);
        }

        private void SlideFromTop()
        {
            MessagingCenter.Send(this, AppSettings.TransitionMessage, TransitionType.SlideFromTop);
        }

        private void SlideFromBottom()
        {
            MessagingCenter.Send(this, AppSettings.TransitionMessage, TransitionType.SlideFromBottom);
        }
    }
}


TransitionType.cs
namespace TransitionNavigationPage.Enums
{
    public enum TransitionType
    {
        /// Do not animate the transition.
        None = -1,

        /// Let the OS decide how to animate the transition.
        Default = 0,

        /// Show a fade transition animation.
        Fade = 1,

        /// Show a flip transition animation.
        Flip = 2,

        /// Show a scale transition animation.
         Scale = 3,

        /// Show a slide form left transition animation.
          SlideFromLeft = 4,

        /// Show a slide form right transition animation.
        SlideFromRight = 5,

        /// Show a slide form top transition animation.
        SlideFromTop = 6,

        /// Show a slide form bottom transition animation.
        SlideFromBottom = 7
    }
}

TransitionNavigationPage.cs
using TransitionNavigationPage.Enums;
using Xamarin.Forms;

namespace TransitionNavigationPage.Controls
{
    public class TransitionNavigationPage : NavigationPage
    {
        public static readonly BindableProperty TransitionTypeProperty =
             BindableProperty.Create("TransitionType", typeof(TransitionType), typeof(TransitionNavigationPage), TransitionType.SlideFromLeft);

        public TransitionType TransitionType
        {
            get { return (TransitionType)GetValue(TransitionTypeProperty); }
            set { SetValue(TransitionTypeProperty, value); }
        }

        public TransitionNavigationPage() : base()
        {
        }

        public TransitionNavigationPage(Page root) : base(root)
        {
        }
    }
}

App.xaml.cs
public partial class App: Application
    {
        public App()
        {
            InitializeComponent();

            MainPage = new Controls.TransitionNavigationPage(new MainView());
        }
    }

AppSettings.cs
namespace TransitionNavigationPage
{
    public class AppSettings
    {
        public const string TransitionMessage = "Transition";
    }
}


Planning to Hire Xamarin App Development Company ?

Your Search ends here.


TransitionNavigationPageRenderer.cs
using System.ComponentModel;
using Android.Content;
using Android.Support.V4.App;
using TransitionNavigationPage.Droid.Renderers;
using TransitionNavigationPage.Enums;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android.AppCompat;

[assembly: ExportRenderer(typeof(TransitionNavigationPage.Controls.TransitionNavigationPage), typeof(TransitionNavigationPageRenderer))]
namespace TransitionNavigationPage.Droid.Renderers
{
    public class TransitionNavigationPageRenderer : NavigationPageRenderer
    {
        private TransitionType _transitionType = TransitionType.Default;

        public TransitionNavigationPageRenderer(Context context) : base(context)
        {
        }

        protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
        {
            base.OnElementPropertyChanged(sender, e);

            if (e.PropertyName == Controls.TransitionNavigationPage.TransitionTypeProperty.PropertyName)
                UpdateTransitionType();
        }
        protected override void SetupPageTransition(FragmentTransaction transaction, bool isPush)
        {
            switch (_transitionType)
            {
                case TransitionType.None:
                    return;
                case TransitionType.Default:
                    return;
                case TransitionType.Fade:
                    transaction.SetCustomAnimations(Resource.Animation.fade_in, Resource.Animation.fade_out,
                                                    Resource.Animation.fade_out, Resource.Animation.fade_in);
                    break;
                case TransitionType.Flip:
                    transaction.SetCustomAnimations(Resource.Animation.flip_in, Resource.Animation.flip_out,
                                                    Resource.Animation.flip_out, Resource.Animation.flip_in);
                    break;
                case TransitionType.Scale:
                    transaction.SetCustomAnimations(Resource.Animation.scale_in, Resource.Animation.scale_out,
                                                    Resource.Animation.scale_out, Resource.Animation.scale_in);
                    break;
                case TransitionType.SlideFromLeft:
                    if (isPush)
                    {
                        transaction.SetCustomAnimations(Resource.Animation.enter_left, Resource.Animation.exit_right,
                                                        Resource.Animation.enter_right, Resource.Animation.exit_left);
                    }
                    else
                    {
                        transaction.SetCustomAnimations(Resource.Animation.enter_right, Resource.Animation.exit_left,
                                                        Resource.Animation.enter_left, Resource.Animation.exit_right);
                    }
                    break;
                case TransitionType.SlideFromRight:
                    if (isPush)
                    {
                        transaction.SetCustomAnimations(Resource.Animation.enter_right, Resource.Animation.exit_left,
                                                        Resource.Animation.enter_left, Resource.Animation.exit_right);
                    }

else
                    {
                        transaction.SetCustomAnimations(Resource.Animation.enter_left, Resource.Animation.exit_right,
                                                        Resource.Animation.enter_right, Resource.Animation.exit_left);
                    }
                    break;
                case TransitionType.SlideFromTop:
                    if (isPush)
                    {
                        transaction.SetCustomAnimations(Resource.Animation.enter_top, Resource.Animation.exit_bottom,
                                                        Resource.Animation.enter_bottom, Resource.Animation.exit_top);
                    }
                    else
                    {
                        transaction.SetCustomAnimations(Resource.Animation.enter_bottom, Resource.Animation.exit_top,
                                                        Resource.Animation.enter_top, Resource.Animation.exit_bottom);
                    }
                    break;
                case TransitionType.SlideFromBottom:
                    if (isPush)
                    {
                        transaction.SetCustomAnimations(Resource.Animation.enter_bottom, Resource.Animation.exit_top,
                                                        Resource.Animation.enter_top, Resource.Animation.exit_bottom);
                    }
                    else
                    {
                        transaction.SetCustomAnimations(Resource.Animation.enter_top, Resource.Animation.exit_bottom,
                                                        Resource.Animation.enter_bottom, Resource.Animation.exit_top);
                    }
                    break;
                default:
                    return;
            }
        }

private void UpdateTransitionType()
        {
            var transitionNavigationPage = (Controls.TransitionNavigationPage)Element;
            _transitionType = transitionNavigationPage.TransitionType;
        }
    }
}
Resource.Designer.cs
public static void UpdateIdValues()
		{
			global::Xamarin.Forms.Platform.Android.Resource.Attribute.actionBarSize = global::TransitionNavigationPage.Droid.Resource.Attribute.actionBarSize;
		}
enter_bottom.xml

<?xml version="1.0" encoding="utf-8" ?>
<set xmlns:android="http://schemas.android.com/apk/res/android" 
     android:shareInterpolator="false">
  <translate
      android:fromXDelta="0%" android:toXDelta="0%"
      android:fromYDelta="100%" android:toYDelta="0%"
      android:duration="300" />
</set>

enter_left.xml

<?xml version="1.0" encoding="utf-8" ?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
      android:propertyName="enter_from_left"
    android:shareInterpolator="false">
  <translate
      android:fromXDelta="-100%" android:toXDelta="0%"
      android:fromYDelta="0%" android:toYDelta="0%"
      android:duration="300"/>
</set>

enter_right.xml

<?xml version="1.0" encoding="utf-8" ?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:shareInterpolator="false">
  <translate
      android:fromXDelta="100%" android:toXDelta="0%"
      android:fromYDelta="0%" android:toYDelta="0%"
      android:duration="300" />
</set>

enter_top.xml

<?xml version="1.0" encoding="utf-8" ?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
     android:shareInterpolator="false">
  <translate
      android:fromXDelta="0%" android:toXDelta="0%"
      android:fromYDelta="-100%" android:toYDelta="0%"
      android:duration="300" />
</set>

exit_bottom.xml

<?xml version="1.0" encoding="utf-8" ?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
     android:shareInterpolator="false">
  <translate
      android:fromXDelta="0%" android:toXDelta="0%"
      android:fromYDelta="0%" android:toYDelta="100%"
      android:duration="300" />
</set>

exit_left.xml

<?xml version="1.0" encoding="utf-8" ?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:shareInterpolator="false">
  <translate
      android:fromXDelta="0%" android:toXDelta="-100%"
      android:fromYDelta="0%" android:toYDelta="0%"
      android:duration="300"/>
</set>

exit_right.xml

<?xml version="1.0" encoding="utf-8" ?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:shareInterpolator="false">
  <translate
      android:fromXDelta="100%" android:toXDelta="0%"
      android:fromYDelta="0%" android:toYDelta="0%"
      android:duration="300" />
</set>



exit_top.xml



  



Output:

(Flip)

(Fade)

(Scale)

(Slide from bottom)

(Slide from top)

(Slide from left)

(Slide from right)

Conclusion:

In this blog, we have understood how to use Xamarin Forms Application to use animating page translation. We have used seven ways to translate a page in our application. Here we have created seven buttons in our application. If we click on a flip button, then it will flip the screen and when clicking on the back button it will back to the original form.

Animating Page Translations in Xamarin Forms

Animating_Page_Translations_in_Xamarin_Forms

Table of Content

Translation

The translation is performed point-to-point. When building an app that requires animation, we need to create a view entirely in C# instead of XAML. For most simple animation sequences, we can use XAML which is what we are going to do here.

First, we create MainPage.XAML in a new Xamarin.Forms project. Now, add square BoxView to the view and give a name. We need to give the BoxView name so it can be accessed in MainPage.XAML.cs file. Add GestureRecognizer which allows us to act after the event has occurred.

In this blog, we will learn Animating Page Translation in xamarin form. Let’s dive into the topic practically.

MainPage.xaml File:



    
        





Now we need to add a new method to MainPage.XAML.cs to perform the actual animation. Open MainPage.XAML.cs and add event handler method.

MainPage.xaml.cs File:
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;

namespace Translation
{
public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
}

private void GestureRecognizer_Tap (object sender, EventArgs e)
{

boxView.TranslationY -= 25;

}
}
}

Now run the application and tap on BoxView.

Output:

Smooth Translation:

The translation was performed point to point translation it does not look very good. When building translation in our app we need to have a smooth translate routine.

In our code behind to use TranslateTo.

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;

namespace Translation
{
public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
}

private void GestureRecognizer_Tap(object sender, EventArgs e)
{
boxView.TranslateTo(0, boxView.TranslationY - 100);
}
}
}

Output:

Slow and Smooth Translation:

This code may be running way too fast for your project and slow down Translation is easy enough to add. In our code behind to use TranslateTo has a default value for length which is the time animation takes in a millisecond.

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;
	
namespace Translation
{
public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
}

private void GestureRecognizer_Tap(object sender, EventArgs e)
{
boxView.TranslateTo(0, boxView.TranslationY - 100, 2000);
}
}
}

Output:



Page Translation

We can create a xamarin form Application. For creating a design view we can create MainView.XAML and write code. When we click on a flip button the screen is flip.

When clicking on the back button it will again and back to the original form.

MainView.xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="TransitionNavigationPage.Views.MainView"
             Title="Transitions">
    <ContentPage.Content>
        <ScrollView>
            <StackLayout>
                <Button
                    Text="Fade"
                    Command="{Binding FadeCommand}"/>
                <Button
                    Text="Flip"
                    Command="{Binding FlipCommand}"/>
                <Button
                    Text="Scale"
                    Command="{Binding ScaleCommand}"/>
                <Button
                    Text="SlideFromLeft"
                    Command="{Binding SlideFromLeftCommand}"/>
                <Button
                    Text="SlideFromRight"
                    Command="{Binding SlideFromRightCommand}"/>
                <Button 
                    Text="SlideFromTop"
                    Command="{Binding SlideFromTopCommand}"/>
                <Button 
                    Text="SlideFromBottom"
                    Command="{Binding SlideFromBottomCommand}"/>
            </StackLayout>
        </ScrollView>
    </ContentPage.Content>
</ContentPage>



MainView.xaml.cs
using TransitionNavigationPage.Enums;
using TransitionNavigationPage.ViewModels;
using Xamarin.Forms;
using Xamarin.Forms.Xaml;
namespace TransitionNavigationPage.Views
{
    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class MainView : ContentPage
    {
        public MainView()
        {
            InitializeComponent();

            BindingContext = new MainViewModel();
        }
        protected override void OnAppearing()
        {
            base.OnAppearing();
            MessagingCenter.Subscribe(this, AppSettings.TransitionMessage, (sender, arg) => 
            {
                var transitionType = (TransitionType)arg;
                var transitionNavigationPage = Parent as Controls.TransitionNavigationPage;

                if (transitionNavigationPage != null)
                {
                    transitionNavigationPage.TransitionType = transitionType;
                    Navigation.PushAsync(new DetailView());
                }
            });
        }

        protected override void OnDisappearing()
        {
            base.OnDisappearing();
            MessagingCenter.Unsubscribe(this, AppSettings.TransitionMessage);
        }
    }
}

DetailView.xaml

When we can click button then go to DetailView.xaml page.


<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="TransitionNavigationPage.Views.DetailView">
    <ContentPage.Content>
        <Grid>
            <Label
                Text="Go back!"
                HorizontalOptions="Center"
                VerticalOptions="Center"/>
        </Grid>
    </ContentPage.Content>
</ContentPage>

MainViewModel.cs
using System.Windows.Input;
using TransitionNavigationPage.Enums;
using Xamarin.Forms;
namespace TransitionNavigationPage.ViewModels
{
    public class MainViewModel : BindableObject
    {
        public ICommand FadeCommand => new Command(Fade);
        public ICommand FlipCommand => new Command(Flip);
        public ICommand ScaleCommand => new Command(Scale);
        public ICommand SlideFromLeftCommand => new Command(SlideFromLeft);
        public ICommand SlideFromRightCommand => new Command(SlideFromRight);
        public ICommand SlideFromTopCommand => new Command(SlideFromTop);
        public ICommand SlideFromBottomCommand => new Command(SlideFromBottom);
        private void Fade()
        {
            MessagingCenter.Send(this, AppSettings.TransitionMessage, TransitionType.Fade);
        }

        private void Flip()
        {
            MessagingCenter.Send(this, AppSettings.TransitionMessage, TransitionType.Flip);
        }

        private void Scale()
        {
            MessagingCenter.Send(this, AppSettings.TransitionMessage, TransitionType.Scale);
        }

        private void SlideFromLeft()
        {
            MessagingCenter.Send(this, AppSettings.TransitionMessage, TransitionType.SlideFromLeft);
        }

        private void SlideFromRight()
        {
            MessagingCenter.Send(this, AppSettings.TransitionMessage, TransitionType.SlideFromRight);
        }

        private void SlideFromTop()
        {
            MessagingCenter.Send(this, AppSettings.TransitionMessage, TransitionType.SlideFromTop);
        }

        private void SlideFromBottom()
        {
            MessagingCenter.Send(this, AppSettings.TransitionMessage, TransitionType.SlideFromBottom);
        }
    }
}


TransitionType.cs
namespace TransitionNavigationPage.Enums
{
    public enum TransitionType
    {
        /// Do not animate the transition.
        None = -1,

        /// Let the OS decide how to animate the transition.
        Default = 0,

        /// Show a fade transition animation.
        Fade = 1,

        /// Show a flip transition animation.
        Flip = 2,

        /// Show a scale transition animation.
         Scale = 3,

        /// Show a slide form left transition animation.
          SlideFromLeft = 4,

        /// Show a slide form right transition animation.
        SlideFromRight = 5,

        /// Show a slide form top transition animation.
        SlideFromTop = 6,

        /// Show a slide form bottom transition animation.
        SlideFromBottom = 7
    }
}

TransitionNavigationPage.cs
using TransitionNavigationPage.Enums;
using Xamarin.Forms;

namespace TransitionNavigationPage.Controls
{
    public class TransitionNavigationPage : NavigationPage
    {
        public static readonly BindableProperty TransitionTypeProperty =
             BindableProperty.Create("TransitionType", typeof(TransitionType), typeof(TransitionNavigationPage), TransitionType.SlideFromLeft);

        public TransitionType TransitionType
        {
            get { return (TransitionType)GetValue(TransitionTypeProperty); }
            set { SetValue(TransitionTypeProperty, value); }
        }

        public TransitionNavigationPage() : base()
        {
        }

        public TransitionNavigationPage(Page root) : base(root)
        {
        }
    }
}

App.xaml.cs
public partial class App: Application
    {
        public App()
        {
            InitializeComponent();

            MainPage = new Controls.TransitionNavigationPage(new MainView());
        }
    }

AppSettings.cs
namespace TransitionNavigationPage
{
    public class AppSettings
    {
        public const string TransitionMessage = "Transition";
    }
}


Planning to Hire Xamarin App Development Company ?

Your Search ends here.


TransitionNavigationPageRenderer.cs
using System.ComponentModel;
using Android.Content;
using Android.Support.V4.App;
using TransitionNavigationPage.Droid.Renderers;
using TransitionNavigationPage.Enums;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android.AppCompat;

[assembly: ExportRenderer(typeof(TransitionNavigationPage.Controls.TransitionNavigationPage), typeof(TransitionNavigationPageRenderer))]
namespace TransitionNavigationPage.Droid.Renderers
{
    public class TransitionNavigationPageRenderer : NavigationPageRenderer
    {
        private TransitionType _transitionType = TransitionType.Default;

        public TransitionNavigationPageRenderer(Context context) : base(context)
        {
        }

        protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
        {
            base.OnElementPropertyChanged(sender, e);

            if (e.PropertyName == Controls.TransitionNavigationPage.TransitionTypeProperty.PropertyName)
                UpdateTransitionType();
        }
        protected override void SetupPageTransition(FragmentTransaction transaction, bool isPush)
        {
            switch (_transitionType)
            {
                case TransitionType.None:
                    return;
                case TransitionType.Default:
                    return;
                case TransitionType.Fade:
                    transaction.SetCustomAnimations(Resource.Animation.fade_in, Resource.Animation.fade_out,
                                                    Resource.Animation.fade_out, Resource.Animation.fade_in);
                    break;
                case TransitionType.Flip:
                    transaction.SetCustomAnimations(Resource.Animation.flip_in, Resource.Animation.flip_out,
                                                    Resource.Animation.flip_out, Resource.Animation.flip_in);
                    break;
                case TransitionType.Scale:
                    transaction.SetCustomAnimations(Resource.Animation.scale_in, Resource.Animation.scale_out,
                                                    Resource.Animation.scale_out, Resource.Animation.scale_in);
                    break;
                case TransitionType.SlideFromLeft:
                    if (isPush)
                    {
                        transaction.SetCustomAnimations(Resource.Animation.enter_left, Resource.Animation.exit_right,
                                                        Resource.Animation.enter_right, Resource.Animation.exit_left);
                    }
                    else
                    {
                        transaction.SetCustomAnimations(Resource.Animation.enter_right, Resource.Animation.exit_left,
                                                        Resource.Animation.enter_left, Resource.Animation.exit_right);
                    }
                    break;
                case TransitionType.SlideFromRight:
                    if (isPush)
                    {
                        transaction.SetCustomAnimations(Resource.Animation.enter_right, Resource.Animation.exit_left,
                                                        Resource.Animation.enter_left, Resource.Animation.exit_right);
                    }

else
                    {
                        transaction.SetCustomAnimations(Resource.Animation.enter_left, Resource.Animation.exit_right,
                                                        Resource.Animation.enter_right, Resource.Animation.exit_left);
                    }
                    break;
                case TransitionType.SlideFromTop:
                    if (isPush)
                    {
                        transaction.SetCustomAnimations(Resource.Animation.enter_top, Resource.Animation.exit_bottom,
                                                        Resource.Animation.enter_bottom, Resource.Animation.exit_top);
                    }
                    else
                    {
                        transaction.SetCustomAnimations(Resource.Animation.enter_bottom, Resource.Animation.exit_top,
                                                        Resource.Animation.enter_top, Resource.Animation.exit_bottom);
                    }
                    break;
                case TransitionType.SlideFromBottom:
                    if (isPush)
                    {
                        transaction.SetCustomAnimations(Resource.Animation.enter_bottom, Resource.Animation.exit_top,
                                                        Resource.Animation.enter_top, Resource.Animation.exit_bottom);
                    }
                    else
                    {
                        transaction.SetCustomAnimations(Resource.Animation.enter_top, Resource.Animation.exit_bottom,
                                                        Resource.Animation.enter_bottom, Resource.Animation.exit_top);
                    }
                    break;
                default:
                    return;
            }
        }

private void UpdateTransitionType()
        {
            var transitionNavigationPage = (Controls.TransitionNavigationPage)Element;
            _transitionType = transitionNavigationPage.TransitionType;
        }
    }
}
Resource.Designer.cs
public static void UpdateIdValues()
		{
			global::Xamarin.Forms.Platform.Android.Resource.Attribute.actionBarSize = global::TransitionNavigationPage.Droid.Resource.Attribute.actionBarSize;
		}
enter_bottom.xml

<?xml version="1.0" encoding="utf-8" ?>
<set xmlns:android="http://schemas.android.com/apk/res/android" 
     android:shareInterpolator="false">
  <translate
      android:fromXDelta="0%" android:toXDelta="0%"
      android:fromYDelta="100%" android:toYDelta="0%"
      android:duration="300" />
</set>

enter_left.xml

<?xml version="1.0" encoding="utf-8" ?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
      android:propertyName="enter_from_left"
    android:shareInterpolator="false">
  <translate
      android:fromXDelta="-100%" android:toXDelta="0%"
      android:fromYDelta="0%" android:toYDelta="0%"
      android:duration="300"/>
</set>

enter_right.xml

<?xml version="1.0" encoding="utf-8" ?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:shareInterpolator="false">
  <translate
      android:fromXDelta="100%" android:toXDelta="0%"
      android:fromYDelta="0%" android:toYDelta="0%"
      android:duration="300" />
</set>

enter_top.xml

<?xml version="1.0" encoding="utf-8" ?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
     android:shareInterpolator="false">
  <translate
      android:fromXDelta="0%" android:toXDelta="0%"
      android:fromYDelta="-100%" android:toYDelta="0%"
      android:duration="300" />
</set>

exit_bottom.xml

<?xml version="1.0" encoding="utf-8" ?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
     android:shareInterpolator="false">
  <translate
      android:fromXDelta="0%" android:toXDelta="0%"
      android:fromYDelta="0%" android:toYDelta="100%"
      android:duration="300" />
</set>

exit_left.xml

<?xml version="1.0" encoding="utf-8" ?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:shareInterpolator="false">
  <translate
      android:fromXDelta="0%" android:toXDelta="-100%"
      android:fromYDelta="0%" android:toYDelta="0%"
      android:duration="300"/>
</set>

exit_right.xml

<?xml version="1.0" encoding="utf-8" ?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:shareInterpolator="false">
  <translate
      android:fromXDelta="100%" android:toXDelta="0%"
      android:fromYDelta="0%" android:toYDelta="0%"
      android:duration="300" />
</set>



exit_top.xml



  



Output:

(Flip)

(Fade)

(Scale)

(Slide from bottom)

(Slide from top)

(Slide from left)

(Slide from right)

Conclusion:

In this blog, we have understood how to use Xamarin Forms Application to use animating page translation. We have used seven ways to translate a page in our application. Here we have created seven buttons in our application. If we click on a flip button, then it will flip the screen and when clicking on the back button it will back to the original form.