Search code examples
.netxamlmenubarmaui-blazor

Blazor Maui Hybrid app does not show MenuBar

When I try to create a MenuBar in a Maui Blazor Hybrid app it does not display, but when I use the same XAML it does in a normal Maui app. Is it just not possible in a hybrid app? How can I fix this?

Hybrid app:

<?xml version="1.0" encoding="utf-8" ?>
    <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:Stamp"
            xmlns:pages="clr-namespace:Stamp.Components.Pages"
             x:Class="Stamp.MainPage"
             BackgroundColor="{DynamicResource PageBackgroundColor}">

    <ContentPage.MenuBarItems>
        <MenuBarItem Text="File"></MenuBarItem>
    </ContentPage.MenuBarItems>


</ContentPage>

Maui app:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Menuitem_test.MainPage">

    <ContentPage.MenuBarItems>
        <MenuBarItem Text="File"></MenuBarItem>
    </ContentPage.MenuBarItems>

</ContentPage>

Image of the empty page it makes in the Hybrid app

Solution

  • From the doc,

    NET MAUI desktop apps will display a menu bar, containing menu items, when they are added to any ContentPage that's hosted in a NavigationPage or a Shell app.

    So you could easily use a NavigationPage in the App.xaml.cs, (or use Shell)

    MainPage = new NavigationPage(new MainPage());

    For more info, you could also refer to Display a menu bar in a .NET MAUI desktop app.