FlyoutPage.Detail set from code doesn't show navigation bar

Question

So I'm trying to do dependency injection from the start of my app. I'm using a Flyout as the root page of my app, so I need to assign a page to Flyout.Detail. Maybe I'm missing something, but I can't set the Detail page in XAML because I can't specify the parameter in my Constructor. I can't find anything online about it.

<?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"
            xmlns:local="clr-namespace:MyApp"
            xmlns:view="clr-namespace:MyApp.View"
            xmlns:viewmodel="clr-namespace:MyApp.ViewModel"
            x:Class="MyApp.View.FlyoutMenuRoot"
            Title="FlyoutMenuRoot">
    <FlyoutPage.Flyout>
        <view:FlyoutMenuPage x:Name="flyoutMenuRoot" />
    </FlyoutPage.Flyout>
    <<FlyoutPage.Detail>
        <NavigationPage>
            <x:Arguments>
                <view:BudgetViewPage />
            </x:Arguments>
        </NavigationPage>
    </FlyoutPage.Detail>
</FlyoutPage>

So I'm opting to set the Detail page in the code-behind:

public partial class FlyoutMenuRoot : FlyoutPage
{
    DataService dataService;

    public FlyoutMenuRoot(DataService dataService)
    {
        InitializeComponent();
        this.dataService = dataService;
        Detail = new BudgetViewPage(this.dataService);
    }
}

Maybe I'm missing something there as the XAML references NavigationPage before the x:Arguments.

At any rate, the Navigation bar doesn't show up at the top of the screen, so no burger icon. However, I can swipe from the left part of the screen to pull out the Flyout page. Am I missing soemthing? When I have a parameterless constructor for the Detail page and call it from the XAML, the Navigation bar and burger icon show up.

I sure do feel like I'm missing something...

Answer 1

you need to wrap it in a NavigationPage

Detail = new NavigationPage(new BudgetViewPage(this.dataService));