.NET MAUI中如何为CollectionView的每个项添加入场动画？

我在MAUI中创建落地页的导航项列表，每个项包含图标、描述和箭头，通过CollectionView绑定ViewModel的WalletItems列表。想要在页面出现时，每个项同时执行TranslationY从-100到0的向上滚动动画和透明度从0到1的淡入动画，但直接遍历CollectionView控件时出现错误：foreach cannot operate on variables of type "CollectionView"。

错误原因 #

CollectionView是容器控件，本身不支持直接枚举遍历它的子项，需要通过视觉树获取已渲染的子元素。

步骤1：添加视觉树子元素获取扩展方法 #

在项目中添加一个扩展类，用于获取控件的所有可视子元素：

using Microsoft.Maui.Controls;
using System.Collections.Generic;
using System.Linq;

public static class VisualElementExtensions
{
    public static IEnumerable<VisualElement> GetVisualChildren(this VisualElement element)
    {
        if (element == null) yield break;
        
        if (element is Layout layout)
        {
            foreach (var child in layout.Children)
            {
                if (child is VisualElement visualChild)
                {
                    yield return visualChild;
                    foreach (var subChild in visualChild.GetVisualChildren())
                    {
                        yield return subChild;
                    }
                }
            }
        }
        else if (element is ContentView contentView && contentView.Content is VisualElement content)
        {
            yield return content;
            foreach (var subChild in content.GetVisualChildren())
            {
                yield return subChild;
            }
        }
    }
}

步骤2：设置项的初始状态 #

在DataTemplate的根Border中设置初始的Opacity和TranslationY，确保动画从预期状态开始：

<Border
    Padding="10"
    BackgroundColor="Transparent"
    HorizontalOptions="FillAndExpand"
    MinimumHeightRequest="80"
    MinimumWidthRequest="300"
    Stroke="{StaticResource Gray100}"
    StrokeThickness="0"
    Opacity="0"
    TranslationY="-100">
    <!-- 原有内容不变 -->
</Border>

步骤3：修改Appearing事件代码 #

通过扩展方法获取CollectionView中的子项，逐个执行组合动画，还可以添加延迟实现逐个淡入的效果：

private async void WalletPage_Appearing(object sender, EventArgs e)
{
    // 等待CollectionView完成渲染
    await Task.Delay(100);
    
    // 获取CollectionView中的所有目标Border项（DataTemplate的根元素）
    var items = WalletItemsCollectionView.GetVisualChildren()
                                        .OfType<Border>()
                                        .Where(b => b.MinimumHeightRequest == 80);

    int delay = 0;
    foreach (var item in items)
    {
        // 创建组合动画
        var combinedAnimation = new Animation();
        
        // 透明度动画
        var opacityAnimation = new Animation(v => item.Opacity = v, 0, 1);
        combinedAnimation.Add(0, 1, opacityAnimation);
        
        // 位移动画
        var translationAnimation = new Animation(v => item.TranslationY = v, -100, 0);
        combinedAnimation.Add(0, 1, translationAnimation);
        
        // 提交动画，添加延迟实现逐个出现的效果
        combinedAnimation.Commit(item, $"CombinedAnimation_{delay}", 16, 500, Easing.SpringIn);
        
        delay += 150;
        await Task.Delay(150);
    }
}

补充说明 #

• 使用Task.Delay(100)是为了确保CollectionView已经完成子项的渲染，避免获取不到子元素。
• 筛选Border时用MinimumHeightRequest == 80是为了排除其他无关的Border（比如分割线的Border），如果有更唯一的标识可以替换。
• 改用Easing.SpringIn可以让动画更自然，也可以根据需求换成Easing.Linear或其他缓动函数。

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