I am trying to use Flyout, but I see the tabs insted of the three lines button of the flyout (MAUI Android)

I would like to have some options in a flyout, but instead of see the three lines button to access to the items of the flyout, I am seeing the tabs.

This is the shell code:

<?xml version="1.0" encoding="UTF-8" ?>
<Shell
    x:Class="NavigateToTabbedPage.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:NavigateToTabbedPage.Views">



    <FlyoutItem Title="Principal">
        <ShellContent
                Title="Main View"
                ContentTemplate="{DataTemplate local:MainView}"
                Route="MainView" />

        <ShellContent
                Title="Other Settings"
                ContentTemplate="{DataTemplate local:OtherSettingsConfigurationView}"
                Route="OtherSettingsConfiguration" />

        <ShellContent
                Title="User Settings"
                ContentTemplate="{DataTemplate local:UserConfigurationView}"
                Route="UserConfiguration" />
    </FlyoutItem>
</Shell>

And this is the result:

I would like to see the three lines button in the upper left corner, instead of the tabs in the buttom of the screen.

Thanks.

>Solution :

This is the correct way to use Shell:

https://learn.microsoft.com/en-us/dotnet/maui/fundamentals/shell/flyout

An example can be found here:

https://github.com/dotnet/maui-samples/blob/main/7.0/Fundamentals/Shell/Xaminals/AppShell.xaml

Pay attention to this part:

Shell has implicit conversion operators that enable the Shell visual
hierarchy to be simplified.
This is possible because a subclassed Shell object can only ever contain a FlyoutItem object or a TabBar object,
which can only ever contain Tab objects, which can only ever contain ShellContent objects.

If you do not understand the example, point out which part, and I will explain it.

Edit: To use your interpretation for elements, if we take this example:

<FlyoutItem Route="animals"
            FlyoutDisplayOptions="AsMultipleItems">
    <Tab Title="Domestic"
         Route="domestic"
         Icon="paw.png">
        <ShellContent Route="cats"
                      Style="{StaticResource DomesticShell}"
                      Title="Cats"
                      Icon="cat.png"
                      ContentTemplate="{DataTemplate views:CatsPage}" />
        <ShellContent Route="dogs"
                      Style="{StaticResource DomesticShell}"
                      Title="Dogs"
                      Icon="dog.png"
                      ContentTemplate="{DataTemplate views:DogsPage}" />
    </Tab>

The "Tab" is what you call "FlyoutItem",
And the "ShellContent" is what you call "tabs".

While in fact, those "lines" you talk about are the tabs themselves.
And those "tabs" are "ShellContents".

I suggest that you implicitly set your Shell structure, until you understand it. For the extra 1-2 lines, you get perfect clarity.