如何在Xamarin的BindableLayout.ItemTemplate/ListView中添加三点菜单？

我之前做项目时刚好碰到过几乎一模一样的问题——在BindableLayout里给每个项加三点菜单，用Rg.Plugins.Popup时定位总是跑偏，付费控件又不想用。后来摸索出几个可行的方案，分享给你：

方案一：用内嵌布局替代第三方Popup（最省心） #

这种方法不需要处理全局屏幕坐标，直接把菜单嵌入到每个BindableLayout项的布局里，点击三点按钮时显示/隐藏，兼容性和稳定性都拉满。

实现步骤： #

在你的ItemTemplate里用RelativeLayout包裹内容、三点按钮和隐藏菜单：

<ContentView>
    <RelativeLayout>
        <!-- 原有项内容 -->
        <StackLayout RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width}"
                     RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height}">
            <!-- 这里放你原来的项内容，比如标题、图片等 -->
        </StackLayout>

        <!-- 三点菜单按钮 -->
        <Image Source="three_dots.png" 
               x:Name="DotsButton" 
               WidthRequest="32" 
               HeightRequest="32"
               RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1, Constant=-40}"
               RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.5, Constant=-16}">
            <Image.GestureRecognizers>
                <TapGestureRecognizer Command="{Binding ToggleMenuCommand}" 
                                      CommandParameter="{x:Reference MenuContainer}" />
            </Image.GestureRecognizers>
        </Image>

        <!-- 隐藏的菜单容器 -->
        <Frame x:Name="MenuContainer" 
               IsVisible="False"
               CornerRadius="8"
               Padding="10"
               BackgroundColor="White"
               HasShadow="True"
               RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToView, ElementName=DotsButton, Property=X, Constant=-180}"
               RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToView, ElementName=DotsButton, Property=Y, Constant=35}">
            <StackLayout>
                <Label Text="编辑" Margin="0,5,0,5" FontSize="14" />
                <Label Text="删除" Margin="0,5,0,5" FontSize="14" />
                <Label Text="分享" Margin="0,5,0,5" FontSize="14" />
                <!-- 你的菜单选项 -->
            </StackLayout>
        </Frame>
    </RelativeLayout>
</ContentView>

然后在项ViewModel里实现ToggleMenuCommand，还能顺便处理菜单超出屏幕的情况：

public ICommand ToggleMenuCommand => new Command<VisualElement>(view =>
{
    if (view is Frame menuFrame)
    {
        menuFrame.IsVisible = !menuFrame.IsVisible;
        // 可选：如果菜单左边超出屏幕，就调整到按钮右侧显示
        var screenWidth = DeviceDisplay.MainDisplayInfo.Width / DeviceDisplay.MainDisplayInfo.Density;
        var menuX = menuFrame.X;
        if (menuX < 0)
        {
            menuFrame.RelativeLayout.XConstraint = Constraint.RelativeToView(menuFrame.Parent.FindByName<Image>("DotsButton"), (parent, view) => view.X + view.Width);
        }
    }
});

方案二：改进Rg.Plugins.Popup的定位逻辑 #

如果你坚持要用Rg.Plugins.Popup，核心问题是获取BindableLayout项中按钮的屏幕绝对坐标，然后传递给Popup调整位置。

实现步骤： #

1. 写一个扩展方法，获取VisualElement的屏幕坐标：

public static class VisualElementExtensions
{
    public static Point GetScreenPosition(this VisualElement element)
    {
        // 确保元素已完成布局
        element.Layout(new Rectangle(element.X, element.Y, element.Width, element.Height));
        // 转换为屏幕坐标
        return element.PointToScreen(new Point(0, 0));
    }
}

2. 在TapGesture的Command中获取按钮坐标，传递给自定义Popup：

public ICommand ShowPopupMenuCommand => new Command<Image>(async (button) =>
{
    var screenPos = button.GetScreenPosition();
    var menuPopup = new MenuPopupPage(screenPos.X, screenPos.Y);
    await PopupNavigation.Instance.PushAsync(menuPopup);
});

3. 自定义PopupPage，根据传入的坐标调整位置：

public class MenuPopupPage : PopupPage
{
    private double _buttonX;
    private double _buttonY;

    public MenuPopupPage(double buttonX, double buttonY)
    {
        _buttonX = buttonX;
        _buttonY = buttonY;
        BackgroundColor = Color.Transparent; // 去掉遮罩
        // 初始化菜单内容
        Content = new Frame
        {
            WidthRequest = 180,
            CornerRadius = 8,
            Padding = 10,
            BackgroundColor = Color.White,
            Content = new StackLayout
            {
                Children =
                {
                    new Label { Text = "编辑" },
                    new Label { Text = "删除" },
                    new Label { Text = "分享" }
                }
            }
        };
    }

    protected override void OnAppearing()
    {
        base.OnAppearing();
        // 调整到按钮右上方（可根据需求修改偏移量）
        this.Margin = new Thickness(_buttonX - Content.Width + 32, _buttonY + 32, 0, 0);
    }
}

方案三：利用Xamarin.Forms自带ContextAction（极简备选） #

如果菜单选项简单，也可以用原生ContextAction，结合TapGesture手动触发：

<StackLayout>
    <Label Text="{Binding Title}">
        <Label.ContextActions>
            <MenuItem Text="编辑" Command="{Binding EditCommand}" />
            <MenuItem Text="删除" Command="{Binding DeleteCommand}" />
        </Label.ContextActions>
    </Label>
    <Image Source="three_dots.png">
        <Image.GestureRecognizers>
            <TapGestureRecognizer Command="{Binding ShowContextMenuCommand}" />
        </Image.GestureRecognizers>
    </Image>
</StackLayout>

不过这个方案需要写平台特定代码来手动触发上下文菜单，不如前两个直观，适合快速实现简单需求。

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