Search code examples
c#xamlmaui

How can I push a TabBar onto the navigation stack?


From the MainPage defined in AppShell.xaml below, I want to be able to push a TabBar onto the navigation stack so that it will have a back button to return to the MainPage.

My AppShell.xaml looks like this:

<?xml version="1.0" encoding="UTF-8" ?>
<Shell
    x:Class="MyApp.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:localize="clr-namespace:MyApp.Resources.Strings"
    xmlns:local="clr-namespace:MyApp.Views"
    xmlns:system="clr-namespace:System;assembly=mscorlib"
    xmlns:xct="clr-namespace:CommunityToolkit.Maui.Behaviors;assembly=CommunityToolkit.Maui"
    Shell.FlyoutHeaderBehavior="Default"
    Shell.FlyoutBehavior="Disabled"
    >

    <TabBar Route="SomeTabPage" x:Name="SomeTabBar">
            
        <Tab Route="OverviewTab" Title="{x:Static localize:Lang.Overview}" x:Name="OverviewTab">
            <ShellContent Route="OverviewPage"
                          ContentTemplate="{DataTemplate local:OverviewPage}"
                          />
        </Tab>
        <Tab Title="{x:Static localize:Lang.Alerts}" x:Name="AlertsTab">
            <ShellContent Route="AlertsPage"
                          ContentTemplate="{DataTemplate local:AlertsPage}"
            />
        </Tab>
    </TabBar>

    <ShellContent
        Route="MainPage"
        ContentTemplate="{DataTemplate local:MainPage}"
        FlyoutItemIsVisible="False" 
        />

</Shell>

AppShell.xaml.cs has registration for the two routes used below. Not sure if the registration is part of the problem.

        Routing.RegisterRoute("ServiceAdvisorTabBar", typeof(TabBar));
        Routing.RegisterRoute("OverviewPageWithTabs", typeof(OverviewPage));

If I put a button in MainPage that pushes the OverviewTab onto the nav stack, it has no tabs, just a single OverviewPage:

    await Shell.Current.GoToAsync("/OverviewTab");

If I change that button to push the TabBar route of "SomeTabPage", it crashes.

    await Shell.Current.GoToAsync("/ServiceAdvisorTabBar");

That line is throwing a System.NullReferenceException exception.

    0xFFFFFFFFFFFFFFFF in Android.Runtime.RuntimeNativeMethods.monodroid_debugger_unhandled_exception   C#
    0x1A in Android.Runtime.JNINativeWrapper._unhandled_exception at /Users/runner/work/1/s/xamarin-android/src/Mono.Android/Android.Runtime/JNINativeWrapper.g.cs:13,5 C#
    0x1D in Android.Runtime.JNINativeWrapper.Wrap_JniMarshal_PP_V at /Users/runner/work/1/s/xamarin-android/src/Mono.Android/Android.Runtime/JNINativeWrapper.g.cs:27,26    C#
    0x17 in System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw    C#
    0x6 in System.Threading.Tasks.Task.<>c.<ThrowAsync>b__128_0 C#
    0xC in Android.App.SyncContext. at /Users/runner/work/1/s/xamarin-android/src/Mono.Android/Android.App/SyncContext.cs:36,19 C#
    0xE in Java.Lang.Thread.RunnableImplementor.Run at /Users/runner/work/1/s/xamarin-android/src/Mono.Android/Java.Lang/Thread.cs:36,6 C#
    0x8 in Java.Lang.IRunnableInvoker.n_Run at /Users/runner/work/1/s/xamarin-android/src/Mono.Android/obj/Release/net8.0/android-34/mcw/Java.Lang.IRunnable.cs:84,4    C#
    0x8 in Android.Runtime.JNINativeWrapper.Wrap_JniMarshal_PP_V at /Users/runner/work/1/s/xamarin-android/src/Mono.Android/Android.Runtime/JNINativeWrapper.g.cs:26,5  C#

Isn't there some way to push the TabBar over the MainPage?


Solution

  • I concluded that there is no way to push a TabBar onto the navigation stack. TabBar items can only be defined as base views in the AppShell.xaml file. So I was able to navigate to the tab bar and put my own back button onto the TitleView so that it behaved as if it was pushed, but actually was a base view.