如何将上下文菜单添加到 xamarin UWP 应用程序中的列表项？

Posted 2023-03-25

【中文标题】如何将上下文菜单添加到 xamarin UWP 应用程序中的列表项？

【英文标题】：how to add a context menu to a list item in xamarin UWP app?

【发布时间】：2021-11-30 11:11:37

【问题描述】：

我有以下 xaml 代码：

 <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         xmlns:local="clr-namespace:GraphTutorial.Models"
         Title="Shared Document Library"
         x:Class="GraphTutorial.SPDocumentLibraryContentsPage">

    ...
    ...

     <ListView x:Name="SharedDocumentList"
                  HasUnevenRows="true"
                  Margin="10,10,10,10"
                  ItemSelected="OnItemSelected">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <StackLayout Margin="10,10,10,10">
                            <Label Text="Binding Path=Id"
                                   FontAttributes="Bold"
                                   FontSize="Medium" />
                            <Label Text="Binding Path=WebUrl"
                                   FontSize="Small" />
                        </StackLayout>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
            <ListView.Resources>
                <MenuFlyout x:Name="DocumentActions">
                    <FlyoutItem x:Name="Edit"  Text="Edit" />
                    <FlyoutItem x:Name="Remove" Text="Remove"    Click="Remove_Click" />
                </MenuFlyout>
            </ListView.Resources>
        </ListView>

我目前在线收到以下错误消息：

错误 XLS0414 找不到类型“MenuFlyout”。确认您是 不缺少程序集引用以及所有引用的程序集 已建成。

有人能指出正确的方向吗？

谢谢。

编辑 1

我也试过这个：

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         xmlns:local="clr-namespace:GraphTutorial.ContextMenu"  
         Title="Shared Document Library"
         x:Class="GraphTutorial.SPDocumentLibraryContentsPage">

        <ListView x:Name="SharedDocumentList"
                  HasUnevenRows="true"
                  Margin="10,10,10,10"
                  ItemSelected="OnItemSelected">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <StackLayout Margin="10,10,10,10">
                            <Label Text="Binding Path=Id"
                                   FontAttributes="Bold"
                                   FontSize="Medium" />
                            <Label Text="Binding Path=WebUrl"
                                   FontSize="Small" />
                        </StackLayout>
                    </ViewCell>
                    <ViewCell.ContextActions>
                        <MenuItem Text="Add" Clicked="Add_Clicked"></MenuItem>
                        <MenuItem Text="Delete" Clicked="Delete_Clicked"></MenuItem>
                        <MenuItem Text="Edit" Clicked="Edit_Clicked">
                    </ViewCell.ContextActions>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>

但这会返回错误：

XLS0415 在类型中找不到可附加属性“ContextActions” 'ViewCell'。

【参考方案1】：

错误 XLS0414 找不到类型“MenuFlyout”。确认您是 不缺少程序集引用以及所有引用的程序集 已建成。

从文档MenuFlyout Class，我们知道MenuFlyout 类是uwp中的一个类，所以我们不能在xamarin中使用它。

如果你想给xamarin UWP中的列表项添加上下文菜单，可以参考以下代码：

<ListView x:Name="listView" Margin="20" ItemSelected="OnListItemSelected">
    <ListView.ItemTemplate>
        <DataTemplate>
            <ViewCell>
                <StackLayout Margin="20,0,0,0" Orientation="Horizontal" HorizontalOptions="FillAndExpand">
                    <Label Text="Binding Name" VerticalTextAlignment="Center" HorizontalOptions="StartAndExpand" />
                    <Image Source="check.png" HorizontalOptions="End" IsVisible="Binding Done" />
                </StackLayout>

                <ViewCell.ContextActions>
                    <MenuItem Text="Delete"
                                  Clicked="OnDeleteClicked"/>
                </ViewCell.ContextActions>
            </ViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

在 page.xaml.cs 中

    void OnDeleteClicked(object sender, EventArgs e)
    
        TodoItem itemToDelete = ((sender as MenuItem).BindingContext as TodoItem);
        // other code
    

更多详情，您可以查看：

https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/menuitem

https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/menuitem#cross-platform-context-menu-behavior

【讨论】：

嗨。所以这与我尝试的第二个示例非常相似/基本相同 - 列在编辑 1 下。但我收到一个错误，如编辑 1 部分所示（现在）。

为了让代码工作，我只需要在实际的 stacklayout 之前定义上下文操作 - 我将其更改为 grid。