如何在CollectionView行点击时唤起上下文菜单？（多平台适配）

核心实现思路 #

借助跨平台框架的原生DisplayActionSheet组件，结合CollectionView的点击事件触发菜单显示，无需额外平台特定代码即可实现三平台一致的上下文菜单效果。

1. 布局代码编写 #

在CollectionView的ItemTemplate中添加点击手势，绑定ViewModel的命令并传递当前行数据：

<CollectionView ItemsSource="{Binding Items}">
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <VerticalStackLayout Padding="12" Margin="6" BackgroundColor="#f0f0f0">
                <Label Text="{Binding Title}" FontSize="16" />
                <Label Text="{Binding Description}" FontSize="12" TextColor="Gray" />
                <!-- 绑定点击手势到命令 -->
                <VerticalStackLayout.GestureRecognizers>
                    <TapGestureRecognizer 
                        Command="{Binding BindingContext.ShowItemMenuCommand, Source={RelativeSource AncestorType={x:Type CollectionView}}}"
                        CommandParameter="{Binding .}" />
                </VerticalStackLayout.GestureRecognizers>
            </VerticalStackLayout>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

2. ViewModel逻辑处理 #

定义命令处理点击事件，调用DisplayActionSheet弹出菜单，并根据用户选择执行对应操作：

public class MainViewModel : INotifyPropertyChanged
{
    public ObservableCollection<Item> Items { get; set; }
    public ICommand ShowItemMenuCommand { get; }

    public MainViewModel()
    {
        // 模拟测试数据
        Items = new ObservableCollection<Item>
        {
            new Item { Title = "测试项目1", Description = "这是第一条测试数据" },
            new Item { Title = "测试项目2", Description = "这是第二条测试数据" }
        };

        ShowItemMenuCommand = new Command<Item>(async (selectedItem) =>
        {
            if (selectedItem == null) return;

            // 弹出上下文菜单
            var result = await App.Current.MainPage.DisplayActionSheet(
                $"操作: {selectedItem.Title}", 
                "取消", 
                null, 
                "编辑", 
                "删除", 
                "查看详情");

            // 根据用户选择执行对应逻辑
            switch (result)
            {
                case "编辑":
                    await App.Current.MainPage.DisplayAlert("提示", $"开始编辑「{selectedItem.Title}」", "确定");
                    break;
                case "删除":
                    Items.Remove(selectedItem);
                    await App.Current.MainPage.DisplayAlert("提示", $"「{selectedItem.Title}」已删除", "确定");
                    break;
                case "查看详情":
                    await App.Current.MainPage.DisplayAlert("详情", selectedItem.Description, "确定");
                    break;
            }
        });
    }

    // 实现INotifyPropertyChanged接口（可借助CommunityToolkit.Mvvm简化）
    public event PropertyChangedEventHandler PropertyChanged;
    protected void OnPropertyChanged(string propertyName)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

// 数据模型类
public class Item
{
    public string Title { get; set; }
    public string Description { get; set; }
}

3. 平台适配说明 #

• Android：DisplayActionSheet会调用系统原生底部操作菜单
• iOS：显示符合iOS设计规范的底部弹窗菜单
• Windows：弹出UWP风格的上下文操作面板

如果需要自定义菜单样式，可结合MAUI的Popup组件实现更复杂的自定义菜单布局。

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