animate page from right to left or left to right? - xamarin.forms

Question

in my application i am using PushModalAsync and PopModalAsync for page navigation but page animation is displaying from bottom top and top to bottom respectively. Is there any other option to animate page from right to left or left to right?

Answer 1

Welcome to SO!
If using PushModelAsync , there is a workaround to achieve that effect .
Create a CustomPageRenderer for PageTwo in iOS solution :
[assembly: ExportRenderer(typeof(PageTwo), typeof(CustomPageRenderer))]
namespace XamarinMoelNavigationStyle.iOS
{
public class CustomPageRenderer :PageRenderer
{
public override void ViewWillAppear(bool animated)
{
var transition = CATransition.CreateAnimation();
transition.Duration = 0.5f;
transition.Type = CAAnimation.TransitionPush;
transition.Subtype = CAAnimation.TransitionFromRight;
View.Layer.AddAnimation(transition, null);
base.ViewWillAppear(animated);
}
}
}
We will add animation inside ViewWillAppear method .
When poping to previous MainPage , we can deal with that in ContentPage as follow :
private void Button_Clicked(object sender, EventArgs e)
{
PageTwoView.TranslateTo(300, 0, 500);
Device.StartTimer(TimeSpan.FromSeconds(0.5), () =>
{
// Do something
Navigation.PopModalAsync(false);
return false; // True = Repeat again, False = Stop the timer
});
}
Here PageTwoView is defined from 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"
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
x:Name="PageTwoView"
x:Class="XamarinMoelNavigationStyle.PageTwo">
...
</ContentPage>
Note : When MainPage navigate to PageTwo , need to disable the animation .
Such as :
private void Button_Clicked(object sender, EventArgs e)
{
Navigation.PushModalAsync(new PageTwo(), false);
}
The effect :
===============================Update #1==============================
Also create a CustomPageRenderer for PageTwo in Android solution :
public class CustomPageRenderer : PageRenderer
{
public CustomPageRenderer(Context context) : base(context)
{
}
protected override void OnAttachedToWindow()
{
var metrics = Resources.DisplayMetrics;
Android.Views.Animations.Animation translateAnimation = new TranslateAnimation(metrics.WidthPixels, 0, 0, 0);
translateAnimation.Duration = 500;
Animation = translateAnimation;
translateAnimation.Start();
base.OnAttachedToWindow();
}
}
The effect:
===============================Update #2=================================
If there are much ContentPages need to navigate, you can modify the CustomPageRenderer to be used for all ContentPage. As follow:
[assembly: ExportRenderer(typeof(ContentPage), typeof(CustomPageRenderer))]
...
Then using Preferences to set flag in Forms and get flag to know whether need the animation.
private void Button_Clicked(object sender, EventArgs e)
{
PageTwo pageTwo = new PageTwo();
// set a flag here
Preferences.Set("ModelAnimation", true);
Navigation.PushModalAsync(pageTwo, false);
}
Now the renderer will know whehter need the animatin:
//Android
protected override void OnAttachedToWindow()
{
var myValue = Preferences.Get("ModelAnimation", false);
if (myValue)
{
var metrics = Resources.DisplayMetrics;
Android.Views.Animations.Animation translateAnimation = new TranslateAnimation(metrics.WidthPixels, 0, 0, 0);
translateAnimation.Duration = 500;
Animation = translateAnimation;
translateAnimation.Start();
}
base.OnAttachedToWindow();
}
//iOS
public override void ViewWillAppear(bool animated)
{
var myValue = Preferences.Get("ModelAnimation", false);
if (myValue)
{
var transition = CATransition.CreateAnimation();
transition.Duration = 0.5f;
transition.Type = CAAnimation.TransitionPush;
transition.Subtype = CAAnimation.TransitionFromRight;
View.Layer.AddAnimation(transition, null);
}
base.ViewWillAppear(animated);
}
after sliding complete 1st page is open as popup and not looking like first page to second page animation..
About this issue, you can share some code and .gif to explain that.