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

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));