MAUI中FlyoutPage动画时NavigationPage导航栏不随内容移动问题

问题分析 #

你遇到的核心问题是MAUI中NavigationPage的导航栏属于平台原生控件层级，和页面内容区域是分离的。直接给NavigationPage设置TranslateX只会作用于页面的Content部分，无法带动顶部的导航栏（Android的Toolbar、iOS的UINavigationBar等），这是MAUI和Xamarin在控件层级设计上的差异导致的。

解决方案 #

通过自定义NavigationPage的Handler，在各平台层面获取原生导航栏控件，同步其位移动画，就能实现导航栏和内容区域一起移动的效果。

步骤1：创建自定义NavigationPage类 #

先定义一个带TranslateX绑定属性的自定义导航页，用于传递动画位移值：

public class AnimatedNavigationPage : NavigationPage
{
    public AnimatedNavigationPage(Page root) : base(root)
    {
    }

    public static readonly BindableProperty TranslateXProperty =
        BindableProperty.Create(nameof(TranslateX), typeof(double), typeof(AnimatedNavigationPage), 0.0,
            propertyChanged: OnTranslateXChanged);

    public double TranslateX
    {
        get => (double)GetValue(TranslateXProperty);
        set => SetValue(TranslateXProperty, value);
    }

    private static void OnTranslateXChanged(BindableObject bindable, object oldValue, object newValue)
    {
        var page = (AnimatedNavigationPage)bindable;
        page.UpdateNavigationBarTranslate((double)newValue);
    }

    private void UpdateNavigationBarTranslate(double translateX)
    {
        if (Handler is IAnimatedNavigationPageHandler handler)
        {
            handler.UpdateNavigationBarTranslate(translateX);
        }
    }
}

public interface IAnimatedNavigationPageHandler : IElementHandler
{
    void UpdateNavigationBarTranslate(double translateX);
}

步骤2：实现各平台的自定义Handler #

针对Android、iOS（可选Windows）分别实现Handler，操作原生导航栏控件：

Android平台（Platforms/Android/Handlers/AnimatedNavigationPageHandler.cs）

using AndroidX.AppCompat.Widget;

namespace YourAppNamespace.Platforms.Android.Handlers;

public class AnimatedNavigationPageHandler : NavigationPageHandler, IAnimatedNavigationPageHandler
{
    public void UpdateNavigationBarTranslate(double translateX)
    {
        if (PlatformView == null) return;
        
        var toolbar = PlatformView.FindViewById<Toolbar>(Resource.Id.toolbar);
        toolbar?.SetTranslationX((float)translateX);
    }
}

iOS平台（Platforms/iOS/Handlers/AnimatedNavigationPageHandler.cs）

using UIKit;

namespace YourAppNamespace.Platforms.iOS.Handlers;

public class AnimatedNavigationPageHandler : NavigationPageHandler, IAnimatedNavigationPageHandler
{
    public void UpdateNavigationBarTranslate(double translateX)
    {
        if (PlatformView == null) return;
        
        PlatformView.NavigationBar.Transform = CGAffineTransform.MakeTranslation((nfloat)translateX, 0);
    }
}

Windows平台（可选，Platforms/Windows/Handlers/AnimatedNavigationPageHandler.cs）

using Microsoft.UI.Xaml.Controls;
using Microsoft.UI.Xaml.Media;

namespace YourAppNamespace.Platforms.Windows.Handlers;

public class AnimatedNavigationPageHandler : NavigationPageHandler, IAnimatedNavigationPageHandler
{
    public void UpdateNavigationBarTranslate(double translateX)
    {
        if (PlatformView == null) return;
        
        var navigationView = PlatformView.FindDescendant<NavigationView>();
        if (navigationView != null)
        {
            navigationView.RenderTransform = new TranslateTransform { X = translateX };
        }
    }
}

步骤3：注册自定义Handler #

在MauiProgram.cs中注册各平台的Handler：

builder.ConfigureMauiHandlers(handlers =>
{
#if ANDROID
    handlers.AddHandler(typeof(AnimatedNavigationPage), typeof(Platforms.Android.Handlers.AnimatedNavigationPageHandler));
#elif IOS
    handlers.AddHandler(typeof(AnimatedNavigationPage), typeof(Platforms.iOS.Handlers.AnimatedNavigationPageHandler));
#elif WINDOWS
    handlers.AddHandler(typeof(AnimatedNavigationPage), typeof(Platforms.Windows.Handlers.AnimatedNavigationPageHandler));
#endif
});

步骤4：修改FlyoutPage的动画逻辑 #

将原来的NavigationPage替换为自定义的AnimatedNavigationPage，然后在动画时同步设置内容区和导航栏的位移：

// 初始化带动画的导航页
var animatedNavPage = new AnimatedNavigationPage(new YourDetailPage());
YourFlyoutPage.Detail = animatedNavPage;

// 监听Flyout的打开/关闭事件，同步动画
YourFlyoutPage.HandlerChanged += (s, e) =>
{
    if (YourFlyoutPage.Handler is IFlyoutPageHandler flyoutHandler)
    {
        void UpdateAnimation(double openingRatio)
        {
            var translateX = openingRatio * 100;
            // 移动内容区域
            YourFlyoutPage.Detail.TranslateTo(translateX, 0, 100);
            // 同步移动导航栏
            animatedNavPage.TranslateX = translateX;
        }

        flyoutHandler.Opening += (sender, args) => UpdateAnimation(args.OpeningRatio);
        flyoutHandler.Closing += (sender, args) => UpdateAnimation(args.OpeningRatio);
    }
};

注意事项 #

• 不同平台的原生导航栏控件ID或类型可能有差异，若运行时找不到控件，可通过调试工具确认控件的实际类型和ID。
• 动画时长建议保持一致，避免内容和导航栏出现错位。

内容的提问来源于stack exchange，提问作者Kamar