Hiding Top Navigations Bar in one of the shell tabs

Question

I've been trying to achieve hiding Top Navigations Bar in one of the shell tabs with no success.

I tried following this Tutorial with no success (might be outdated ?).

Here is my code :

<Shell
    x:Class="Smogon_MAUIapp.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:Smogon_MAUIapp"
    Shell.FlyoutBehavior="Disabled">


    <!--Main Page-->
    <TabBar>

        <Tab Icon="Resources/navbar/smogon.png" Shell.NavBarIsVisible="False" >
            <ShellContent
                Shell.NavBarIsVisible="False"
                NavigationPage.HasNavigationBar="False"
                ContentTemplate="{DataTemplate local:Pages.MainPage}" 
                Route="MainPage">
            </ShellContent>
            <ShellContent
                Shell.NavBarIsVisible="False"
                NavigationPage.HasNavigationBar="False"
                ContentTemplate="{DataTemplate local:Pages.Forum}"
                Route="Forum"/>
            <ShellContent
                Shell.NavBarIsVisible="False"
                NavigationPage.HasNavigationBar="False"
                ContentTemplate="{DataTemplate local:Pages.SubForum}"
                Route="SubForum"/>
            <ShellContent
                Shell.NavBarIsVisible="False"
                NavigationPage.HasNavigationBar="False"
                ContentTemplate="{DataTemplate local:Pages.Thread}"
                Route="Thread"/>
        </Tab>

        <Tab Icon="Resources/Images/search.png" Shell.NavBarIsVisible="False">
            <ShellContent
                ContentTemplate="{DataTemplate local:Pages.Search}" 
                Route="Search">
            </ShellContent>
        </Tab>

        <Tab Icon="Resources/Images/snorlax.png" Shell.NavBarIsVisible="False">
            <ShellContent
                ContentTemplate="{DataTemplate local:Pages.Profile}" 
                Route="Profile" />
        </Tab>

        <Tab Icon="Resources/Images/showdown.png" Shell.NavBarIsVisible="False">
            <ShellContent
                ContentTemplate="{DataTemplate local:Pages.Showdown}" 
                Route="Showdown" />
        </Tab>

    </TabBar>

</Shell>

and the code behind :

public partial class AppShell : Shell
{
    public AppShell()
    {
        Routing.RegisterRoute("Home", typeof(MainPage));
        Routing.RegisterRoute("Forum", typeof(Forum));
        Routing.RegisterRoute("SubForum", typeof(SubForum));
        Routing.RegisterRoute("Thread", typeof(Smogon_MAUIapp.Pages.Thread));
        Routing.RegisterRoute("Search", typeof(Search));
        Routing.RegisterRoute("Profile", typeof(Profile));
        Routing.RegisterRoute("ShowDown", typeof(Showdown));

        InitializeComponent();
    }
}

Here is a screenshot of what I am getting and what I'd like : Gotten result Vs Wanted one

Help would be appreciated ! =)

I tried removing the top bar of one of my tabs in my shell. But i could only remove the titles and the bar is still there.

Update 1 :

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Smogon_MAUIapp.Pages.Forum"
             Title="Forum"
             Shell.NavBarIsVisible="False">
    <VerticalStackLayout>
    </VerticalStackLayout>
</ContentPage>

I did that but it didn't change anything =)

Have you tried setting `Shell.NavBarIsVisible="False"` in the XAML root element of the page? — Julian, Jan 24 '23 at 11:08
No, in the XAML of the page that you're using as the `ContentTemplate`, e.g. **Forum.xaml** — Julian, Jan 24 '23 at 11:14
I didn't notice this before, you're using bottom and top tabs. In this setup, I don't think it's possible to hide the navigation bar, because it's needed for the top tabs, AFAIK. — Julian, Jan 24 '23 at 12:21

Julian · Answer 1 · 2023-01-24T11:25:59.850

In your Pages, e.g. your Forum.xaml, you could set Shell.NavBarIsVisible="False" to hide the navigation bar, e.g.:

<ContentPage
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    Shell.NavBarIsVisible="False">
    <!-- ... -->
</ContentPage>

This should be done in the ContentPage. It works fine for me like that using tabs:

Side note: NavigationPage is not supported when using Shell, therefore you can safely remove NavigationPage.HasNavigationBar="False" from your Shell definition, because it's obsolete.

H.A.H. · Answer 2 · 2023-01-24T15:38:50.270

0

This is NOT the NavigationBar on the picture.

Actually, your code is working perfectly and the bar is hidden.

Each Tab is ShellSection, and if this ShellSection has more than one Item in the list of ShellContents, this bar appears, so change between them becomes possible.

If you want, you can change your XAML to "true" and you will see another blue line appear above the one you are concerned about.

This will be the actual NavigationBar.

This aside, what really bothers me is why you add several ShellContents, and want to remove the only way to switch between them.

If you want custom navigation, you do not have to put them inside the TabBar. You can put them under it (just like separate Shell Items) and then navigate to them normally.

Edit: Please notice in the accepted answer of the link you gave, how the programmer is not adding every single ShellContent at once, but is using custom navigation events, and using a reference of its Tab for adding/removing them one by one, so that this bar does not render.

edited Jan 24 '23 at 15:38

answered Jan 24 '23 at 14:49

H.A.H.

2,104
1
8
21

It is what i am saying it is, there is a bottom bar for shell navigation between the tabs, and this top navigation to navigate between the shellcontent of the first tab. You can't see the title for each sub tab because they are hidden, but you can click them anyway. – OzZzL Jan 24 '23 at 14:56
1

No. It is what I am saying it is. There is no such thing as "sub tab", and they are not "hidden, but you can click them anyway". It is a bar that has one purpose - to cycle between items in the list of ShellContents of that tab. You placed 4 ShellContents in that tab, the Shell is rendering this Bar to help you switch between them. You can write your own custom renderer, if you want to add Views, and then not render them. But each tab has its own navigation stack anyway. I see no reason for it. – H.A.H. Jan 24 '23 at 15:19
@OzZzL Like H.A.H. said and what I've also mentioned in my comment below your question, you cannot do that (at least not easily). If you want bottom and top tabs, which is what you are using when adding multiple `` items to a ``, then you cannot get rid of the tab navigation, otherwise you wouldn't be able to navigate between those tabs: https://learn.microsoft.com/en-us/dotnet/maui/fundamentals/shell/tabs?view=net-maui-7.0#bottom-and-top-tabs – Julian Jan 26 '23 at 08:25

Hiding Top Navigations Bar in one of the shell tabs

2 Answers2