.NET MAUI中UI元素坐标获取及CollectionView项滚动淡出动画实现

最优实现思路 #

无需持续轮询元素位置，直接监听CollectionView的Scrolled事件，在滚动过程中动态计算可见项相对于视口的位置，实时调整元素透明度，实现向下滚动时的淡出效果。这种方式仅在滚动触发时执行计算，性能更高效。

具体实现步骤 #

1. XAML布局定义

给CollectionView绑定Scrolled事件，并在ItemTemplate中标记需要动画的元素：

<CollectionView x:Name="MyCollectionView" Scrolled="OnCollectionViewScrolled">
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <Frame x:Name="ItemContainer" Padding="12" Margin="6" BackgroundColor="LightGray">
                <Label Text="{Binding Content}" FontSize="16" />
            </Frame>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

2. 后台逻辑实现

在Scrolled事件中计算元素位置并调整透明度：

private void OnCollectionViewScrolled(object sender, ItemsViewScrolledEventArgs e)
{
    var collectionView = sender as CollectionView;
    if (collectionView == null || collectionView.Height == 0) return;

    // 获取CollectionView视口高度
    var viewportHeight = collectionView.Height;
    // 设置淡出触发阈值（视口底部往上150px，可根据需求调整）
    var fadeStartY = viewportHeight - 150;

    foreach (var item in collectionView.VisibleItems)
    {
        // 获取当前Item对应的可视化视图
        if (!collectionView.TryGetItemView(item, out var itemView)) continue;
        
        var itemContainer = itemView.FindByName<Frame>("ItemContainer");
        if (itemContainer == null) continue;

        // 获取元素相对于CollectionView的位置
        var elementBounds = itemContainer.GetBoundingBox();
        if (elementBounds == null) continue;

        var itemTopY = elementBounds.Value.Top;

        // 计算透明度：当元素顶部超过淡出阈值时，逐步降低透明度至0
        if (itemTopY > fadeStartY)
        {
            var opacityRatio = (itemTopY - fadeStartY) / 150d;
            itemContainer.Opacity = Math.Max(0, 1 - opacityRatio);
        }
        else
        {
            // 元素未进入淡出区域，恢复完全不透明
            itemContainer.Opacity = 1;
        }
    }
}

关键问题解答 #

如何获取UI元素的(x,y)坐标？

使用VisualElement.GetBoundingBox()方法，该方法返回Rect?类型，包含元素相对于父容器的X、Y坐标及宽高。如果需要全局屏幕坐标，可以结合窗口坐标进行转换：

// 获取元素全局坐标示例
var elementBounds = itemContainer.GetBoundingBox();
if (elementBounds != null)
{
    var window = Application.Current.MainWindow;
    var windowRect = window.GetWindowRect();
    var globalX = windowRect.X + elementBounds.Value.X;
    var globalY = windowRect.Y + elementBounds.Value.Y;
}

如何设置持续检查位置的事件？

无需额外设置持续检查事件，CollectionView的Scrolled事件会在滚动过程中持续触发，足够满足动态调整动画的需求。如果强制轮询（如用Timer），会造成不必要的性能消耗，不推荐。

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