Problem: clicking on a ShellContent in the hamburger menu hides FlyoutItem bar

Question

In my .Net MAUI app, in Shell.xaml I have both FlayoutItem with multiple ShellContents inside and several MenuItems and ShellContents :

Shell.FlyoutBehavior="Flyout" >

<FlyoutItem>
    <ShellContent Title="Home"
                  Icon="{StaticResource IconHome}"
                  ContentTemplate="{DataTemplate main:MainPage}" />
    <ShellContent Title="Estimator"
                  Icon="{StaticResource IconCalculator}"
                  ContentTemplate="{DataTemplate calculator:CoverageCalculatorPage}" />
    <ShellContent Title="Distributors"
                  Icon="{StaticResource IconLocator}"
                  ContentTemplate="{DataTemplate locator:DistributorsLocatorPage}" />
    <ShellContent Title="Video Chat"
                  Icon="{StaticResource IconVideoChat}"
                  ContentTemplate="{DataTemplate videoChat:VideoChatPage}" IsVisible="{Binding IsVideoChatVisible}" />
</FlyoutItem>

<MenuItem Text="{Binding LoginText}"
        IconImageSource="{DynamicResource IconSignIn}"
        Command="{Binding ToggleLoginCommand}" />    
<ShellContent Title="About Us"
                Icon="{StaticResource IconChevron}"
                ContentTemplate="{DataTemplate about:AboutPage}" />
<ShellContent Title="Scan QR"
                Icon="{StaticResource IconQrScanner}"
                ContentTemplate="{DataTemplate qrScanner:QrScannerPage}" IsVisible="{Binding IsScanQRVisible}" />
<MenuItem Text="Call Us"
            IconImageSource="{StaticResource IconPhone}"
            Command="{Binding CallLaticreteCommand}" />
<MenuItem Text="Email Technical Support"
            IconImageSource="{StaticResource IconMail}"
            Command="{Binding EmailTechSupportCommand}" />
<ShellContent Title="University"
                Icon="{StaticResource IconChevron}"
                ContentTemplate="{DataTemplate university:UniversityPage}" />
<ShellContent Title="Project Spotlights"
                Icon="{StaticResource IconChevron}"
                ContentTemplate="{DataTemplate spotlight:ProjectSpotlightPage}" />

<MenuItem Text="Visit Website"
          IconImageSource="{StaticResource IconLaunch}"
          Command="{Binding VisitWebsiteCommand}" />
<MenuItem Text="Customer Portal"
          IconImageSource="{StaticResource IconLaunch}"
          Command="{Binding OpenCustomerPortalCommand}" />
<MenuItem Text="View Catalog"
          IconImageSource="{StaticResource IconLaunch}"
          Command="{Binding ViewCatalogCommand}" />
<MenuItem Text="Grout Selector"
          IconImageSource="{StaticResource IconLaunch}"
          Command="{Binding OpenGroutSelectorCommand}" />
<MenuItem Text="Search Data Sheets"
          IconImageSource="{StaticResource IconLaunch}"
          Command="{Binding OpenDataSheetsCommand}" />

This way, I have a tab bar at the bottom with 4 FlyoutItem elements, and a hamburger menu with all the rest of the elements. I noticed an issue. When I click on any FlyoutItem element at the bottom, the corresponding page opens, and the tab bar stays on the screen. But when I click on a menu element to open the same page, the tab bar at the bottom disappears and never shows up again. How can this be prevented?

ADDED:

This is how the looks:

And this is how the hamburger menu looks:

ADDED 2: If I move the separete ShellContent elements (About, University, and Project Spotlights) to the FlyoutItem, and add FlyoutDisplayOptions="AsMultipleItems", then clicking on them does not hide the bottom bar, which is good. But in that case, the bottom tab bar also has those ShellContent elements (About, University, and Project Spotlights), which I don't want, and I don't know how/if I can hide them.

Each `FlyoutItem` object should be a child of the subclassed Shell object. Here's the examples creating a flyout containing one explicit flyout item with a bottom tab bar.``` ```, however Shell has implicit conversion operators that enable the Shell visual hierarchy to be simplified, without introducing additional views into the visual tree. like directly add ``````. — Alexandar May - MSFT, Dec 12 '22 at 09:18
For the `menu item`, it behaves differently compared to an explicit flyout item with a bottom tab bar. You can walk through official docs:[.NET MAUI Shell flyout](https://learn.microsoft.com/en-us/dotnet/maui/fundamentals/shell/flyout?view=net-maui-7.0) and download[Shell sample](https://github.com/dotnet/maui-samples/tree/main/6.0/Fundamentals/Shell) to verify it. — Alexandar May - MSFT, Dec 12 '22 at 09:21
@AlexandarMay-MSFT Thank you for your comments. It is still not clear though how I should fix my problem. I did read the documentation. FlayoutItem that creates the bottom tab bar looks perfectly fine (I added images to my original question). The problem is that it disappears if I open any page (About, University, or Project Spotlights) from the hamburger menu. Can this be fixed? — David Shochet, Dec 12 '22 at 12:51
@AlexandarMay-MSFT Please see my second addition to the question. — David Shochet, Dec 12 '22 at 16:57
Thanks for your update, as you said, if you don't want the bottom tab bar to disappear when clicking from the hamburger menu, you can add the `ShellContent ` to the `FlyoutItem`.Otherwise, you can [open a new issue](https://github.com/dotnet/maui/issues) on Github to confirm if it is a potential issue. — Alexandar May - MSFT, Dec 13 '22 at 08:59
@AlexandarMay-MSFT Thank you for your comment. The problem is that if I add the ShellContent to the FlyoutItem, it will appear in the bottom tab bar, which I don't want. I need only 5 elements to be in the bar, and the rest in the hamburger menu. I don't get why the bar should disappear. Don't see any logic or reason for it. — David Shochet, Dec 13 '22 at 11:33
If you want the fixed bottom tab bar, you can add the `ShellContent` to the `FlyoutItem` which will show the correspondent bottom tab bar when clicking it. For others if you don't want to see the bottom tab bars when clicking it, you can just add it to `` binding command to navigate to the page you want which will not show the bottom tab bar. — Alexandar May - MSFT, Dec 14 '22 at 08:08
@AlexandarMay-MSFT Thank you, the last idea about adding it to MenuItem solves it! Please make your suggestion an Answer, and I will mark it as such. — David Shochet, Dec 14 '22 at 12:58

Alexandar May - MSFT · Accepted Answer · 2022-12-16T00:39:14.960

To solve your problem, you can replace ShellContents outside of the FlyoutItem with MenuItems that would have commands opening the corresponding pages. Upon clicking such a MenuItem, the page would open, and the bottom bar would stay in its place.

<FlyoutItem>
    <ShellContent Title="Home"
                  Icon="{StaticResource IconHome}"
                  ContentTemplate="{DataTemplate main:MainPage}" />
    <ShellContent Title="Estimator"
                  Icon="{StaticResource IconCalculator}"
                  ContentTemplate="{DataTemplate calculator:CoverageCalculatorPage}" />
    <ShellContent Title="Distributors"
                  Icon="{StaticResource IconLocator}"
                  ContentTemplate="{DataTemplate locator:DistributorsLocatorPage}" />
    <ShellContent Title="Video Chat"
                  Icon="{StaticResource IconVideoChat}"
                  ContentTemplate="{DataTemplate videoChat:VideoChatPage}" IsVisible="{Binding IsVideoChatVisible}" />
</FlyoutItem>


<MenuItem Text="Visit Website"
          IconImageSource="{StaticResource IconLaunch}"
          Command="{Binding VisitWebsiteCommand}" />
<MenuItem Text="Customer Portal"
          IconImageSource="{StaticResource IconLaunch}"
          Command="{Binding OpenCustomerPortalCommand}" />

You said, "if you don't want to see the bottom tab bars when clicking it". The problem was quite opposite. I wanted to have both bottom bar and hamburger menu, with different elements in them, but if I opened a page from the hamburger menu, THE WHOLE BOTTOM BAR WOULD DISAPPEAR. That was the problem. In your comment, you gave me an idea to replace ShellContents outside of the FlyoutItem with MenuItems that would have commands opening the corresponding pages. Upon clicking such a MenuItem, the page would open, and the bottom bar would stay in its place. Could you please edit your answer? — David Shochet, Dec 15 '22 at 12:40

Problem: clicking on a ShellContent in the hamburger menu hides FlyoutItem bar

1 Answers1