When I use .NET MAUI, how can I make a menu bar directly under the title bar.

Brown SHI 0 Reputation points
2023-03-15T15:08:37.7733333+00:00

I want to make a menu bar directly under the title bar, but with the .NET MAUI app template, it has AppShell.xaml file, and when I add menu in file MainPage.xaml according to this link https://learn.microsoft.com/en-us/dotnet/maui/user-interface/menu-bar?view=net-maui-7.0, it is influenced by the documents in AppShell.xaml. How can I get the menu like in the link.

Thanks very much.

1678892882882

1678892524887(1)

1678892362634

1678892272900

.NET MAUI
.NET MAUI
A Microsoft open-source framework for building native device applications spanning mobile, tablet, and desktop.
3,067 questions
{count} votes

1 answer

Sort by: Most helpful
  1. Leon Lu (Shanghai Wicresoft Co,.Ltd.) 70,811 Reputation points Microsoft Vendor
    2023-03-16T05:41:24.37+00:00

    Hello,

    Do you want to remove Home Title?

    If so, you can remove the property Title="Home" in the <ShellContent> like following code.

    <ShellContent      
            ContentTemplate="{DataTemplate local:MainPage}"
            Route="MainPage" />
    

    Then, if you want to change the titlebar's background color to white and title's text color to black, you can add following code to your Contentpage

    <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
                 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    
                 Shell.BackgroundColor="White"
                 Shell.TitleColor="Black"
    
                 x:Class="AppshellDemoinWindows.MainPage">
    

    Best Regards,

    Leon Lu


    If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

    Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.