如何在MAUI Shell中替换默认导航栏为自定义控件？

一、核心结论 #

完全可以替换MAUI Shell的默认导航栏为自定义控件，核心思路是隐藏原生Shell导航栏，通过自定义控件实现导航栏的全部功能（汉堡菜单触发、标题展示、尾部操作按钮），同时通过布局优化解决标题居中问题。

二、具体实现步骤 #

1. 全局隐藏Shell原生导航栏 #

在AppShell.xaml中设置全局属性，关闭默认导航栏：

<Shell
    ...
    Shell.NavBarIsVisible="False">
    <!-- 你的Shell页面结构 -->
</Shell>

2. 改造自定义TitleView，适配Shell汉堡菜单 #

基于你现有的TitleView控件，通过Grid布局划分区域，确保标题居中同时保留汉堡菜单触发功能：

<ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="YourApp.Controls.TitleView">
    <!-- 三列Grid：左侧汉堡、中间标题、右侧操作图标 -->
    <Grid ColumnDefinitions="Auto,*,Auto">
        <!-- 汉堡菜单按钮：绑定Shell的Flyout切换命令 -->
        <Button Grid.Column="0"
                IconImageSource="hamburger.png"
                Command="{Binding Source={RelativeSource AncestorType={x:Type Shell}}, Path=FlyoutToggleCommand}"
                BackgroundColor="Transparent"
                Margin="10,0"/>
        
        <!-- 居中标题：占据中间全部剩余空间 -->
        <Label Grid.Column="1"
               Text="{Binding Title}"
               HorizontalTextAlignment="Center"
               FontSize="Title"
               FontAttributes="Bold"/>
        
        <!-- 右侧操作图标 -->
        <ImageButton Grid.Column="2"
                     IconImageSource="settings.png"
                     BackgroundColor="Transparent"
                     Margin="0,0,10,0"
                     Command="{Binding RightActionCommand}"/>
    </Grid>
</ContentView>

3. 在页面中使用自定义TitleView #

在目标ContentPage中添加自定义导航栏，作为页面头部：

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:controls="clr-namespace:YourApp.Controls"
             x:Class="YourApp.Views.TestPage">
    <Grid>
        <!-- 自定义导航栏 -->
        <controls:TitleView Title="Test" 
                            RightActionCommand="{Binding NavigateToSettingsCommand}"/>
        
        <!-- 页面主体内容 -->
        <ScrollView Grid.Row="1">
            <!-- 你的页面内容 -->
        </ScrollView>
    </Grid>
</ContentPage>

4. 标题居中问题的关键解决逻辑 #

通过Grid的三列布局确保标题始终居中：

• 左右两列设为Auto，仅适配汉堡按钮和右侧图标的宽度
• 中间列设为*，占据导航栏剩余所有空间，标题设置HorizontalTextAlignment="Center"后，无论右侧是否有图标，都会保持水平居中。

三、可选优化：全局统一导航栏 #

如果所有页面需要相同的导航栏样式，可在AppShell中统一嵌套布局，避免重复代码：

<ShellContent Title="Home" ContentTemplate="{DataTemplate views:HomePage}">
    <ShellContent.Content>
        <Grid>
            <controls:TitleView Title="Home"/>
            <views:HomePage Grid.Row="1"/>
        </Grid>
    </ShellContent.Content>
</ShellContent>

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