如何讓 Maui ListView ContextMenu 綁定到我的 viewmodel 命令

Question

我有以下 XAML

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
             x:Class="MyApp.Pages.Locations.LocationsList"
             xmlns:mvvm="clr-namespace:MvvmHelpers;assembly=MvvmHelpers"
             xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui">
    <ContentPage.ToolbarItems>
        <ToolbarItem Text="Add" Command="{Binding AddCommand}" />
    </ContentPage.ToolbarItems>
    <ContentPage.Behaviors>
        <toolkit:EventToCommandBehavior EventName="Appearing" Command="{Binding LoadCommand}" />
    </ContentPage.Behaviors>
    <ContentPage.Resources>
        <ResourceDictionary>
            <toolkit:SelectedItemEventArgsConverter x:Key="SelectedItemEventArgsConverter" />
        </ResourceDictionary>
    </ContentPage.Resources>
    <ListView BackgroundColor="Transparent"
              CachingStrategy="RecycleElement"
              ItemsSource="{Binding Locations}"
              SelectedItem="{Binding SelectedLocation, Mode=TwoWay}"
              SeparatorVisibility="None"
              HasUnevenRows="True">
        <ListView.Behaviors>
            <toolkit:EventToCommandBehavior
                        EventName="ItemSelected"
                        EventArgsConverter="{StaticResource SelectedItemEventArgsConverter}"
                        Command="{Binding SelectCommand}"/>
        </ListView.Behaviors>
        <ListView.ItemTemplate>
            <DataTemplate>
                <ViewCell>
                    <ViewCell.ContextActions>
                        <MenuItem Text="Delete" IsDestructive="True"
                                          Command="{Binding DeleteCommand}"
                                          CommandParameter="{Binding .}" />
                        <MenuItem Text="Edit"  Command="{Binding EditCommand}"
                                    CommandParameter="{Binding .}" />
                    </ViewCell.ContextActions>
                    <Grid Padding="10">
                        <Frame>
                            <StackLayout Orientation="Horizontal">
                                <Image Source="map.png" WidthRequest="40" />
                                <StackLayout Orientation="Vertical" Padding="10,0,0,0">
                                    <Label VerticalOptions="Center"
                                       FontSize="Medium"
                                       Text="{Binding Name}" />
                                    <Label VerticalOptions="Center"
                                       FontSize="Micro"
                                       Text="This is where the address will go." />
                                </StackLayout>
                            </StackLayout>
                        </Frame>
                    </Grid>
                </ViewCell>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</ContentPage>

我的 ViewModel 使用 Maui Community Toolkit 並定義了 4 個 AsyncCommands

• 加載命令
• 保存命令
• 刪除命令
• 編輯命令

LoadCommand 和 SaveCommand 工作正常，但 DeleteCommand 和 EditCommand 不觸發。 我認為這與視圖模型上的命令有關，而不是項目源 model 上的命令。如何讓它觸發視圖模型上的 AsyncCommands？

謝謝

Answer 1

為此，您可以查看文檔Define MenuItem behavior with MVVM 。

MenuItem class 通過BindableProperty對象和ICommand接口支持Model-View-ViewModel (MVVM)模式。 以下 XAML 顯示了綁定到視圖模型上定義的命令的 MenuItem 實例：

<?xml version="1.0" encoding="utf-8" ?> 
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:viewmodels="clr-namespace:MenuItemDemos.ViewModels"
             mc:Ignorable="d"
             x:Class="MenuItemDemos.MenuItemXamlMvvmPage"
             x:Name="myContentpage"
             Padding="10"
             Title="MenuItem XAML MVVM Demo"
             >
    
    <ContentPage.BindingContext>
        <viewmodels:ListPageViewModel />
    </ContentPage.BindingContext>

    <StackLayout>
        <Label Text="Reveal the context menu by right-clicking (UWP), long-pressing (Android), or swiping (iOS) an item in the following list." />
        <Label Text="{Binding Message}"
               TextColor="Red"
               HorizontalOptions="CenterAndExpand"
               VerticalOptions="Start" />
        <ListView ItemsSource="{Binding Items}"
                  HorizontalOptions="CenterAndExpand"
                  VerticalOptions="CenterAndExpand">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <ViewCell.ContextActions>
                            <MenuItem Text="Edit"
                                      IconImageSource="icon.png"
                                      Command="{Binding Source={x:Reference myContentpage}, Path=BindingContext.EditCommand}"
                                      CommandParameter="{Binding .}"/>
                            <MenuItem Text="Delete"
                                      Command="{Binding Source={x:Reference myContentpage}, Path=BindingContext.DeleteCommand}"
                                      CommandParameter="{Binding .}"/>
                        </ViewCell.ContextActions>
                        <Label Text="{Binding .}" />
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </StackLayout>
</ContentPage>

viewmodel(ListPageViewModel.cs) 包含 XAML 中引用的命令：

public class ListPageViewModel : INotifyPropertyChanged
{
    ...

    public ICommand EditCommand => new Command<string>((string item) =>
    {
        Message = $"Edit command was called on: {item}";
    });

    public ICommand DeleteCommand => new Command<string>((string item) =>
    {
        Message = $"Delete command was called on: {item}";
    });
}