.NET MAUI中如何在CollectionView内嵌套CarouselView？

问题场景 #

需要创建一个页面，用CollectionView展示List<RecipeGroup>数据源，每个分组项包含分组标题和一个CarouselView，轮播显示该分组下的菜品（含名称和图片），但编写XAML时出现错误：The property DataTemplateContent is set more than once。

错误原因 #

该错误是因为CollectionView.ItemTemplate的DataTemplate未使用单个根布局容器，直接放置了多个独立元素（如Label和CarouselView），导致DataTemplate被重复设置内容。.NET MAUI的DataTemplate要求只能有一个根元素。

正确实现代码 #

1. C#实体类定义 #

public class Recipe
{
    public string Name { get; set; }
    public string ImageUrl { get; set; }
}

public class RecipeGroup
{
    public string GroupName { get; set; }
    public List<Recipe> Recipes { get; set; } = new List<Recipe>();
}

// 页面ViewModel中的数据源示例
public List<RecipeGroup> RecipeGroupCollection { get; set; } = new List<RecipeGroup>
{
    new RecipeGroup
    {
        GroupName = "Most Popular",
        Recipes = 
        {
            new Recipe { Name = "番茄炒蛋", ImageUrl = "tomato_egg.jpg" },
            new Recipe { Name = "麻婆豆腐", ImageUrl = "mapo_tofu.jpg" }
        }
    },
    new RecipeGroup
    {
        GroupName = "New Arrivals",
        Recipes = 
        {
            new Recipe { Name = "芝士焗饭", ImageUrl = "cheese_rice.jpg" },
            new Recipe { Name = "日式拉面", ImageUrl = "ramen.jpg" }
        }
    }
};

2. XAML页面代码 #

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="YourNamespace.RecipePage"
             BindingContext="{x:Reference This}"
             x:Name="This">

    <CollectionView ItemsSource="{Binding RecipeGroupCollection}"
                    Margin="10">
        <CollectionView.ItemTemplate>
            <DataTemplate>
                <!-- 用VerticalStackLayout作为DataTemplate的唯一根元素 -->
                <VerticalStackLayout Spacing="10">
                    <!-- 分组标题 -->
                    <Label Text="{Binding GroupName}"
                           FontSize="Title"
                           FontAttributes="Bold"
                           Margin="0,10,0,0"/>
                    
                    <!-- 分组菜品轮播 -->
                    <CarouselView ItemsSource="{Binding Recipes}"
                                  HeightRequest="200">
                        <CarouselView.ItemTemplate>
                            <DataTemplate>
                                <VerticalStackLayout HorizontalOptions="Center"
                                                    Spacing="5">
                                    <Image Source="{Binding ImageUrl}"
                                           WidthRequest="150"
                                           HeightRequest="150"
                                           Aspect="AspectFill"/>
                                    <Label Text="{Binding Name}"
                                           FontSize="Subtitle"
                                           HorizontalTextAlignment="Center"/>
                                </VerticalStackLayout>
                            </DataTemplate>
                        </CarouselView.ItemTemplate>
                    </CarouselView>
                </VerticalStackLayout>
            </DataTemplate>
        </CollectionView.ItemTemplate>
    </CollectionView>
</ContentPage>

关键说明 #

• 必须保证CollectionView.ItemTemplate的DataTemplate只有一个根布局容器（示例中用VerticalStackLayout），将分组标题和CarouselView嵌套在该容器内，避免触发重复设置DataTemplateContent的错误。
• CarouselView通过ItemsSource="{Binding Recipes}"绑定当前RecipeGroup的菜品集合，实现分组内的轮播展示。

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