.NET MAUI 如何制作类似的选项卡式组件？

当然可以，你不需要依赖整页的TabbedPage或TabBar，通过自定义组合控件或第三方UI库就能实现这种嵌入在页面内的局部选项卡效果，以下是两种可行方案：

• 方案一：手动组合基础控件实现

  1. 用HorizontalStackLayout或CollectionView搭建顶部选项卡头部，给每个选项卡按钮绑定点击事件，通过切换样式区分选中状态（比如背景色、文字颜色）
  2. 用ContentView作为内容容器，根据选中的选项卡切换显示对应的内容视图
     核心代码示例：

  <VerticalStackLayout Padding="10">
      <!-- 选项卡头部 -->
      <HorizontalStackLayout Spacing="8">
          <Button Text="选项1" Clicked="OnTabClicked" x:Name="Tab1" BackgroundColor="#F0F0F0" CornerRadius="4"/>
          <Button Text="选项2" Clicked="OnTabClicked" x:Name="Tab2" CornerRadius="4"/>
          <Button Text="选项3" Clicked="OnTabClicked" x:Name="Tab3" CornerRadius="4"/>
      </HorizontalStackLayout>
      <!-- 内容展示区域 -->
      <ContentView x:Name="ContentContainer" Margin="0,10,0,0">
          <Label Text="选项1对应的内容"/>
      </ContentView>
  </VerticalStackLayout>
  

  后台切换逻辑：

  private void OnTabClicked(object sender, EventArgs e)
  {
      // 重置所有选项卡样式
      Tab1.BackgroundColor = Colors.Transparent;
      Tab2.BackgroundColor = Colors.Transparent;
      Tab3.BackgroundColor = Colors.Transparent;
      
      // 设置当前选中选项卡样式
      var selectedTab = sender as Button;
      selectedTab.BackgroundColor = Color.FromHex("#F0F0F0");
      
      // 切换对应内容
      ContentContainer.Content = selectedTab.Text switch
      {
          "选项1" => new Label { Text = "选项1对应的内容" },
          "选项2" => new Label { Text = "选项2对应的内容" },
          "选项3" => new Label { Text = "选项3对应的内容" },
          _ => ContentContainer.Content
      };
  }
  

• 方案二：用第三方UI库简化开发
  可以使用CommunityToolkit.Maui中的TabView控件，它原生支持局部嵌入的选项卡，无需整页使用，还自带选中动画、自定义样式等功能。只需先通过NuGet安装CommunityToolkit.Maui，再在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="YourApp.YourPage">
      <toolkit:TabView TabStripPlacement="Top" Margin="10">
          <toolkit:TabItem Title="选项1">
              <Label Text="选项1的内容"/>
          </toolkit:TabItem>
          <toolkit:TabItem Title="选项2">
              <Label Text="选项2的内容"/>
          </toolkit:TabItem>
          <toolkit:TabItem Title="选项3">
              <Label Text="选项3的内容"/>
          </toolkit:TabItem>
      </toolkit:TabView>
  </ContentPage>
  

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