在.NET MAUI中导航至详情页时保留TabBar的问题

问题分析 #

• 第一种Shell结构中，详情页位于TabBar外部，使用///绝对路由导航时，会跳出TabBar的导航层级，导致TabBar消失。
• 第二种结构将详情页直接放在Tab下的ShellContent中，Shell会自动生成额外的导航栏（标题下方的栏），这是因为Tab下的多个ShellContent被视为同级顶级页面，触发了Shell的默认导航栏逻辑。

正确实现方案 #

1. 调整Shell结构

保持TabBar仅包含主页面，详情页作为独立路由注册（可在XAML或代码中注册）：

<Shell
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:YourNamespace"
    x:Class="YourNamespace.AppShell">

    <TabBar>
        <ShellContent
            Title="Main Page 1"
            Icon="icon1.png"
            ContentTemplate="{DataTemplate local:MainPage1}" 
            Route="MainPage1"/>

        <ShellContent
            Title="Main Page 2"
            Icon="icon2.png"
            ContentTemplate="{DataTemplate local:MainPage2}" 
            Route="MainPage2"/>
    </TabBar>

    <!-- 注册详情页路由，作为全局子路由 -->
    <ShellContent
            ContentTemplate="{DataTemplate local:DetailPage1}" 
            Route="DetailPage1"/>

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

2. 使用相对路由导航

移除导航路径中的///，采用相对路由从当前主页面导航到详情页，这样详情页会被添加到当前Tab的导航栈中，TabBar将保持显示：

// 从MainPage2导航到DetailPage2，传递参数
await Shell.Current.GoToAsync(nameof(DetailPage2), navigationParameter);

3. 可选：代码注册路由（更灵活）

如果偏好代码注册路由，可在App.xaml.cs中添加路由注册逻辑：

protected override void OnStart()
{
    base.OnStart();
    // 注册详情页路由
    Routing.RegisterRoute(nameof(DetailPage1), typeof(DetailPage1));
    Routing.RegisterRoute(nameof(DetailPage2), typeof(DetailPage2));
}

为什么这样有效 #

• 相对路由GoToAsync(nameof(DetailPage2))会在当前Tab的导航栈中推入详情页，而非跳出TabBar层级，因此TabBar持续显示。
• 避免在Tab下直接放置多个ShellContent，防止Shell自动生成额外的导航栏，同时保持导航结构的清晰性。

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