How to use FlyoutPage instead of Shell

[AmirImam]

Hi I want to use FlyoutPage instead of Shell, but when I replaced Shell in AppShell.razor with FlyoutPage it shows blank page AppShell.razor:

<FlyoutPage Title="Flyout">
    <Flyout>
        <ContentPage Title="Menu">
            <StackLayout>
                <Button Text="Page 1" />
                <Button Text="Page 2" />
            </StackLayout>
        </ContentPage>
    </Flyout>
    <Detail>
        <MainPage />
    </Detail>
</FlyoutPage>

App.cs:

using BlazorBindings.Maui;
namespace App1
{
    public partial class App : Application
    {
        public App(MauiBlazorBindingsRenderer renderer)
        {
            renderer.AddComponent<AppShell>(this);
        }
    }
}

[Dreamescaper]

I haven't ever used FlyoutPage myself, but looking at the code, I suppose that you shouldn't add wrapping ContentPage yourself, it is done automatically. So something like this "works"

<FlyoutPage Title="Flyout">
    <Flyout>
        <StackLayout>
            <Button Text="Page 1" />
            <Button Text="Page 2" />
        </StackLayout>
    </Flyout>
    <Detail>
        <ScrollView>
            <VerticalStackLayout Spacing="25"
                                 Padding="new(30,0)"
                                 VerticalOptions="LayoutOptions.Center">

                <Image Source="dotNetBotSource"
                       HeightRequest="200"
                       HorizontalOptions="LayoutOptions.Center" />

                <Label Text="Hello, World!"
                       FontSize="32"
                       HorizontalOptions="LayoutOptions.Center" />

                <Label Text="Welcome to .NET Multi-platform App UI"
                       FontSize="18"
                       HorizontalOptions="LayoutOptions.Center" />

                <Button Text="@ButtonText"
                        HorizontalOptions="LayoutOptions.Center"
                        OnClick="OnCounterClicked" />
            </VerticalStackLayout>
        </ScrollView>
    </Detail>
</FlyoutPage>

That said, I am not sure why it was done this way, maybe it should be revised to allow you to create a page yourself.

I'm wondering, though, what is the use-case to use FlyoutPage over Shell? What advantages does the former bring?

[AmirImam]

Thank you for your response. I always use FlyoutPage (formerly MasterDetailPage) as the app's main page. I think there is a bug because it doesn't work either with wrapping ContentPage or not

[ac-c2it]

@AmirImam I found the sample project MobileBlazorBindingsXaminals has a working Flyout.

[Dreamescaper]

@ac-c2it Xaminals project uses Shell, not FlyoutPage directly.

@AmirImam Sorry for a delay. It "works" for me if I don't wrap it in ContentPage. But I cannot change any Page properties, and I can't wrap this page in NavigationPage, so it should be reworked anyway.

Currently we're working with @Eilon to move all my changes back to https://github.com/dotnet/MobileBlazorBindings repo. Would you be able to log this issue there? As I hope that it will be worked on in that repository.