下拉菜单并右键单击 Xamarin.Forms UWP 中的列表项

Question

我很难在单击图像时显示下拉菜单以及右键单击并在列表视图行上显示菜单。我设法在相对布局和框架的帮助下得到了一些东西，但它占用了 space 并且也没有进入正确的位置。

这是我设法得到的

但我必须将其制作成如下所示。 Space 应该被删除。菜单应该超过堆栈布局。有什么办法可以让它超过 stacklayout 吗？像下面这样的东西

同样在下面显示的列表中，我想添加右键单击并显示菜单选项，这也需要在列表视图上显示框架或其他布局。见下图。任何帮助或示例都会对我有很大帮助。

Answer 1

Drop down Menu & right Click on list item in Xamarin.Forms UWP

Xamarin ViewCell 有 ContextActions 属性可用于响应 ListView 项目的右键单击。不幸的是，MenuItem 很难自定义。

<ViewCell.ContextActions>
    <MenuItem Text="Add" Clicked="Add_Clicked"></MenuItem>
    <MenuItem Text="Delete" Clicked="Delete_Clicked"></MenuItem>
    <MenuItem Text="Edit" Clicked="Edit_Clicked"></MenuItem>
</ViewCell.ContextActions>

对于您的情况，我们建议自定义 ListViewRender，并监听 ListViewItem 右键单击事件然后调用弹出窗口。更多代码请参考下面

表单客户端

public class CustomListView :ListView
{
    public event ItemRightTappedEventHandler ItemRightTapped;
    public void RaiseItemRightTapped(ItemRightTappedEventArgs e)
    {
        if (ItemRightTapped != null)
            this.ItemRightTapped(this, e);
    }

}
public delegate void ItemRightTappedEventHandler(object sender, ItemRightTappedEventArgs e);
public class ItemRightTappedEventArgs : EventArgs
{
    #region Fields

    private object itemData = null;

    private Point position;

    #endregion

    #region Constructor

    public ItemRightTappedEventArgs(object itemData, Point position)
    {
        this.itemData = itemData;
        this.position = position;
    }

    #endregion

    #region Property

    public object ItemData
    {
        get { return itemData; }
    }

    public Point Position
    {
        get { return position; }
    }

    #endregion
}

UWP 客户端

[assembly: ExportRenderer(typeof(CustomListView), typeof(CustomListViewRender))]

namespace DropDownMenuTest.UWP
{
    public class CustomListViewRender : ListViewRenderer
    {
        ListView listView;
        Xamarin.Forms.ITemplatedItemsView<Xamarin.Forms.Cell> TemplatedItemsView => Element;
        object clickItemdataContext;
        protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.ListView> e)
        {
            base.OnElementChanged(e);
            listView = Control as ListView;
            if (Control != null)
            {
                listView.Loaded += ListView_Loaded;
            }

        }
        protected override void OnApplyTemplate()
        {
            base.OnApplyTemplate();
        }
        private void ListView_Loaded(object sender, Windows.UI.Xaml.RoutedEventArgs e)
        {

            listView.RightTapped += ListView_RightTapped;

        }

        private void ListView_RightTapped(object sender, Windows.UI.Xaml.Input.RightTappedRoutedEventArgs e)
        {
            var orig = e.OriginalSource as DependencyObject;
            int index = -1;


            // Work our way up the tree until we find the actual list item
            // the user tapped on

            while (orig != null && orig != List)
            {
                var lv = orig as ListViewItem;
                if (lv != null)
                {
                    index = TemplatedItemsView.TemplatedItems.GetGlobalIndexOfItem(lv.Content);
                    clickItemdataContext = listView.ItemFromContainer(lv);
                    break;
                }

                orig = VisualTreeHelper.GetParent(orig);
            }

            if (index > -1)
            {
                var point = e.GetPosition(listView);

                OnListItemClicked(clickItemdataContext, new Xamarin.Forms.Point(point.X, point.Y));
            }

        }

        void OnListItemClicked(object context, Xamarin.Forms.Point point)
        {
            var tappedEventArgs = new ItemRightTappedEventArgs(context, new Xamarin.Forms.Point(point.X, point.Y));
            var customListView = Element as CustomListView;
            customListView.RaiseItemRightTapped(tappedEventArgs);

        }
        protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
        {
            base.OnElementPropertyChanged(sender, e);
        }

    }
}

用法

<local:CustomListView
    x:Name="MainListView"
    HasUnevenRows="True"
    ItemRightTapped="MainListView_ItemRightTapped"
    >
    <ListView.ItemTemplate>
        <DataTemplate>
            <ViewCell>
                <Grid>
                    <Label
                        FontSize="25"
                        Text="{Binding .}"
                        TextColor="Navy"
                        />
                </Grid>
            </ViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</local:CustomListView>

private void MainListView_ItemRightTapped(object sender, ItemRightTappedEventArgs e)
{
// show popup view
}

下拉菜单并右键单击 Xamarin.Forms UWP 中的列表项

Drop down Menu & right Click on list item in Xamarin.Forms UWP

uwp

xamarin.uwp