如何在使用AppShell的.NET MAUI应用中添加第二组标签页

我想在通过AppShell定义的标签页打开的页面里再加一组二级标签页，但官方文档说TabbedPage和用AppShell的.NET MAUI应用不兼容。怎么用标准XAML、不靠第三方工具实现这个需求？想要的效果是页面内部有独立的标签栏，能切换不同内容。

我的AppShell标签代码如下：

<FlyoutItem Title="Home" Icon="home.png">
   <Tab Title="Tiger" Icon="tiger.png">
      <ShellContent Route="Tiger" ContentTemplate="{DataTemplate local: Tiger}" />
   </Tab>
   <Tab Title="Giraffe" Icon="giraffe.png">
       <ShellContent Route="Giraffe" ContentTemplate="{DataTemplate local: Giraffe}" />
   </Tab>
   <Tab Title="Moose" Icon="moose.png">
       <ShellContent Route="Moose" ContentTemplate="{DataTemplate local: Moose}" />
   </Tab>
   <Tab Title="Elephant" Icon="elephant.png">
       <ShellContent Route="Elephant" ContentTemplate="{DataTemplate local: Elephant}" />
   </Tab>
</FlyoutItem>

因为TabbedPage和AppShell冲突，你可以用两种标准实现方式完成需求：

方法1：页面内自定义标签栏（适合独立内容切换） #

以Tiger页面为例，用Grid布局拆分区域，底部放标签按钮组，上方用ContentView承载切换的内容。

Tiger页面XAML代码 #

<?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:local="clr-namespace:你的应用命名空间"
             x:Class="你的应用命名空间.Tiger"
             Title="Tiger">
    <Grid>
        <!-- 内容展示区：用于切换不同子视图 -->
        <ContentView x:Name="MainContentArea" Margin="0,0,0,60">
            <!-- 默认显示第一个子页面 -->
            <local:TigerSubPage1 />
        </ContentView>

        <!-- 底部标签栏 -->
        <HorizontalStackLayout VerticalOptions="End" BackgroundColor="#f0f0f0" HeightRequest="60">
            <Button Text="子页1" 
                    StyleClass="TabButton"
                    Clicked="OnTab1Clicked"
                    x:Name="Tab1Btn"/>
            <Button Text="子页2" 
                    StyleClass="TabButton"
                    Clicked="OnTab2Clicked"/>
            <Button Text="子页3" 
                    StyleClass="TabButton"
                    Clicked="OnTab3Clicked"/>
        </HorizontalStackLayout>
    </Grid>
</ContentPage>

配置样式与后台逻辑 #

1. 定义标签按钮样式（在App.xaml中）

统一按钮样式，区分选中状态：

<Style TargetType="Button" x:Key="TabButton">
    <Setter Property="FlexLayout.Grow" Value="1"/>
    <Setter Property="BorderWidth" Value="0"/>
    <Setter Property="BackgroundColor" Value="Transparent"/>
    <Setter Property="TextColor" Value="#666"/>
    <Setter Property="FontSize" Value="14"/>
</Style>
<Style TargetType="Button" x:Key="SelectedTabButton" BasedOn="{StaticResource TabButton}">
    <Setter Property="TextColor" Value="#007AFF"/>
    <Setter Property="FontAttributes" Value="Bold"/>
</Style>

2. 实现切换逻辑（Tiger.xaml.cs）

点击标签时更新内容区视图，并同步按钮选中样式：

namespace 你的应用命名空间;

public partial class Tiger : ContentPage
{
    public Tiger()
    {
        InitializeComponent();
        // 默认选中第一个标签
        UpdateTabSelection(Tab1Btn);
    }

    private void OnTab1Clicked(object sender, EventArgs e)
    {
        MainContentArea.Content = new TigerSubPage1();
        UpdateTabSelection(sender as Button);
    }

    private void OnTab2Clicked(object sender, EventArgs e)
    {
        MainContentArea.Content = new TigerSubPage2();
        UpdateTabSelection(sender as Button);
    }

    private void OnTab3Clicked(object sender, EventArgs e)
    {
        MainContentArea.Content = new TigerSubPage3();
        UpdateTabSelection(sender as Button);
    }

    // 更新标签选中样式
    private void UpdateTabSelection(Button selectedBtn)
    {
        // 重置所有按钮样式
        Tab1Btn.Style = (Style)Application.Current.Resources["TabButton"];
        Tab2Btn.Style = (Style)Application.Current.Resources["TabButton"];
        Tab3Btn.Style = (Style)Application.Current.Resources["TabButton"];
        // 设置当前选中按钮样式
        selectedBtn.Style = (Style)Application.Current.Resources["SelectedTabButton"];
    }
}

3. 创建子页面

制作轻量的ContentView作为子页面，示例TigerSubPage1：

<?xml version="1.0" encoding="utf-8" ?>
<ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="你的应用命名空间.TigerSubPage1">
    <VerticalStackLayout HorizontalOptions="Center" VerticalOptions="Center">
        <Label Text="老虎子页面1" FontSize="24"/>
    </VerticalStackLayout>
</ContentView>

方法2：用Shell嵌套Tab（适合路由导航场景） #

如果二级标签需要和Shell的路由系统集成（支持跳转、导航栈管理），可以直接在Shell的Tab下嵌套多个ShellContent，二级标签会显示在Shell的标签栏区域：

<FlyoutItem Title="Home" Icon="home.png">
   <Tab Title="Tiger" Icon="tiger.png">
       <!-- 属于Tiger的二级标签 -->
       <ShellContent Title="子页1" Icon="tab1.png" Route="TigerSub1" ContentTemplate="{DataTemplate local:TigerSubPage1}" />
       <ShellContent Title="子页2" Icon="tab2.png" Route="TigerSub2" ContentTemplate="{DataTemplate local:TigerSubPage2}" />
       <ShellContent Title="子页3" Icon="tab3.png" Route="TigerSub3" ContentTemplate="{DataTemplate local:TigerSubPage3}" />
   </Tab>
   <!-- 其他顶层标签 -->
   <Tab Title="Giraffe" Icon="giraffe.png">
       <ShellContent Route="Giraffe" ContentTemplate="{DataTemplate local: Giraffe}" />
   </Tab>
</FlyoutItem>

这种方式的二级标签和顶层标签是层级关系，平台会自动处理导航逻辑，适合需要路由跳转的场景。

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