CODEWITHSUNDEEP
mauimaster-detailflyout
ErnestJ
ErnestJ

Reputation: 225

Maui Shell app how to implement master/detail (FlyoutPage)?

Looking for some advice/solution. I'm converting app from Xamarin.Forms to Maui and stuck on FlyoutPage. In old app I've used Prism and FlyoutPage to setup master/detail pages for tablets, so user could swipe or tap on hamburger menu to display list of items and once tapped on item I would load details page, all worked well.

Now in Maui I don't use Prism, but switched to Shell, which works surprisingly well for our massive enterprise app. In AppShell I've Flyout enabled, like this:

<Shell
    x:Class="Happen.Mobile.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
    FlyoutBehavior="Flyout"
    Title="App"
    x:Name="this">

Then some menu options added with MenuItemTemplate(s). So Shell Flyout is used as main menu to access extra options which don't belong to home page.

From home page I need to push master/detail page (FlyoutPage) and this is where I'm stuck. Reading Maui docs it tells that FlyoutPage is not supported by Shell, but in iOS I can push FlyoutPage without exception being thrown:

await Shell.Current.GoToAsync( "TestFlyout", true, parameters );

This is how I setup FlyoutPage:

<?xml version="1.0" encoding="utf-8"?>
<FlyoutPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Views.TestFlyout"
             FlyoutLayoutBehavior="Default"
             IsPresented="True">

    <FlyoutPage.Flyout>
                <ContentPage Title="List" IconImageSource="hamburger.png" BackgroundColor="Aqua">
                    <VerticalStackLayout>
                        <Label Text="This is menu"></Label>
                    </VerticalStackLayout>
                </ContentPage>
    </FlyoutPage.Flyout>
    
    <FlyoutPage.Detail>
            <ContentPage Title="Object" IconImageSource="hamburger.png">
                <VerticalStackLayout BackgroundColor="Bisque">
                    <Label Text="This is object" VerticalOptions="Center" HorizontalOptions="Center"/>    
                </VerticalStackLayout>
            </ContentPage>
    </FlyoutPage.Detail>
</FlyoutPage>

And this is how it looks (notice there is not hamburger icon nor title):

enter image description here

Now when I close/open Flyout, both labels disappears:

enter image description here

So clearly something is either incompatible or broken. Question is - are we not suppose to use FlyoutPage with Shell app at all and if yes then why? Also, how else I could achieve similar master/detail functionality?

Upvotes: 2

Views: 1010

Answers (1)

Shuowen He-MSFT
Shuowen He-MSFT

Reputation: 682

Indeed, FlyoutPage is incompatible with .NET MAUI Shell apps. If you use the Shell structure, you can display a list of items by setting the tag in the AppShell.xaml file.

Depending on the FlyoutPage code you provide, you can refer to the following code for design:

<Shell ...>

    <ShellContent
        Title="Object"
        //It is recommended to place the main page of the project in a new contentpage
        ContentTemplate="{DataTemplate local:ObjectPage}"
        Route="ObjectPage"/>

    <Shell.FlyoutHeaderTemplate>
        <DataTemplate>
            <Grid  HeightRequest="200">
                   <Label Text="This is menu"></Label>
            </Grid>            
        </DataTemplate>
    </Shell.FlyoutHeaderTemplate>

</Shell>

For more details about Flyout in Shell, you can refer to .NET MAUI Shell flyout

Upvotes: 1

Related Questions