Выпадающее меню и правый клик по элементу списка в 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 событие щелчка правой кнопкой мыши и вызвать всплывающее окно. Для получения дополнительной информации см. Следующий код:

Клиент форм

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
}