xamlmauiflyout

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

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.

enter image description here

Solution

  • 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)... enter image description here

    without any extraneous buttons at the bottom of the screen... enter image description here