ItemsSource嵌套DataTemplate时编译失败问题求助

问题重现 #

运行以下XAML代码时，编译失败，提示四次“Value cannot be null”且无明确错误来源：

<cards:CarouselView >
    <cards:CarouselView.ItemsSource>
       <x:Array Type="{x:Type View}">
            <StackLayout>
                <CollectionView HorizontalOptions="FillAndExpand" ItemsSource="{Binding CollectionViewContent}">
                    <CollectionView.ItemTemplate>
                        <DataTemplate>
                            <Grid>
                                
                            </Grid>
                        </DataTemplate>
                    </CollectionView.ItemTemplate>
                </CollectionView>
            </StackLayout>
            <StackLayout>
                <Label Text="Hi yolonese"/>
            </StackLayout>
        </x:Array>
    </cards:CarouselView.ItemsSource>
</cards:CarouselView>

但使用纯硬编码布局（无绑定、无嵌套DataTemplate）时，CarouselView可正常工作：

<cards:CarouselView >
    <cards:CarouselView.ItemsSource>
       <x:Array Type="{x:Type View}">
            <StackLayout>
                <Label Text="Hi my guy"/>
                <Button Text="test"/>
            </StackLayout>
            
            <StackLayout>
                <Label Text="Hi yolonese"/>
            </StackLayout>
        </x:Array>
    </cards:CarouselView.ItemsSource>
</cards:CarouselView>

即使给DataTemplate指定特定数据类型，错误依然存在。

原因分析 #

问题核心是XAML编译器解析静态x:Array中的嵌套DataTemplate时，无法正确处理绑定上下文：

• x:Array是静态视图集合，编译阶段会强制实例化其中所有元素；
• DataTemplate是动态视图模板，其绑定上下文依赖运行时的数据源实例；
• 编译阶段编译器尝试解析DataTemplate内容时，找不到对应的数据源上下文，直接触发空引用错误。

解决方法 #

方案1：ViewModel动态创建Carousel项（推荐） #

避免在XAML的x:Array中直接声明带绑定的复杂视图，改为在ViewModel中动态创建视图并绑定数据，再将视图集合绑定给CarouselView：

ViewModel代码

using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Runtime.CompilerServices;
using Xamarin.Forms;

public class MainViewModel : INotifyPropertyChanged
{
    public ObservableCollection<View> CarouselItems { get; set; }
    public ObservableCollection<YourDataType> CollectionViewContent { get; set; }

    public MainViewModel()
    {
        // 初始化CollectionView数据源
        CollectionViewContent = new ObservableCollection<YourDataType>();
        CollectionViewContent.Add(new YourDataType { YourPropertyName = "测试项1" });
        CollectionViewContent.Add(new YourDataType { YourPropertyName = "测试项2" });

        // 创建带CollectionView的Carousel项
        var collectionView = new CollectionView
        {
            HorizontalOptions = LayoutOptions.FillAndExpand,
            ItemsSource = CollectionViewContent,
            ItemTemplate = new DataTemplate(() =>
            {
                var grid = new Grid();
                var itemLabel = new Label();
                itemLabel.SetBinding(Label.TextProperty, nameof(YourDataType.YourPropertyName));
                grid.Children.Add(itemLabel);
                return grid;
            })
        };

        var firstItem = new StackLayout();
        firstItem.Children.Add(collectionView);

        // 创建纯静态Carousel项
        var secondItem = new StackLayout();
        secondItem.Children.Add(new Label { Text = "Hi yolonese" });

        // 初始化Carousel数据源
        CarouselItems = new ObservableCollection<View>
        {
            firstItem,
            secondItem
        };
    }

    // 实现INotifyPropertyChanged接口
    public event PropertyChangedEventHandler PropertyChanged;
    protected void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

// 替换为你的实际数据类型
public class YourDataType
{
    public string YourPropertyName { get; set; }
}

XAML代码

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:cards="clr-namespace:你的Carousel控件命名空间"
             x:Class="你的命名空间.MainPage">
    <ContentPage.BindingContext>
        <local:MainViewModel />
    </ContentPage.BindingContext>

    <cards:CarouselView ItemsSource="{Binding CarouselItems}" />
</ContentPage>

方案2：DataTemplateSelector实现视图切换（MVVM友好） #

如果更倾向MVVM模式，不直接在ViewModel中创建View，可通过视图模型+模板选择器实现：

1. 定义视图模型类

public class BaseCarouselItemVM : INotifyPropertyChanged
{
    // 实现INotifyPropertyChanged接口...
}

public class CollectionCarouselItemVM : BaseCarouselItemVM
{
    public ObservableCollection<YourDataType> CollectionContent { get; set; }
}

public class StaticTextCarouselItemVM : BaseCarouselItemVM
{
    public string DisplayText { get; set; }
}

2. 创建模板选择器

public class CarouselItemTemplateSelector : DataTemplateSelector
{
    public DataTemplate CollectionItemTemplate { get; set; }
    public DataTemplate StaticTextItemTemplate { get; set; }

    protected override DataTemplate OnSelectTemplate(object item, BindableObject container)
    {
        return item switch
        {
            CollectionCarouselItemVM => CollectionItemTemplate,
            StaticTextCarouselItemVM => StaticTextItemTemplate,
            _ => base.OnSelectTemplate(item, container)
        };
    }
}

3. XAML声明模板并使用选择器

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:cards="clr-namespace:你的Carousel控件命名空间"
             xmlns:local="clr-namespace:你的命名空间"
             x:Class="你的命名空间.MainPage">
    <ContentPage.Resources>
        <DataTemplate x:Key="CollectionItemTemplate">
            <StackLayout>
                <CollectionView HorizontalOptions="FillAndExpand" ItemsSource="{Binding CollectionContent}">
                    <CollectionView.ItemTemplate>
                        <DataTemplate>
                            <Grid>
                                <Label Text="{Binding YourPropertyName}" />
                            </Grid>
                        </DataTemplate>
                    </CollectionView.ItemTemplate>
                </CollectionView>
            </StackLayout>
        </DataTemplate>

        <DataTemplate x:Key="StaticTextItemTemplate">
            <StackLayout>
                <Label Text="{Binding DisplayText}" />
            </StackLayout>
        </DataTemplate>

        <local:CarouselItemTemplateSelector x:Key="CarouselSelector"
                                            CollectionItemTemplate="{StaticResource CollectionItemTemplate}"
                                            StaticTextItemTemplate="{StaticResource StaticTextItemTemplate}" />
    </ContentPage.Resources>

    <ContentPage.BindingContext>
        <local:MainViewModel />
    </ContentPage.BindingContext>

    <cards:CarouselView ItemsSource="{Binding CarouselItemVMs}"
                        ItemTemplateSelector="{StaticResource CarouselSelector}" />
</ContentPage>

4. 更新ViewModel

public class MainViewModel : INotifyPropertyChanged
{
    public ObservableCollection<BaseCarouselItemVM> CarouselItemVMs { get; set; }

    public MainViewModel()
    {
        var collectionContent = new ObservableCollection<YourDataType>
        {
            new YourDataType { YourPropertyName = "测试项1" },
            new YourDataType { YourPropertyName = "测试项2" }
        };

        CarouselItemVMs = new ObservableCollection<BaseCarouselItemVM>
        {
            new CollectionCarouselItemVM { CollectionContent = collectionContent },
            new StaticTextCarouselItemVM { DisplayText = "Hi yolonese" }
        };
    }

    // 实现INotifyPropertyChanged接口...
}

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