shellmauitoolbaritems

My ToolbarItems don't show in Shell pages because of NavBar missing... But the NavBar is hideous


I am lost with the Shell.NavBar and ContentPage.ToolbarItems interactions. I intend to add a "logout" button on all pages in my MAUI app. I have a shell app with this AppShell.xaml code:

<Shell ....>

<Shell.Items>
    <ShellContent x:Name="Login" ContentTemplate="{DataTemplate Login:Login}" Route="Login" Shell.FlyoutBehavior="Disabled" Shell.NavBarIsVisible="False" ></ShellContent>
</Shell.Items>

<TabBar Route="Login">
    <ShellContent ContentTemplate="{DataTemplate Login:Login}" Shell.FlyoutBehavior="Disabled" Shell.NavBarIsVisible="False" ></ShellContent>
</TabBar>

<TabBar x:Name="MyTabBar" Shell.NavBarHasShadow="true" Route="Home">        
    <Tab
        x:Name="tabExpenseReports"
        Title="...."
        Icon="ExpenseReports"
        Shell.BackgroundColor="#001933"
        Shell.ForegroundColor="#AB1300">

        <ShellContent
            x:Name="Pending"
            ContentTemplate="{DataTemplate ExpenseReports:Pending}"
            Route="Pending"
            Title="...."
            Icon="pending.svg"
            Shell.NavBarIsVisible="False">
        </ShellContent>

        <ShellContent
            x:Name="Finalized"
            ContentTemplate="{DataTemplate ExpenseReports:Finalized}"
            Route="Finalized"
            Title="...."
            Icon="finalized.svg"
            Shell.NavBarIsVisible="False">
        </ShellContent>
    </Tab>
    etc
    etc

and I have some other "details" pages which are not in the Shell.

In these other pages I have added

<ContentPage.ToolbarItems>
    <ToolbarItem x:Name="logout_Icon" Command="{Binding LogoutCommand}">
        <ToolbarItem.IconImageSource>
            <FontImageSource
                FontFamily="MaterialIconsOutlined-Regular"
                Size="20"
                Glyph="&#xe9ba;" Color="#A3AC58" />
        </ToolbarItem.IconImageSource>
    </ToolbarItem>
</ContentPage.ToolbarItems>

and this looks and works fine.

This looks fine

I intend to add this logout feature in the Pending and Finalized pages above.

Alas, my ToolbarItems don't show !

The buttons don't show in the SHELL pages

I found that they don't show because of the Shell.NavBarIsVisible="False" property set in AppShell.xaml

However, if I set Shell.NavBarIsVisible="True", this navBar is absolutely HUGE, and eats up a lot of my phone's screen:

enter image description here

Can I show the ToolbarItems (or some equivalent) while keeping Shell.NavBarIsVisible="False" ?

How could I add buttons in the "header" part of my pages, like I've done for the non-shell pages ? (see pictures above, with the two 'Logout' and 'Print' buttons).

Thank you very much Alex


Solution

  • Yes, you can do it.

    Variant A: You learn to use handlers, (https://learn.microsoft.com/en-us/dotnet/maui/user-interface/handlers), write bunch of platform specific code, or resort to something basic like grid with 2 rows, and layout in the first row with your "toolbar items".

    Variant B: You use the default Shell behavior, and do not do "NavBarIsVisible=FALSE".

    Shell has very specific structure, with strict hierarchy. Make sure you read about it here: https://learn.microsoft.com/en-us/dotnet/maui/fundamentals/shell/

    (What alarms me most is your double Tabbar. And the fact that the first one has a single tab.)

    If you are going to write something way too different than that structure, you might as well use pages instead of shell.

    https://learn.microsoft.com/en-us/dotnet/maui/user-interface/pages/navigationpage

    I recommend sticking to default shell behavior. If not because something else, the users are used to it.