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

Question

我正在努力在单击图像时显示下拉菜单，并且还在列表视图行上单击鼠标右键并显示菜单。我设法在相对布局和框架的帮助下得到了一些东西，但它占用了空间，而且位置也不正确。

这是我设法得到的

但是我必须像下面这样。应删除空间。菜单应位于堆栈布局上方。有什么办法可以使它超过堆栈布局吗？像下面这样

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

Answer 1

下拉菜单并右键单击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右键单击事件，然后调用一个弹出窗口。有关更多代码，请参考以下内容。

Forms客户

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
}