如何禁用.NET MAUI Shell切换底部标签时顶部标签的滚动动画？

我开发了一个.NET MAUI Shell应用，包含多个底部标签，其中一个底部标签下设有3个顶部标签。选择非首个顶部标签时的滑动/滚动动画还可以接受，但切换到其他底部标签后再次切回原底部标签时，会再次触发从第一个顶部标签滚动至之前选中的顶部标签的动画，这非常令人困惑且毫无帮助。

此问题出现在Android平台，暂未在iOS上测试。我想禁用该行为，即便解决方案会同时禁用顶部标签切换时的动画也没关系。

编辑：以下是我的Shell代码：

<?xml version="1.0" encoding="UTF-8" ?>
<Shell x:Class="Epoca.Mobile.Maui.AppShell"
       xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       xmlns:local="clr-namespace:Epoca.Mobile.Maui"
       xmlns:pages="clr-namespace:Epoca.Mobile.Maui.Pages"
       xmlns:resx="clr-namespace:Epoca.Mobile.Shared.Resources;assembly=Epoca.Mobile.Shared"
       xmlns:contentViews="clr-namespace:Epoca.Mobile.Maui.ContentViews">

  <Shell.FlyoutHeader>
    <contentViews:FlyoutHeader />
  </Shell.FlyoutHeader>
  <Shell.FlyoutFooter>
    <contentViews:FlyoutFooter />
  </Shell.FlyoutFooter>
  <ShellContent Title="Loading"
                ContentTemplate="{DataTemplate pages:LoadingPage}"
                Route="LoadingPage"
                FlyoutItemIsVisible="False" />

  <ShellContent Title="Login"
                ContentTemplate="{DataTemplate pages:LoginPage}"
                Route="LoginPage"
                FlyoutItemIsVisible="False" />

  <FlyoutItem Title="{x:Static resx:Strings.Dashboard}"
              Icon="dashboard.png"
              FlyoutItemIsVisible="False">
    <Tab Title="{x:Static resx:Strings.Overview}"
         Icon="dashboard.png">
      <ShellContent Title="{x:Static resx:Strings.Dashboard}"
                    Icon="dashboard.png"
                    ContentTemplate="{DataTemplate pages:DashboardPage}"
                    Route="DashboardPage" />

      <ShellContent Title="{x:Static resx:Strings.TotalPerformance}"
                    Icon="total_performance.png"
                    ContentTemplate="{DataTemplate pages:TotalPerformancePage}"
                    Route="TotalPerformancePage" />

      <ShellContent Title="{x:Static resx:Strings.Strategy}"
                    ContentTemplate="{DataTemplate pages:StrategyPage}"
                    Route="StrategyPage" />
    </Tab>

    <ShellContent Title="{x:Static resx:Strings.InvestmentClasses}"
                  ContentTemplate="{DataTemplate pages:CategoriesPage}"
                  Icon="category_overview.png"
                  Route="CategoriesPage" />


    <ShellContent Title="{x:Static resx:Strings.Currencies}"
                  ContentTemplate="{DataTemplate pages:CurrenciesPage}"
                  Icon="currency_overview.png"
                  Route="CurrenciesPage" />


    <ShellContent Title="{x:Static resx:Strings.Asset}"
                  Icon="asset_details.png"
                  ContentTemplate="{DataTemplate pages:AssetsPage}"
                  Route="AssetsPage" />
  </FlyoutItem>

  <MenuItem Text="{x:Static resx:Strings.SelectAggregate}"
            IconImageSource="select_aggregate.png"
            Clicked="SelectAggregate_Clicked" />

  <MenuItem Text="{x:Static resx:Strings.Refresh}"
            IconImageSource="refresh.png"
            Clicked="Refresh_Clicked"/>

  <MenuItem Text="{x:Static resx:Strings.Settings}"
            IconImageSource="settings.png"
            Clicked="Settings_Clicked" />

  <MenuItem Text="{x:Static resx:Strings.Logout}"
            IconImageSource="logout.png"
            Clicked="Logout_Clicked" />

</Shell>

解决方案：自定义Android Shell渲染器禁用滚动动画 #

要彻底禁用Android平台下的这类滚动动画，你可以通过自定义Shell的Android渲染器实现：

1. 在项目的Android平台目录中新建一个CustomShellRenderer.cs文件，代码如下：

using Android.Content;
using AndroidX.ViewPager2.Widget;
using Microsoft.Maui.Controls.Platform;

[assembly: ExportRenderer(typeof(Shell), typeof(Epoca.Mobile.Maui.Droid.CustomShellRenderer))]
namespace Epoca.Mobile.Maui.Droid;

public class CustomShellRenderer : ShellRenderer
{
    public CustomShellRenderer(Context context) : base(context)
    {
    }

    protected override IShellTabLayoutAppearanceTracker CreateTabLayoutAppearanceTracker(ShellSection shellSection)
    {
        return new CustomTabLayoutAppearanceTracker(this);
    }

    private class CustomTabLayoutAppearanceTracker : ShellTabLayoutAppearanceTracker
    {
        public CustomTabLayoutAppearanceTracker(IShellContext shellContext) : base(shellContext)
        {
        }

        public override void SetViewPager(ViewPager2 viewPager, ShellSection shellSection)
        {
            base.SetViewPager(viewPager, shellSection);
            // 移除ViewPager2的页面切换动画
            viewPager.SetPageTransformer(null);
        }
    }
}

注意：将命名空间Epoca.Mobile.Maui.Droid替换为你项目的实际Android平台命名空间。

2. 编译运行后，无论是顶部标签切换时的滑动动画，还是返回底部标签时的滚动回退动画都会被完全禁用，解决你的困惑。

这个方案直接针对Android平台的ViewPager2组件（MAUI Shell的顶部标签底层实现），通过移除页面转换器来取消所有切换动画，完全符合你的需求。

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