combining shell with navigation with window navigation

Eduardo Gomez Romero 905

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

1 answer

Yonglun Liu (Shanghai Wicresoft Co,.Ltd.) 44,481 Reputation points Microsoft Vendor

2024-11-21T06:16:38.2033333+00:00
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.
Please sign in to rate this answer.
Eduardo Gomez Romero 905 Reputation points

2024-11-21T08:54:41.0733333+00:00

No, the is not the issue,

I Have a condition if I am on desktop or Mobile

Expected behavior

because we have a new control named title bar for desktop, or desktop, I want all my page to have the title bar

the issue

in desktops, we have to open the window, every time we navigate, so how can I put the shell in a window, so I have the same smooth navigation that the shell provides
Sign in to comment

Use comments to ask for clarification, additional information, or improvements to the question.

Share via

combining shell with navigation with window navigation

1 answer

Your answer