Xamarin Modal Page Transition to Normal Page - xamarin

Question

Xamarin is having default page transition animation. Modal Page from bottom to top and Normal Page from right to left. Is there a way to apply modal page transition animation to a normal page.
I tried various CATransition animation in iOS using NavigationPageRenderer. I am not able to match the exact modal page animation provided by xamarin default.
protected override Task<bool> OnPushAsync(Page page, bool animated)
{
var type = page.GetType();
if (Startup.Instance.ModalPages.Contains(type))
{
var transition = CATransition.CreateAnimation();
transition.Duration = 0.5f;
transition.Type = CAAnimation.TransitionMoveIn; //tried other animation transitions
transition.Subtype = CAAnimation.TransitionFromTop;
View.Layer.AddAnimation(transition, null);
return base.OnPushAsync(page, false);
}
else
{
return base.OnPushAsync(page, animated);
}
}
protected override Task<bool> OnPopViewAsync(Page page, bool animated)
{
var type = page.GetType();
if (Startup.Instance.ModalPages.Contains(type))
{
var transition = CATransition.CreateAnimation();
transition.Duration = 0.5f;
transition.Type = CAAnimation.TransitionReveal;
transition.Subtype = CAAnimation.TransitionFromBottom;
View.Layer.AddAnimation(transition, null);
return base.OnPopViewAsync(page, false);
}
else
{
return base.OnPopViewAsync(page, animated);
}
Thanks

Answer 1

Is there a way to apply modal page transition animation to a normal page.
If just want to keep the same TransitionStyle with navigation of normal page. You can hide the NavigationBar when PushAsync , and not need to use PushModelAsync .
For example , Button_Clicked method of MainPage as follow :
private void Button_Clicked(object sender, EventArgs e)
{
Navigation.PushAsync(new PageTwo());
}
Then PageTwo :
public partial class PageTwo : ContentPage
{
public PageTwo()
{
InitializeComponent();
NavigationPage.SetHasNavigationBar(this, false);
}
private void Button_Clicked(object sender, EventArgs e)
{
Navigation.PopAsync();
}
}
The effect should be your want :
============================Update===================================
If need to use 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 :