.NET MAUI Shell中如何导航至关联选中项的标签页页面？

由于.NET MAUI Shell与TabbedPage的导航机制冲突，你可以直接利用Shell内置的标签页功能来实现需求，具体步骤如下：

1. 在Shell中定义标签页路由结构 #

打开AppShell.xaml，注册包含「摘要」和「详情」标签的路由组，将其设置为不可见（避免出现在侧边栏）：

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

    <!-- 主页面路由 -->
    <ShellContent Route="MainPage" ContentTemplate="{DataTemplate views:MainPage}" />

    <!-- 项目详情标签页组 - 隐藏在侧边栏外 -->
    <FlyoutItem Route="ItemDetailGroup" FlyoutItemIsVisible="False">
        <Tab Title="摘要">
            <ShellContent Route="ItemSummary" ContentTemplate="{DataTemplate views:ItemSummaryPage}" />
        </Tab>
        <Tab Title="详情">
            <ShellContent Route="ItemDetails" ContentTemplate="{DataTemplate views:ItemDetailsPage}" />
        </Tab>
    </FlyoutItem>

</Shell>

2. 列表项选中时导航到标签页组 #

在主页面的列表选中事件处理方法中，通过Shell路由导航到标签页组，并传递项目ID参数：

private async void OnItemSelected(object sender, SelectedItemChangedEventArgs e)
{
    if (e.SelectedItem is YourItemModel selectedItem)
    {
        // 导航到摘要标签（默认显示第一个Tab），并传递参数
        await Shell.Current.GoToAsync($"//ItemSummary?ItemId={selectedItem.Id}");
        // 若需直接导航到详情标签，使用：//ItemDetails?ItemId={selectedItem.Id}
    }
}

3. 在标签页中接收并使用参数 #

在「摘要」和「详情」页面中，通过QueryProperty特性接收路由参数，然后加载对应数据：

摘要页示例（ItemSummaryPage.cs） #

using Microsoft.Maui.Controls;

namespace YourAppNamespace.Views;

[QueryProperty(nameof(ItemId), "ItemId")]
public partial class ItemSummaryPage : ContentPage
{
    public string ItemId { get; set; }

    public ItemSummaryPage()
    {
        InitializeComponent();
    }

    protected override void OnAppearing()
    {
        base.OnAppearing();
        // 根据ItemId加载项目摘要数据
        LoadSummaryData(ItemId);
    }

    private void LoadSummaryData(string itemId)
    {
        // 实现你的数据加载逻辑，比如从API或本地数据库获取数据
    }
}

详情页示例（ItemDetailsPage.cs） #

using Microsoft.Maui.Controls;

namespace YourAppNamespace.Views;

[QueryProperty(nameof(ItemId), "ItemId")]
public partial class ItemDetailsPage : ContentPage
{
    public string ItemId { get; set; }

    public ItemDetailsPage()
    {
        InitializeComponent();
    }

    protected override void OnAppearing()
    {
        base.OnAppearing();
        // 根据ItemId加载项目详情数据
        LoadDetailsData(ItemId);
    }

    private void LoadDetailsData(string itemId)
    {
        // 实现你的数据加载逻辑
    }
}

替代方案：使用CommunityToolkit.Maui的TabView #

如果你更倾向于使用独立的标签页组件而非Shell原生结构，可以安装CommunityToolkit.Maui NuGet包，然后创建一个包含TabView的ContentPage，再通过Shell路由导航到该页面：

示例页面（ItemTabbedPage.xaml） #

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
             x:Class="YourAppNamespace.Views.ItemTabbedPage"
             Title="项目详情">

    <toolkit:TabView>
        <toolkit:TabViewItem Header="摘要">
            <views:ItemSummaryPage />
        </toolkit:TabViewItem>
        <toolkit:TabViewItem Header="详情">
            <views:ItemDetailsPage />
        </toolkit:TabViewItem>
    </toolkit:TabView>

</ContentPage>

然后注册该页面的路由，并在列表选中时导航过去，同样通过QueryProperty传递参数即可。

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