Xamarin Shell实现Domestic子标签页（Cats/Dogs）滑动切换方法

方案一：使用TabbedPage嵌套（适配原有结构） #

Xamarin Shell原生Tab下的多ShellContent组合不支持滑动切换，我们可以把Domestic标签的内容替换为TabbedPage，通过启用滑动分页属性实现需求：

1. 修改Shell主页面XAML：

<Shell xmlns="http://xamarin.com/schemas/2014/forms"
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       x:Class="bashal.MainPage" Title="Bashal"
       xmlns:local="clr-namespace:bashal.Views"
       xmlns:xct="http://xamarin.com/schemas/2020/toolkit"
       xmlns:android="clr-namespace:Xamarin.Forms.PlatformConfiguration.AndroidSpecific;assembly=Xamarin.Forms.Core"
       NavigationPage.HasNavigationBar="False"
       android:TabbedPage.ToolbarPlacement="Bottom" >

    <TabBar>
        <!-- 将Domestic标签内容替换为嵌套的TabbedPage -->
        <Tab Title="Domestic">
            <ShellContent ContentTemplate="{DataTemplate local:DomesticTabbedPage}" />
        </Tab>
        <Tab Title="Monkeys">
            <ShellContent ContentTemplate="{DataTemplate local:Page2}" />
        </Tab>
    </TabBar>
</Shell>

2. 创建DomesticTabbedPage（继承TabbedPage）的XAML：

<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            x:Class="bashal.Views.DomesticTabbedPage"
            <!-- 安卓端启用滑动分页，iOS端默认支持 -->
            xmlns:android="clr-namespace:Xamarin.Forms.PlatformConfiguration.AndroidSpecific;assembly=Xamarin.Forms.Core"
            android:TabbedPage.IsSwipePagingEnabled="True">
    <local:Page1 Title="Cats" />
    <local:Page2 Title="dogs" />
</TabbedPage>

修改完成后，Domestic标签下的Cats和Dogs页面即可通过左右滑动切换，同时保留点击标签切换的原有功能。

方案二：自定义CarouselView实现（灵活UI控制） #

如果需要更个性化的标签样式或滑动逻辑，可使用CarouselView配合顶部标签栏：

1. 创建DomesticCarouselPage的XAML：

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="bashal.Views.DomesticCarouselPage"
             Title="Domestic">
    <StackLayout>
        <!-- 顶部自定义标签栏 -->
        <StackLayout Orientation="Horizontal" BackgroundColor="#f0f0f0">
            <Label x:Name="CatsTab" Text="Cats" Padding="20,10" 
                   BackgroundColor="{Binding Source={x:Reference CatsTab}, Path=IsSelected, Converter={StaticResource BoolToColorConverter}}"
                   TapGestureRecognizer.Tapped="CatsTab_Tapped"/>
            <Label x:Name="DogsTab" Text="dogs" Padding="20,10" 
                   BackgroundColor="{Binding Source={x:Reference DogsTab}, Path=IsSelected, Converter={StaticResource BoolToColorConverter}}"
                   TapGestureRecognizer.Tapped="DogsTab_Tapped"/>
        </StackLayout>
        <!-- 滑动容器 -->
        <CarouselView x:Name="PageCarousel"
                      CurrentItemChanged="PageCarousel_CurrentItemChanged"
                      IsSwipeEnabled="True">
            <CarouselView.ItemsSource>
                <x:Array Type="{x:Type ContentView}">
                    <local:Page1 />
                    <local:Page2 />
                </x:Array>
            </CarouselView.ItemsSource>
        </CarouselView>
    </StackLayout>
</ContentPage>

2. 后台代码同步标签与滑动页面：

public DomesticCarouselPage()
{
    InitializeComponent();
    CatsTab.IsSelected = true;
}

private void PageCarousel_CurrentItemChanged(object sender, CurrentItemChangedEventArgs e)
{
    var index = PageCarousel.ItemsSource.IndexOf(e.CurrentItem);
    CatsTab.IsSelected = index == 0;
    DogsTab.IsSelected = index == 1;
}

private void CatsTab_Tapped(object sender, EventArgs e)
{
    PageCarousel.ScrollTo(0, animate: true);
}

private void DogsTab_Tapped(object sender, EventArgs e)
{
    PageCarousel.ScrollTo(1, animate: true);
}

（注：需要自定义BoolToColorConverter来切换标签选中状态的背景色）

最后将Shell中Domestic标签的ShellContent指向这个DomesticCarouselPage即可。

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