CODEWITHSUNDEEP
c#.netmobilemaui.net-8.0
Mark Vermulst
Mark Vermulst

Reputation: 37

Keep tabbar when navigating to a detail page .NET MAUI

I am creating a .NET MAUI app that utilizes the AppShell as navigation service.

<Shell
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    x:Class="YourNamespace.AppShell">

    <TabBar>
        <ShellContent
            Title="Main Page 1"
            Icon="icon1.png"
            ContentTemplate="{DataTemplate local:MainPage1}" 
            Route="nameOf(MainPage1)"/>

        <ShellContent
            Title="Main Page 2"
            Icon="icon2.png"
            ContentTemplate="{DataTemplate local:MainPage2}" 
            Route="nameOf(MainPage2)"/>
    </TabBar>

    <ShellContent
            Title="Detail Page 1"
            ContentTemplate="{DataTemplate local:DetailPage1}" 
            Route="nameOf(DetailPage1)"/>

    <ShellContent
            Title="Detail Page 2"
            ContentTemplate="{DataTemplate local:DetailPage2}" 
            Route="nameOf(DetailPage2)"/>

</Shell>

With this setup when navigating to the detailpage like below removes the tabbar on the bottom when on the detail page.

await Shell.Current.GoToAsync($"///{nameOf(DetailPage2)}", navigationParameter);

I also tried this structure

<Shell
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    x:Class="YourNamespace.AppShell">

    <TabBar>
        <Tab Title="Main Page 1"
            Icon="icon1.png">
            <ShellContent ContentTemplate="{DataTemplate local:MainPage1}" 
            Route="nameOf(MainPage1)"/>
            <ShellContent ContentTemplate="{DataTemplate local:DetailPage1}" 
            Route="nameOf(DetailPage1)"/>
        </Tab>

        <Tab Title="Main Page 2"
            Icon="icon2.png">
            <ShellContent ContentTemplate="{DataTemplate local:MainPage2}" 
            Route="nameOf(MainPage2)"/>
            <ShellContent ContentTemplate="{DataTemplate local:DetailPage2}" 
            Route="nameOf(DetailPage2)"/>
        </Tab>
    </TabBar>
</Shell>

This almost achieves what I want, but somehow this creates an extra bar at the top of my page under my title view. I can't seem to find online anyone that also runs into this problem, so I hope someone with more Maui experience can help. Thanks in advance!

Upvotes: 0

Views: 81

Answers (1)

Alexandar May - MSFT
Alexandar May - MSFT

Reputation: 10156

With this setup when navigating to the detailpage like below removes the tabbar on the bottom when on the detail page.

You can use the code below to navigate to the DetailPage2() and it will show the bottom TabBar as expected.

await Shell.Current.Navigation.PushAsync(new DetailPage2());

Upvotes: 1

Related Questions