我如何获得Maui listviewcontextmenu绑定到我的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

LoadCommand和SaveCommand工作完美，但DeleteCommand和EditCommand不触发。我认为这与视图模型上的命令而不是项目源模型上的命令有关。我如何让它触发视图模型上的AsyncCommands ?

感谢

Answer 1

为此，您可以使用MVVM检查文档定义菜单项行为。

MenuItem类通过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>

视图模型(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}";
});
}