Xamarin：Android和iOS下CollectionView项图片点击时显示自定义小弹窗

完全可以实现，以下是具体的实现思路和步骤：

核心思路 #

将弹窗/自定义工具栏放在页面的根容器（而非CollectionView的单元格内），避免单元格复用导致的位置错乱；获取按钮点击的屏幕绝对坐标，以此定位弹窗；点击外部区域时自动隐藏弹窗。

1. 获取点击按钮的绝对坐标 #

在图片按钮的点击事件中，通过扩展方法将控件的相对位置转换为屏幕绝对位置：

// 扩展方法：获取控件在屏幕中的绝对位置
public static Point GetAbsoluteScreenPosition(this VisualElement element)
{
    Point position = new Point(element.X, element.Y);
    VisualElement parent = element.Parent as VisualElement;
    while (parent != null)
    {
        position = new Point(position.X + parent.X, position.Y + parent.Y);
        parent = parent.Parent as VisualElement;
    }
    return position;
}

// 按钮点击事件
private void ItemActionButton_Clicked(object sender, EventArgs e)
{
    var button = sender as ImageButton;
    var screenPosition = button.GetAbsoluteScreenPosition();
    // 后续用该坐标定位弹窗
}

2. 创建自定义工具栏控件 #

在页面的根容器（比如AbsoluteLayout）中添加一个隐藏的自定义工具栏，示例XAML：

<ContentPage.Content>
    <AbsoluteLayout>
        <!-- CollectionView 放在底层 -->
        <CollectionView x:Name="ItemsCollectionView" AbsoluteLayout.LayoutBounds="0,0,1,1" AbsoluteLayout.LayoutFlags="All">
            <!-- 你的ItemTemplate，包含图片按钮 -->
            <CollectionView.ItemTemplate>
                <DataTemplate>
                    <ImageButton Source="action_icon.png" Clicked="ItemActionButton_Clicked" />
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>

        <!-- 自定义工具栏，默认隐藏 -->
        <ContentView x:Name="ActionToolbar" 
                     IsVisible="False"
                     BackgroundColor="#FFFFFF"
                     CornerRadius="8"
                     Padding="12"
                     AbsoluteLayout.LayoutFlags="PositionProportional">
            <StackLayout Orientation="Horizontal" Spacing="16">
                <Button Text="编辑" FontSize="Small" Clicked="EditOption_Clicked" />
                <Button Text="删除" FontSize="Small" Clicked="DeleteOption_Clicked" />
                <Button Text="分享" FontSize="Small" Clicked="ShareOption_Clicked" />
            </StackLayout>
        </ContentView>
    </AbsoluteLayout>
</ContentPage.Content>

3. 定位并显示工具栏 #

在按钮点击事件中，根据获取的绝对坐标设置工具栏的位置并显示：

private void ItemActionButton_Clicked(object sender, EventArgs e)
{
    var button = sender as ImageButton;
    var screenPos = button.GetAbsoluteScreenPosition();

    // 设置工具栏位置（在按钮下方偏移8dp，避免重叠）
    double toolbarX = screenPos.X;
    double toolbarY = screenPos.Y + button.Height + 8;
    AbsoluteLayout.SetLayoutBounds(ActionToolbar, new Rectangle(toolbarX, toolbarY, AbsoluteLayout.AutoSize, AbsoluteLayout.AutoSize));
    
    // 显示工具栏
    ActionToolbar.IsVisible = true;
}

4. 点击外部隐藏工具栏 #

给页面添加点击手势，点击非工具栏区域时隐藏：

public YourPage()
{
    InitializeComponent();
    // 添加页面点击手势
    var pageTap = new TapGestureRecognizer();
    pageTap.Tapped += PageTap_Tapped;
    this.GestureRecognizers.Add(pageTap);
}

private void PageTap_Tapped(object sender, EventArgs e)
{
    // 点击页面空白处隐藏工具栏
    ActionToolbar.IsVisible = false;
}

替代方案：使用Popup控件 #

如果想更便捷地实现弹窗，也可以使用Xamarin Community Toolkit的Popup组件，自定义弹窗内容后，在点击事件中指定弹出位置：

private async void ItemActionButton_Clicked(object sender, EventArgs e)
{
    var button = sender as ImageButton;
    var screenPos = button.GetAbsoluteScreenPosition();
    
    var actionPopup = new ActionOptionsPopup(); // 自定义Popup，包含选项按钮
    actionPopup.Anchor = new Point(screenPos.X, screenPos.Y + button.Height);
    
    await Navigation.ShowPopupAsync(actionPopup);
}

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