MAUI中ShellItem视图下如何自定义导航标题视图？

在MAUI Shell导航结构中，NavigationPage.TitleView不再生效，因为Shell采用了全新的导航架构，需要使用Shell专属的标题自定义方式：

一、单页面自定义标题栏 #

直接在目标页面（如MainPage）中使用Shell.TitleView替代NavigationPage.TitleView，可自由添加图标、文字等元素：

<?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:localize="clr-namespace:FleetHDMobile.Resources.Strings"
             Shell.FlyoutBehavior="Flyout"
             x:Class="FleetHDMobile.Views.MainPage">

    <!-- 自定义Shell标题栏 -->
    <Shell.TitleView>
        <HorizontalStackLayout HeightRequest="44" WidthRequest="300" Spacing="8" Padding="16,0">
            <!-- 左侧图标 -->
            <Image Source="your_icon.png" HeightRequest="24" WidthRequest="24" />
            <!-- 标题文字 -->
            <Label Text="XXX" FontSize="Large" VerticalOptions="Center" />
            <!-- 右侧图标（可选） -->
            <Image Source="notification_icon.png" HeightRequest="24" WidthRequest="24" HorizontalOptions="EndAndExpand" />
        </HorizontalStackLayout>
    </Shell.TitleView>

    <ScrollView>
        <!-- 页面内容 -->
    </ScrollView>
</ContentPage>

二、全局统一自定义标题栏 #

如果需要所有Shell页面使用相同的标题栏样式，可在AppShell.xaml中设置Shell.HeaderTemplate实现全局复用：

<?xml version="1.0" encoding="UTF-8" ?>
<Shell
    x:Class="MyApp.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:localize="clr-namespace:FleetHDMobile.Resources.Strings"
    xmlns:local="clr-namespace:FleetHDMobile.Views"
    Shell.FlyoutBehavior="Disabled">

    <!-- 全局标题栏模板 -->
    <Shell.HeaderTemplate>
        <DataTemplate>
            <HorizontalStackLayout HeightRequest="44" Padding="16,0">
                <!-- 菜单图标（适配Flyout） -->
                <Image Source="menu_icon.png" HeightRequest="24" WidthRequest="24" />
                <!-- 绑定页面Title -->
                <Label Text="{Binding Title}" Margin="16,0" FontSize="Large" VerticalOptions="Center" />
                <!-- 右侧通用图标 -->
                <Image Source="settings_icon.png" HeightRequest="24" WidthRequest="24" HorizontalOptions="EndAndExpand" />
            </HorizontalStackLayout>
        </DataTemplate>
    </Shell.HeaderTemplate>

    <ShellItem Route="MainPage">
        <ShellContent 
            Title="MainPage"
            ContentTemplate="{DataTemplate local:MainPage}"
            />
    </ShellItem>
    <!-- 其他ShellItem/ShellContent -->
</Shell>

关键说明 #

• Shell.TitleView优先级高于全局Shell.HeaderTemplate，单个页面设置Shell.TitleView可覆盖全局样式。
• 确保Shell标题栏未被隐藏：检查是否设置Shell.TitleVisibility="Collapsed"，若有则改为Visible或移除该属性。
• 图标资源需放置在MAUI项目Resources/Images目录下，并在csproj中配置为MauiImage类型。

内容的提问来源于stack exchange，提问作者Chuck Krutsinger