combining shell with navigation with window navigation

Question

As you already know, .net 9 is out and with that we have a tithe bar for windows

I have my appshell, that enable me to go page to page

<!--  Flyout for Desktop  -->
    <FlyoutItem
        Title="{x:Static rex:AppResource.HomePage}"
        Icon="home.png">
        <ShellContent
            ContentTemplate="{DataTemplate views:HomePage}"
            Route="HomePage" />
    </FlyoutItem>
    <FlyoutItem
        Title="{x:Static rex:AppResource.Stations}"
        Icon="stations.png">
        <ShellContent
            ContentTemplate="{DataTemplate views:ChargingStationsMapPage}"
            Route="ChargingStationsMapPage" />
    </FlyoutItem>
    <FlyoutItem
        Title="{x:Static rex:AppResource.TurbinesCollection}"
        Icon="turbines.png">
        <ShellContent
            ContentTemplate="{DataTemplate views:TurbinesCollectionPage}"
            Route="TurbinesCollectionPage" />
    </FlyoutItem>
    <FlyoutItem
        Title="{x:Static rex:AppResource.Support}"
        Icon="help_desktop.png">
        <ShellContent
            ContentTemplate="{DataTemplate views:SupportPage}"
            Route="SupportPage"
            Shell.NavBarIsVisible="False" />
    </FlyoutItem>
    <!--  TabBar for Phone  -->
    <TabBar>
        <Tab
            Title="{x:Static rex:AppResource.HomePage}"
            Icon="home_mobile.png">
            <ShellContent
                ContentTemplate="{DataTemplate views:HomePage}"
                Route="HomePage"
                Shell.NavBarIsVisible="False" />
        </Tab>
        <Tab
            Title="{x:Static rex:AppResource.Stations}"
            Icon="station_mobile.png">
            <ShellContent
                ContentTemplate="{DataTemplate views:ChargingStationsMapPage}"
                Route="ChargingStationsMapPage" />
        </Tab>
        <Tab
            Title="{x:Static rex:AppResource.TurbinesCollection}"
            Icon="turbines_mobile.png">
            <ShellContent
                ContentTemplate="{DataTemplate views:TurbinesCollectionPage}"
                Route="TurbinesCollectionPage" />
        </Tab>
        <Tab
            Title="{x:Static rex:AppResource.Support}"
            Icon="help_phone.png">
            <ShellContent
                ContentTemplate="{DataTemplate views:SupportPage}"
                Route="SupportPage" />
        </Tab>
    </TabBar>

I have flyout for desktop and Tab bar or android

let me explain in a video, what I am trying to do, because is easier for mehttps://reccloud.com/u/r3g8shu

Answer 1

Hello,

In Maui, if you set both Flyout and Tabbar at the same time, Flyout has a higher priority than Tabbar. To solve this problem, you can set the IsVisible property for different platforms to prevent Flyout from being displayed on the mobile side, so that Tabbar can be used as the navigation system.

Please refer to the following code:

// Set the visibility of each FlyoutItem to hide it on mobile.
 <FlyoutItem IsVisible="{OnPlatform Default=false, WinUI=true}" ...

// Since the Tab is contained in the Tabbar, you need to set the visibility of the Tabbar.
<TabBar IsVisible="{OnPlatform Default=true, WinUI=false}">

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.