如何基于ViewModel的ObservableCollection动态添加BoxView并正常显示？

兄弟，你完全没必要在OnBindingContextChanged()里手动折腾添加BoxView！Xamarin.Forms早就为这种「集合动态生成UI元素」的场景准备了专门的控件——CollectionView（比老版的ListView更灵活现代），用它绑定你的ObservableCollection，不仅能自动为每个集合成员生成BoxView，还能自动响应集合的增删改操作，完美避开生命周期时机不对的问题。

推荐方案：用CollectionView实现（最简洁可靠） #

第一步：编写XAML布局 #

在你的页面XAML里添加CollectionView，绑定ItemsSource到ViewModel的集合，然后通过ItemTemplate定义每个Item对应的BoxView：

<!-- 假设你的页面根布局是ContentPage -->
<ContentPage.Content>
    <CollectionView ItemsSource="{Binding YourBoxItems}">
        <!-- 定义每个集合项对应的UI模板 -->
        <CollectionView.ItemTemplate>
            <DataTemplate>
                <!-- 这里可以绑定集合对象的属性到BoxView，比如颜色、大小 -->
                <BoxView Color="{Binding BoxColor}" 
                         WidthRequest="60" 
                         HeightRequest="60" 
                         Margin="8"
                         CornerRadius="8"/>
            </DataTemplate>
        </CollectionView.ItemTemplate>
        
        <!-- 可选：设置布局方向，比如横向滚动/纵向排列 -->
        <CollectionView.ItemsLayout>
            <LinearItemsLayout Orientation="Horizontal" 
                               ItemSpacing="10"/>
        </CollectionView.ItemsLayout>
    </CollectionView>
</ContentPage.Content>

第二步：完善ViewModel和数据模型 #

确保你的集合是ObservableCollection<T>，并且数据模型实现INotifyPropertyChanged（如果需要动态更新单个BoxView的属性）：

// 单个BoxView对应的数据模型
public class BoxItem : INotifyPropertyChanged
{
    private Color _boxColor;
    public Color BoxColor
    {
        get => _boxColor;
        set
        {
            _boxColor = value;
            OnPropertyChanged();
        }
    }

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

// 你的ViewModel
public class YourViewModel : INotifyPropertyChanged
{
    // 绑定到CollectionView的集合
    public ObservableCollection<BoxItem> YourBoxItems { get; set; }

    public YourViewModel()
    {
        YourBoxItems = new ObservableCollection<BoxItem>();
        // 初始化测试数据
        YourBoxItems.Add(new BoxItem { BoxColor = Colors.Crimson });
        YourBoxItems.Add(new BoxItem { BoxColor = Colors.SeaBlue });
        YourBoxItems.Add(new BoxItem { BoxColor = Colors.LimeGreen });
    }

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

第三步：设置页面的BindingContext #

在页面构造函数里绑定ViewModel：

public YourPage()
{
    InitializeComponent();
    BindingContext = new YourViewModel();
}

这样一来，CollectionView会自动监听YourBoxItems的变化：你往集合里加元素，它自动生成BoxView；删除元素，它自动移除对应的BoxView；修改单个BoxItem的BoxColor，对应的BoxView颜色也会实时更新。

为什么你之前的方法有问题？ #

OnBindingContextChanged()确实是在页面BindingContext设置完成后触发，但它的执行时机晚于页面初始绘制，而且不会自动响应集合的后续变化——你如果之后往集合里加元素，还要手动写代码去添加BoxView，非常繁琐。而CollectionView内部已经帮你处理了CollectionChanged事件，完全不用自己操心。

迫不得已要手动添加的方案（不推荐） #

如果因为特殊需求必须手动添加，可以监听集合的CollectionChanged事件，并且在UI线程操作：

private ObservableCollection<BoxItem> _boundCollection;

protected override void OnBindingContextChanged()
{
    base.OnBindingContextChanged();
    
    // 先清理之前的监听和控件
    if (_boundCollection != null)
    {
        _boundCollection.CollectionChanged -= OnCollectionChanged;
        YourStackLayout.Children.Clear();
    }

    if (BindingContext is YourViewModel vm)
    {
        _boundCollection = vm.YourBoxItems;
        // 初始化现有元素
        foreach (var item in _boundCollection)
        {
            AddBoxViewToLayout(item);
        }
        // 监听集合变化
        _boundCollection.CollectionChanged += OnCollectionChanged;
    }
}

private void OnCollectionChanged(object sender, NotifyCollectionChangedEventArgs e)
{
    // UI操作必须在主线程执行
    Device.BeginInvokeOnMainThread(() =>
    {
        // 处理新增元素
        if (e.NewItems != null)
        {
            foreach (BoxItem item in e.NewItems)
            {
                AddBoxViewToLayout(item);
            }
        }
        // 处理删除元素
        if (e.OldItems != null)
        {
            foreach (BoxItem item in e.OldItems)
            {
                var targetBox = YourStackLayout.Children.OfType<BoxView>()
                    .FirstOrDefault(b => b.BindingContext == item);
                if (targetBox != null)
                {
                    YourStackLayout.Children.Remove(targetBox);
                }
            }
        }
    });
}

private void AddBoxViewToLayout(BoxItem item)
{
    var boxView = new BoxView
    {
        Color = item.BoxColor,
        WidthRequest = 60,
        HeightRequest = 60,
        Margin = new Thickness(8),
        BindingContext = item
    };
    YourStackLayout.Children.Add(boxView);
}

这种方法需要手动处理所有集合变化场景，代码冗余且容易出错，除非特殊情况，强烈推荐用CollectionView方案。

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