如何禁用CollectionView数据源变更时的动画？有无替代方案？

问题描述 #

我需要以网格形式显示一组按钮，定义了ObservableCollection<ButtonData> Buttons作为数据源，集合大小在运行时会切换为3×3（9个）、4×4（16个）或5×5（25个）。为实现方形布局，我使用了CollectionView，XAML代码如下：

<CollectionView ItemsSource="{Binding Buttons}" >
    <CollectionView.ItemsLayout>
        <GridItemsLayout Orientation="Vertical" Span="{Binding Size}" />
    </CollectionView.ItemsLayout>
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <Button 
                Text="{Binding Text}" 
                Command="{Binding Command}"
                BackgroundColor="{Binding BackgroundColor}"
                TextColor="Black"
                CornerRadius="0"
                FontSize="24"
                Opacity="{Binding Opacity}"
                HeightRequest="{Binding Height}"
                AutomationId="{Binding Text}"
            />
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

问题是每当修改底层集合时，视图会自动播放动画，我希望直接显示新内容而无任何动画效果。之前尝试过在后台代码中直接修改Grid，但不符合MVVM模式，且按钮绑定存在问题。

解决方案一：禁用CollectionView的动画 #

CollectionView默认开启数据变更动画，直接禁用即可：

1. XAML静态设置 #

在CollectionView标签中添加IsAnimationEnabled="False"属性：

<CollectionView ItemsSource="{Binding Buttons}" IsAnimationEnabled="False">
    <!-- 原有布局和模板代码 -->
</CollectionView>

2. 动态控制（支持MVVM） #

在ViewModel中新增布尔属性（如IsCollectionAnimationEnabled），绑定到CollectionView的对应属性：

<CollectionView ItemsSource="{Binding Buttons}" 
                IsAnimationEnabled="{Binding IsCollectionAnimationEnabled}">
    <!-- 原有布局和模板代码 -->
</CollectionView>

在ViewModel中设置该属性为false即可关闭动画，完全符合MVVM规范。

解决方案二：使用绑定式Grid替代（无默认动画） #

如果不想依赖CollectionView，可通过BindableLayout实现动态网格布局，同样遵循MVVM：

示例代码 #

<Grid BindableLayout.ItemsSource="{Binding Buttons}">
    <BindableLayout.ItemTemplate>
        <DataTemplate>
            <Button 
                Text="{Binding Text}" 
                Command="{Binding Command}"
                BackgroundColor="{Binding BackgroundColor}"
                TextColor="Black"
                CornerRadius="0"
                FontSize="24"
                Opacity="{Binding Opacity}"
                AutomationId="{Binding Text}"
            />
        </DataTemplate>
    </BindableLayout.ItemTemplate>
    <BindableLayout.Layout>
        <GridItemsLayout Orientation="Vertical" Span="{Binding Size}" />
    </BindableLayout.Layout>
</Grid>

这种方式和CollectionView的网格布局逻辑一致，但默认无动画，按钮绑定也能正常工作。

额外提示 #

如果需要批量更新数据，建议给ObservableCollection自定义实现AddRange方法，减少频繁触发集合变更事件的次数，但直接禁用动画是最直接的解决方式。

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