I have a .NET MAUI Shell app with several bottom tabs and 3 top tabs in one of them. If I select a top tab that isn't the first, there is a sliding/scrolling animation to go to that top tab. So far, that's fine, even if it isn't necessary. Now I select another bottom tab, so far so good. But if I now select the previous bottom tab again, I get the animation to scroll from the first top tab to the last selected top tab again, which is really disorienting and not helpful whatsoever.

Undesired scrolling animation

I have this issue on Android, I haven't tested it on iOS.

How can I disable this behavior? If the solution also disables the animation when selecting another top tab, that isn't much of a problem.

Edit: This is my 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>
0

There are 0 best solutions below