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="" Color="#A3AC58" />
</ToolbarItem.IconImageSource>
</ToolbarItem>
</ContentPage.ToolbarItems>
and this looks and works fine.
I intend to add this logout feature in the Pending and Finalized pages above.
Alas, my ToolbarItems don't show !
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:
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
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.