Xamarin.Forms如何在同一视图中拆分放置CollectionView和TabbedPage

Xamarin Forms中Page类（包括TabbedPage、ContentPage等所有页面类型）只能作为应用窗口的根内容，或是放入NavigationPage、Shell这类导航容器中，不支持直接嵌入到Grid、StackLayout等普通布局控件的子节点，这是你触发报错的根本原因。

方案1：使用Xamarin Community Toolkit的TabView替代TabbedPage（推荐） #

TabView属于View派生类，可直接嵌入任意布局容器，完全匹配你要的Tab交互效果：

• 给你的共享项目和各平台（Android/iOS/UWP）项目都安装Xamarin.CommunityToolkit NuGet包
• 将原来TabbedPage里的每个Tab页内容迁移到TabViewItem节点中，直接放到Grid的右侧列即可

示例代码：

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:xct="http://xamarin.com/schemas/2020/toolkit"
             x:Class="YourProject.MainPage">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <!-- 左侧CollectionView区域 -->
        <CollectionView Grid.Column="0" ItemsSource="{Binding YourList}">
            <CollectionView.ItemTemplate>
                <DataTemplate>
                    <Frame>
                        <!-- 你原来的Frame内容 -->
                    </Frame>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>
        <!-- 右侧Tab区域 -->
        <xct:TabView Grid.Column="1">
            <xct:TabViewItem Text="首页">
                <!-- 原第一个Tab页的内容 -->
            </xct:TabViewItem>
            <xct:TabViewItem Text="设置">
                <!-- 原第二个Tab页的内容 -->
            </xct:TabViewItem>
        </xct:TabView>
    </Grid>
</ContentPage>

方案2：自定义实现Tab效果（无第三方依赖） #

如果不想引入额外NuGet包，可以自己实现简易Tab控件：

• 把原来每个Tab页的内容封装为独立的ContentView，比如FirstTabView.xaml、SecondTabView.xaml，原有业务逻辑可以直接迁移到对应ContentView中
• 在MainPage的Grid右侧列，垂直拆分出Tab头区域和内容区域
• 给Tab头按钮绑定点击事件，点击时切换下方内容区域的Content属性为对应ContentView实例即可

示例结构：

<Grid Grid.Column="1">
    <Grid.RowDefinitions>
        <RowDefinition Height="48"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <!-- Tab头 -->
    <StackLayout Orientation="Horizontal" Grid.Row="0">
        <Button Text="Tab1" Clicked="OnTab1Clicked"/>
        <Button Text="Tab2" Clicked="OnTab2Clicked"/>
    </StackLayout>
    <!-- Tab内容容器 -->
    <ContentView x:Name="TabContentContainer" Grid.Row="1"/>
</Grid>

后台切换逻辑：

private void OnTab1Clicked(object sender, EventArgs e)
{
    TabContentContainer.Content = new FirstTabView();
}

private void OnTab2Clicked(object sender, EventArgs e)
{
    TabContentContainer.Content = new SecondTabView();
}

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