Tabbar and Flyout working together

Question

Here is my use case, Global Tabbar and Flyout Items. Currently have I can have a tabbar and a flyout but as soon as one of the items from the flyout is tapped I navigate to the correct page however the tabbar disappears. I have tried enabling it on the destination page in Xaml and Code Behind. I've tried every scenario I can think of using several AI tools to make suggestion. This is such a common use case.

here is sample code that when clicked on Profile the tabbar is hidden and it does not return.

<?xml version="1.0" encoding="UTF-8"?>
<Shell
    x:Class="Dummy.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:Dummy"
    xmlns:views="clr-namespace:Dummy.Views"
    xmlns:common="clr-namespace:Dummy.Common"
    Shell.FlyoutBehavior="Flyout"
    Shell.TabBarIsVisible="True"
    Shell.TabBarBackgroundColor="{StaticResource Primary}"
    Shell.TabBarForegroundColor="LightSkyBlue"
    Shell.TabBarTitleColor="LightSkyBlue"
    Shell.TabBarUnselectedColor="White">
    <!-- Flyout Header -->
    <Shell.FlyoutHeader>
        <Grid BackgroundColor="#3E3B32" HeightRequest="200">
            <Grid.RowDefinitions>
                <RowDefinition Height="120" />
                <RowDefinition Height="80" />
            </Grid.RowDefinitions>
            <Label 
                FontFamily="Oswald"
                Text="Dummy" 
                TextColor="White" 
                FontSize="32" 
                HorizontalOptions="Center" 
                VerticalOptions="End"     
                Grid.Row="0" />
        </Grid>
    </Shell.FlyoutHeader>
    <!-- Flyout Item: Dashboard with Tabs -->
    <TabBar>
        <!--Title="Dashboard" Route="{x:Static common:RouteConstants.MainRoute}">-->
        <Tab Title="Home" Icon="home.png">
            <ShellContent 
            Route="home"
            ContentTemplate="{DataTemplate views:HomePage}"
            </ShellContent>
        </Tab>
        <Tab Title="Page1" Icon="1.png">
            <ShellContent 
            Route="pag1"
            ContentTemplate="{DataTemplate views:NewsFeedPage}" 
            </ShellContent>
        </Tab>
        <Tab Title="Page2" Icon="chat.png">
            <ShellContent Title="chief" Icon="2.png" ContentTemplate="{DataTemplate views:ElJefesPage}"/>
            <ShellContent Title="Guides" Icon="3.png" ContentTemplate="{DataTemplate views:MyGuidesPage}"/>
            <ShellContent Title="Buddies" Icon="4.png" ContentTemplate="{DataTemplate views:FriendsPage}"/>
        </Tab>
    </TabBar>
    <FlyoutItem Title="Profile" Icon="profile.png">
        <ShellContent
        Route="profile"
        Shell.TabBarIsVisible="True"
        ContentTemplate="{DataTemplate views:ProfilePage}" />
    </FlyoutItem>
    <MenuItem Text="Help" IconImageSource="help.png" Clicked="OnHelpClick"/>
    <MenuItem Text="About" IconImageSource="about.png" Clicked="OnAboutClick"/>
    <!-- Flyout Footer -->
    <Shell.FlyoutFooter>
        <Grid BackgroundColor="{StaticResource Primary}" 
              Padding="20"
              HeightRequest="60">
            <Label Text="{Binding Source={x:Static local:AppShell.AppVersion}}" 
                   TextColor="White" 
                   HorizontalOptions="Center" 
                   VerticalOptions="Center"/>
        </Grid>
    </Shell.FlyoutFooter>
</Shell>

Answer 1

Hello,

Maui Shell currently does not support Flyout and Tabbar being enabled at the same time.

According to the comments in the Tabbar documentation, Flyout will be disabled when the Tabbar is enabled.

The TabBar type disables the flyout.

If you need to enable both Flyout and Tabbar in Maui program, you need to set the MainPage to a FlyoutPage that contains TabbedPage. For example:

<FlyoutPage ...
             >
    <FlyoutPage.Detail>
        <NavigationPage>
            <x:Arguments>
                <local:MyTabbedPage></local:MyTabbedPage>
            </x:Arguments>
        </NavigationPage>
    </FlyoutPage.Detail>
    <FlyoutPage.Flyout>
        <local:NewPage></local:NewPage>
    </FlyoutPage.Flyout>

</FlyoutPage>

Best Regards,

Alec Liu.

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.