MAUI flyout is duplicating as buttons at the bottom of the screen

Question

I'm developing my first MAUI app. I've googled this, and cannot find out how to get rid of it.

I have two Tabs defined in my AppShell Flyout. They show up in the flyout itself fine, and work beautifully, just as expected. But then they ALSO duplicate as buttons at the bottom of the screen, pointed to by the blue arrows in the screenshot below.

Here's the full XAML for my AppShell:

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

    <FlyoutItem FlyoutDisplayOptions="AsMultipleItems">
        <Tab Title="Application" Route="application">
            <ShellContent Title="Login" Route="login" ContentTemplate="{DataTemplate local:Login}" />
            <ShellContent Title="About" Route="about" ContentTemplate="{DataTemplate local:About}" />
            <ShellContent Title="Exit" Route="exit" ContentTemplate="{DataTemplate local:Exit}" />
        </Tab>

        <Tab x:Name="ModulesTab" Title="Modules" Route="modules">
            <ShellContent Title="Receiving" Route="receiving" ContentTemplate="{DataTemplate local:Receiving}" />
            <ShellContent Title="Shipping" Route="shipping" ContentTemplate="{DataTemplate local:Shipping}" />
            <ShellContent Title="Putaway" Route="putaway" ContentTemplate="{DataTemplate local:Putaway}" />
        </Tab>
    </FlyoutItem>
</Shell>

How do I hide those buttons at the bottom, while keeping the actual Flyout visible? I tried doing this in my XAML:
<Shell ... Shell.NavBarIsVisible="False">
But that hides both the buttons AND the flyout! I want to get rid of the buttons but keep the flyout. I don't need it duplicated like that.

Or if there's a way to hide the flyout but keep the buttons, that would work too, though I'd prefer keeping the flyout. Ultimately, I just want to eliminate the duplication.

*"No flyout":* try removing `` wrapper. *"No tabs at bottom:* There is a note in [Maui Shell Flyout doc](https://learn.microsoft.com/en-us/dotnet/maui/fundamentals/shell/flyout?view=net-maui-7.0) that says *"Tabs are displayed when a FlyoutItem contains more than one ShellContent object."* I haven't tried it, but try having multiple ``s, each containing one ``, which contains one ``. — ToolmakerSteve, Jan 28 '23 at 00:01
@ToolmakerSteve having multiple `FlyoutItem`s worked. If you want to add that as an answer, I'll accept it. — eidylon, Feb 01 '23 at 21:53
Go ahead and write the answer yourself. Show the code that works. This will help people more than my describing it in a paragraph. (After 48 hours, you can accept your own answer.) — ToolmakerSteve, Feb 01 '23 at 22:12

score 1 · Accepted Answer · answered Feb 08 '23 at 20:35

The suggestion in comments by @ToolmakerSteve worked. I thought the FlyoutItem element was a root, and could only occur once. However breaking the tabs out into separate FlyoutItems solved it.

Updated the flyouts to be defined as so:

<FlyoutItem FlyoutDisplayOptions="AsMultipleItems">
    <Tab Title="Application" Route="application">
        <ShellContent Title="Login" Route="login" ContentTemplate="{DataTemplate pages:LoginPage}" />
        <ShellContent Title="About" Route="about" ContentTemplate="{DataTemplate pages:AboutPage}" />
        <ShellContent Title="Exit" Route="exit" ContentTemplate="{DataTemplate pages:ExitPage}" />
    </Tab>
</FlyoutItem>
<FlyoutItem FlyoutDisplayOptions="AsMultipleItems" >
    <Tab x:Name="ModulesTab" Title="Modules" Route="modules" IsVisible="False">
        <ShellContent Title="Receiving" Route="receiving" ContentTemplate="{DataTemplate pages:InventoryReceivingPage}" />
        <ShellContent Title="Physical" Route="physical" ContentTemplate="{DataTemplate pages:InventoryPhysicalPage}" />
    </Tab>
</FlyoutItem>
<FlyoutItem FlyoutDisplayOptions="AsMultipleItems" >
    <Tab x:Name="DataTab" Title="Data" Route="data" IsVisible="False">
        <ShellContent Title="Drop Downs" Route="dropdowns" ContentTemplate="{DataTemplate pages:DropdownsDataPage}" />
    </Tab>
</FlyoutItem>

Which then gave me the separate tabs (Log Out is a MenuItem under the flyoutitems)...

without any extraneous buttons at the bottom of the screen...

score 0 · Answer 2 · answered Jan 30 '23 at 01:03

You could try using TabBarIsVisible property of shell:

<Shell
x:Class="GoodSam.MATTRAK.AppShell"
....
Shell.TabBarIsVisible="False">

(you can also add Shell.TabBarIsVisible="False" to the shell content).

For more info, you could refer to TabBar and Tab visibility

Hope it works for you.

MAUI flyout is duplicating as buttons at the bottom of the screen

2 Answers2