UWP ListView项目上下文菜单 [英] UWP ListView Item context menu

问题描述

我正在互联网上搜索如何为 ListView 添加上下文菜单。到目前为止，我已经找到了一个实际显示上下文的

I'm searching internet for how to add context menu for ListView. So far I've found one that actually displays context

<ListView>
    ...
    RightTapped="ContactsListView_RightTapped" >
    ...
    <ListView.Resources>
        <MenuFlyout x:Name="allContactsMenuFlyout">
            <MenuFlyout.Items>
                <MenuFlyoutItem x:Name="Edit"  Text="Edit"/>
                <MenuFlyoutItem x:Name="Remove" Text="Remove"    Click="Remove_Click"/>
            </MenuFlyout.Items>
        </MenuFlyout>
    </ListView.Resources>
    ...
</ListView>

private void ContactsListView_RightTapped(object sender, RightTappedRoutedEventArgs e) {
    ListView listView = (ListView)sender;
    allContactsMenuFlyout.ShowAt(listView, e.GetPosition(listView));
}

private void Remove_Click(object sender, RoutedEventArgs e) {

}

问题是我无法获得显示上下文菜单的项目。另一个问题是上下文菜单也显示在列表视图项的外部（例如，在边框上）。而且由于触发的事件是RightTapped，因此我不确定是否会在移动设备上长按鼠标来显示上下文菜单。我无法测试它，因为我的仿真器当前无法正常工作。由于它应该是通用的Windows应用程序，因此我期望为ListView项创建上下文菜单的一种非常简单有效的方法。

The problem is I'm not able to get item on which the context menu was displayed. Another issue is that the context menu is displayed also outside of list view item (e.g. on borders). And since the event that is triggered is RightTapped, I'm not sure if the context menu would be displayed on long click on mobile devices. I cannot test it because my emulators are not currently working. Since it should be universal windows app I was expecting some really easy and efficient way of creating context menus for ListView items.

推荐答案

问题是我无法获得显示上下文菜单的项目。

The problem is I'm not able to get item on which the context menu was displayed.

对于此问题，如果将数据添加到 ListView 中，如下所示：

For this problem, if you add data to the ListView like this:

<ListView RightTapped="ListView_RightTapped">
    <x:String>First Item</x:String>
    <x:String>Second Item</x:String>
    <x:String>Third Item</x:String>
    <x:String>Fourth Item</x:String>

    <ListView.Resources>
        <MenuFlyout x:Name="allContactsMenuFlyout">
            <MenuFlyout.Items>
                <MenuFlyoutItem x:Name="Edit"  Text="Edit" />
                <MenuFlyoutItem x:Name="Remove" Text="Remove"    Click="Remove_Click" />
            </MenuFlyout.Items>
        </MenuFlyout>
    </ListView.Resources>
</ListView>

您可以在 RightTapped 这样的事件：

private void ListView_RightTapped(object sender, RightTappedRoutedEventArgs e)
{
    ListView listView = (ListView)sender;
    allContactsMenuFlyout.ShowAt(listView, e.GetPosition(listView));
    var a = ((FrameworkElement)e.OriginalSource).DataContext;
}

在这种情况下， a将直接获取被点击的字符串格式内容

In this scenario, "a" will directly get the string format content of clicked item.

如果使用 DataTemplate ListView c>像这样：

If you add your data to ListView using DataTemplate like this:

<ListView RightTapped="ListView_RightTapped" ItemsSource="{x:Bind list}">
    <ListView.ItemTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding text}" />
        </DataTemplate>
    </ListView.ItemTemplate>
    <ListView.Resources>
        <MenuFlyout x:Name="allContactsMenuFlyout">
            <MenuFlyout.Items>
                <MenuFlyoutItem x:Name="Edit"  Text="Edit" />
                <MenuFlyoutItem x:Name="Remove" Text="Remove"    Click="Remove_Click" />
            </MenuFlyout.Items>
        </MenuFlyout>
    </ListView.Resources>
</ListView>

通常，当使用 DataTemplate 时， ObservableCollection 的数据，像这样：

and usually when using DataTemplate, we add data by ObservableCollection like this:

private ObservableCollection<List> list = new ObservableCollection<List>();

public MainPage()
{
    this.InitializeComponent();
    list.Clear();
    list.Add(new List { text = "Item 1" });
    list.Add(new List { text = "Item 2" });
    list.Add(new List { text = "Item 3" });
    list.Add(new List { text = "Item 4" });
    list.Add(new List { text = "Item 5" });
}

List类在这里测试很简单：

"List" class is quite simple here for test:

public class List
{
    public string text { get; set; }
}

然后我们也可以获取 DataContext 在 RightTapped 事件中：

Then also we can get the DataContext in the RightTapped event:

private void ListView_RightTapped(object sender, RightTappedRoutedEventArgs e)
{
    ListView listView = (ListView)sender;
    allContactsMenuFlyout.ShowAt(listView, e.GetPosition(listView));
    var a = ((FrameworkElement)e.OriginalSource).DataContext;
}

但这一次， a实际上是列表对象（请请参阅该项目内部的 List类），因为该项目的内容现在是一个 List对象，不再是字符串。这样我们就可以像这样获取该对象的文本属性：

But this time, "a" is actually the 'List' object (please refer to the "List" class) inside the item, because the content of the item is now a 'List' object, not a string any more. So we can get the text property of this object like this:

private void ListView_RightTapped(object sender, RightTappedRoutedEventArgs e)
{
    ListView listView = (ListView)sender;
    allContactsMenuFlyout.ShowAt(listView, e.GetPosition(listView));
    var a = ((FrameworkElement)e.OriginalSource).DataContext as List;
    var content = a.text;
}

我认为最终您想编辑的按钮单击事件中的内容 Flyout ，您可以这样操作：

I think eventually you want to edit the content in the Button click event of the Flyout, you can do it for example like this:

private string content;

private void ListView_RightTapped(object sender, RightTappedRoutedEventArgs e)
{
    ListView listView = (ListView)sender;
    allContactsMenuFlyout.ShowAt(listView, e.GetPosition(listView));
    var a = ((FrameworkElement)e.OriginalSource).DataContext as List;
    content = a.text;
}

private void Remove_Click(object sender, RoutedEventArgs e)
{
    foreach (var item in list.ToList())
    {
        if (item.text == content)
        {
            list.Remove(item);
        }
    }
    content = "";
}

另一个问题是显示了上下文菜单还是在列表视图项之外（例如在边框上）。

Another issue is that the context menu is displayed also outside of list view item (e.g. on borders).

您能解释一下吗？我不太明白。您是说要在 Flyout 中显示内容？如果是这样，我认为上述方法可以解决此问题。如果没有，您可以发表评论，我会看看这个问题是否可以解决。

Can you explain this? I can't quite understand it. You mean displaying the content for example in the Flyout? If so, I think the method above can solve this problem. If not, you can leave a comment, and I will see if this problem can be resolved.

由于触发的事件是右键单击，我不确定是否会在长按移动设备时显示上下文菜单。

And since the event that is triggered is RightTapped, I'm not sure if the context menu would be displayed on long click on mobile devices.

我认为此处的长按事件表示 Holding 事件，例如这个？

I think that "long click" event here indicates the Holding event like this?

private void ListView_Holding(object sender, HoldingRoutedEventArgs e)
{
    ListView listView = (ListView)sender;
    allContactsMenuFlyout.ShowAt(listView, e.GetPosition(listView));
    var a = ((FrameworkElement)e.OriginalSource).DataContext as List;
    content = a.text;
}

我只是在Mobile Emulator上对其进行了测试，效果很好。虽然我在这里写了一个很长的答案，但是要点很简单，您可以只使用（（（FrameworkElement）e.OriginalSource）.DataContext 来获取项目。

I just test it on the Mobile Emulator, it works fine. Although I wrote a quite long answer here, but the key point is quite simple, you can just use ((FrameworkElement)e.OriginalSource).DataContext to get the Context of the item.

这篇关于UWP ListView项目上下文菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！