xamarin - Xamarin 模态页面过渡到普通页面

问题描述

Xamarin 具有默认的页面过渡动画。模态页从下到上，普通页从右到左。有没有办法将模态页面过渡动画应用于普通页面。

我使用 NavigationPageRenderer 在 iOS 中尝试了各种 CATransition 动画。我无法匹配 xamarin 默认提供的确切模式页面动画。

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);
        }

谢谢

标签： xamarinxamarin.formsxamarin.androidxamarin.ios

有没有办法将模态页面过渡动画应用于普通页面。

如果只是想与普通页面的导航保持相同的TransitionStyle 。你可以隐藏的NavigationBar时候PushAsync，而不需要使用PushModelAsync。

例如 MainPageButton_Clicked的方法如下：

private void Button_Clicked(object sender, EventArgs e)
{
    Navigation.PushAsync(new PageTwo());
}

然后PageTwo：

public partial class PageTwo : ContentPage
{
    public PageTwo()
    {
        InitializeComponent();
        NavigationPage.SetHasNavigationBar(this, false);
    }

    private void Button_Clicked(object sender, EventArgs e)
    {
        Navigation.PopAsync();
    }
}

效果应该是你想要的：

=============================更新===================== ===============

如果需要使用PushModelAsync，有一种变通方法可以达到该效果。

在 iOS 解决方案中为 PageTwo创建一个CustomPageRenderer ：

[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);
        }

    }
}

我们将在ViewWillAppear方法中添加动画。

弹出到上一个MainPage时，我们可以在 ContentPage 中处理如下：

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
    });

}

这PageTwoView是从 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>

注意：MainPage导航到时PageTwo，需要禁用动画。

如：

private void Button_Clicked(object sender, EventArgs e)
{
    Navigation.PushModalAsync(new PageTwo(), false);
}

效果：

xamarin - Xamarin 模态页面过渡到普通页面

问题描述

解决方案

推荐阅读