.NET Maui桌面应用：如何分离菜单栏与ShellContent.Title

在.NET Maui桌面应用中，当页面添加MenuBarItems后，ShellContent.Title会被挤在菜单末尾，视觉效果不专业。以下是几种可行的解决方案：

1. 将标题放入系统原生标题栏（推荐，原生体验） #

直接设置Windows/macOS的窗口标题，完全贴合桌面应用的原生交互习惯：

在App.xaml.cs中全局设置 #

protected override Window CreateWindow(IActivationState activationState)
{
    var window = base.CreateWindow(activationState);
#if WINDOWS || MACOS
    window.Title = "Home"; // 设置应用/页面标题
#endif
    return window;
}

在页面中动态设置（支持多页面不同标题） #

在MainPage.xaml.cs的构造函数中添加：

public MainPage()
{
    InitializeComponent();
#if WINDOWS
    Application.Current.Windows[0].Title = "Home";
#elif MACOS
    var platformWindow = Application.Current.Windows[0].Handler.PlatformView as AppKit.NSWindow;
    platformWindow.Title = "Home";
#endif
}

2. 自定义标题区域（放在菜单上方/下方） #

放弃Shell自带的TitleView，在页面内手动布局标题区域，完全控制位置：

标题在菜单上方 #

修改MainPage.xaml：

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="SampleMauiApp.MainPage">

    <Grid>
        <!-- 自定义标题栏 -->
        <StackLayout HeightRequest="48" BackgroundColor="#F5F5F5" VerticalOptions="Start">
            <Label Text="Home" 
                   VerticalOptions="Center" 
                   HorizontalOptions="Center" 
                   FontSize="Large" 
                   TextColor="#2C3E50" />
        </StackLayout>

        <!-- 页面内容（下移避开标题栏） -->
        <ScrollView Margin="0,48,0,0">
            <VerticalStackLayout Spacing="25" Padding="30,0" VerticalOptions="Center">
                <Image Source="dotnet_bot.png"
                       SemanticProperties.Description="Cute dot net bot waving hi to you!"
                       HeightRequest="200"
                       HorizontalOptions="Center" />
                <Label Text="Hello, World!"
                       SemanticProperties.HeadingLevel="Level1"
                       FontSize="32"
                       HorizontalOptions="Center" />
                <!-- 其他页面控件保持不变 -->
            </VerticalStackLayout>
        </ScrollView>
    </Grid>

    <!-- 菜单栏保留原代码 -->
    <ContentPage.MenuBarItems>
        <MenuBarItem Text="File">
            <MenuFlyoutItem Text="New" />
            <MenuFlyoutItem Text="Open..." />
            <MenuFlyoutItem Text="Exit" />
        </MenuBarItem>
        <MenuBarItem Text="View">
            <MenuFlyoutSubItem Text="Change Location">
                <MenuFlyoutItem Text="New York, USA"
                                Command="{Binding ChangeLocationCommand}"
                                CommandParameter="NewYork" />
            </MenuFlyoutSubItem>
            <MenuFlyoutItem Text="Add Location"
                            Command="{Binding AddLocationCommand}" />
        </MenuBarItem>
        <MenuBarItem Text="Help">
            <MenuFlyoutItem Text="About..."/>
        </MenuBarItem>
    </ContentPage.MenuBarItems>
</ContentPage>

标题在菜单下方 #

只需调整标题区域的VerticalOptions="End"，同时修改ScrollView的Margin="0,0,0,48"即可。

3. 修复Shell.TitleView的显示 #

如果想继续使用Shell的TitleView，可尝试强制显示导航栏，让标题与菜单栏分离：

修改AppShell.xaml：

<Shell
    x:Class="SampleMauiApp.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:SampleMauiApp"
    Shell.FlyoutBehavior="Disabled"
    Shell.NavBarIsVisible="True"> <!-- 强制显示导航栏 -->

    <Shell.TitleView>
        <StackLayout>
            <Label Text="Home" VerticalOptions="Center" HorizontalOptions="Center" FontSize="Large" TextColor="Red" />
        </StackLayout>
    </Shell.TitleView>

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

</Shell>

注意：此方案会在桌面端显示额外的导航栏，适合需要统一跨平台标题样式的场景。

内容的提问来源于stack exchange，提问作者Charles Jenkins