如何获取Xamarin.Forms中ListView选中项的屏幕坐标？

嘿，我来帮你搞定这个需求！核心思路就是先拿到选中列表项的渲染视图，把它的相对坐标转换成屏幕绝对坐标，再基于这个区域做过渡动画展示详情。下面一步步来实现：

一、XAML布局准备 #

先搭一个铺满屏幕的ListView，绑定好数据源和ItemTapped事件，记得开自适应行高避免坐标偏差：

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="YourAppNamespace.MainPage">
    <!-- 用Grid当根布局，方便后续叠加详情视图 -->
    <Grid x:Name="RootGrid">
        <ListView x:Name="MainListView"
                  ItemTapped="OnItemTapped"
                  HasUnevenRows="True"
                  VerticalOptions="FillAndExpand"
                  HorizontalOptions="FillAndExpand">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <!-- 这里放你的列表项自定义布局，示例用带圆角的Frame -->
                        <Frame Margin="10" Padding="18" CornerRadius="10" BackgroundColor="#f0f0f0">
                            <StackLayout>
                                <Label Text="{Binding ItemTitle}" FontSize="18" FontWeight="Bold"/>
                                <Label Text="{Binding ItemSubtitle}" FontSize="14" TextColor="#666"/>
                            </StackLayout>
                        </Frame>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </Grid>
</ContentPage>

二、C#中获取选中项的屏幕坐标 #

在ItemTapped事件里，我们要拿到选中项的ViewCell，再把它的相对坐标转成屏幕绝对坐标：

private async void OnItemTapped(object sender, ItemTappedEventArgs e)
{
    if (e.Item == null) return;

    // 获取触发事件的ListView和对应的ViewCell
    var listView = sender as ListView;
    var targetCell = listView.GetTemplatedCell(e.Item, listView.ItemTemplate);

    if (targetCell == null) return;

    // 把单元格的相对坐标转换成屏幕绝对坐标
    var cellRelativeBounds = targetCell.Bounds;
    var screenBounds = targetCell.TranslateToWindow(cellRelativeBounds);

    // 现在screenBounds就是选中项在屏幕上的矩形参数：X/Y是左上角坐标，Width/Height是宽高
    double cellX = screenBounds.X;
    double cellY = screenBounds.Y;
    double cellWidth = screenBounds.Width;
    double cellHeight = screenBounds.Height;

    // 调用动画展示详情的方法
    await ShowDetailWithAnimation(cellX, cellY, cellWidth, cellHeight, e.Item as YourDataModel);

    // 重置选中状态，避免重复触发
    listView.SelectedItem = null;
}

这里用到的TranslateToWindow是VisualElement的扩展方法，能直接把元素的相对坐标转换成屏幕绝对坐标，自动适配状态栏、导航栏的偏移。

三、实现从选中位置展开的详情动画 #

接下来创建一个覆盖全屏的详情视图，从选中项的位置开始放大展开，完成后支持点击关闭：

private async Task ShowDetailWithAnimation(double startX, double startY, double startWidth, double startHeight, YourDataModel item)
{
    // 构建详情视图，这里用Frame示例，你可以替换成自定义的详情页面布局
    var detailView = new Frame
    {
        BackgroundColor = Color.White,
        CornerRadius = 10,
        Padding = 25,
        IsVisible = false,
        Content = new StackLayout
        {
            Children = {
                new Label { Text = item.ItemTitle, FontSize="22", FontWeight="Bold" },
                new Label { Text = $"详情内容：{item.DetailText}", FontSize="16", Margin="0,10,0,0" }
            }
        }
    };

    // 把详情视图加到根Grid里，确保它在ListView上方
    RootGrid.Children.Add(detailView);

    // 初始状态：和选中项的位置、大小完全一致
    detailView.Layout(new Rectangle(startX, startY, startWidth, startHeight));
    detailView.IsVisible = true;

    // 执行展开动画：250ms内放大到全屏
    await detailView.LayoutTo(new Rectangle(0, 0, this.Width, this.Height), 250, Easing.CubicOut);

    // 添加点击关闭的手势
    var closeTap = new TapGestureRecognizer();
    closeTap.Tapped += async (s, args) =>
    {
        // 关闭动画：缩小回原位置后隐藏并移除视图
        await detailView.LayoutTo(new Rectangle(startX, startY, startWidth, startHeight), 250, Easing.CubicIn);
        detailView.IsVisible = false;
        RootGrid.Children.Remove(detailView);
    };
    detailView.GestureRecognizers.Add(closeTap);
}

四、关键注意点 #

• 一定要开启HasUnevenRows="True"，如果列表项高度不固定，固定行高会导致坐标计算错误。
• 如果你的列表项是复杂自定义布局，确保GetTemplatedCell能正确拿到对应的ViewCell（ItemTapped触发时单元格肯定是可见的，不会有回收问题）。
• 动画的时长和缓动函数可以根据需求调整，比如把250改成300，Easing.CubicOut换成Easing.SinOut。

这样不管ListView里有多少项，点击任意项都会从它的屏幕位置展开详情，完美实现你想要的效果！

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