无法从 CollectionView 按钮点击 ICommand

Question

在我使用 Mvvm.Toolkit 的应用程序中，我遇到了一个问题，即放置在 CollectionView 中的按钮在单击时无法调用 ViewModel 中关联的 ICommand 方法。有趣的是，类似的实现在另一个 ViewModel 中无缝运行。尽管确认应用程序的所有其他方面都正常运行，但 CollectionView 内的行为提出了独特的挑战。

值得注意的是，我使用了 Mvvm.Toolkit 的 ICommand 机制来成功处理应用程序各个部分中的用户交互。然而，在 CollectionView 的特定上下文中，没有观察到预期的行为。

虽然 ViewModel 结构和 ICommand 实现已在不同场景中被证明是有效的，但 CollectionView 似乎引入了影响 ICommand 方法执行的细微差别。我已经仔细检查了代码是否存在潜在差异，但尚未发现任何明显的问题。

查看模型类

using CommunityToolkit.Mvvm.ComponentModel;
using CommunityToolkit.Mvvm.Input;
using Newtonsoft.Json;
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Linq;
using System.Text;
using System.Text.Json.Serialization;
using System.Threading.Tasks;

namespace ShoppingCart.Models
{

    public partial class ProductViewModel : ObservableObject
    {
        public ObservableCollection<Product> Products {get; set; } = new ObservableCollection<Product>();
        

        [ObservableProperty]
        public string productId;
        [ObservableProperty]
        public string productName;
        [ObservableProperty]
        public string description;
        [ObservableProperty]
        public string imageUrl;
        [ObservableProperty]
        public int quantity;
        [ObservableProperty]
        public int price;

       
        public ProductViewModel()
        {
            GetAllProducts();
        }
        [ICommand]
        public void EditProduct()
        {
            App.Current.MainPage.DisplayAlert("Hello", "sdfs", "Ok");
        }
        public void GetAllProducts()
        {
            var client = new HttpClient();
            string url = "https://834xqncj-7275.inc1.devtunnels.ms/api/Product/Index";
            client.BaseAddress = new Uri(url);
            HttpResponseMessage response =  client.GetAsync(client.BaseAddress).Result;
            if (response.IsSuccessStatusCode)
            {
                string content = response.Content.ReadAsStringAsync().Result;
                List<Product> products = JsonConvert.DeserializeObject<List<Product>>(content);
                Products = new ObservableCollection<Product>(products);
            }
        }
        
    }
}

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:vm="clr-namespace:ShoppingCart.Models"
             x:DataType="vm:ProductViewModel"
             x:Class="ShoppingCart.Pages.AdminPage"
             Title="AdminPage">
  
    <VerticalStackLayout>
        <Button x:Name="AddBtn"  Text="AddProduct"  Clicked="AddBtn_Clicked"/>
        <CollectionView ItemsSource="{Binding Products}">
            <CollectionView.ItemTemplate>
                <DataTemplate>
                    <Grid Padding="10">
                        <Image Source="https://aka.ms/campus.jpg" Aspect="AspectFill" HeightRequest="100"/>
                        <StackLayout Orientation="Horizontal">
                            <StackLayout BackgroundColor="Black" Opacity="0.7" Padding="10" VerticalOptions="End">
                                <Label Text="{Binding ProductName}" TextColor="White" FontSize="Title" />
                                <Label Text="{Binding Price, StringFormat='Price: {0:C}'}" TextColor="White" FontSize="Subtitle" />
                            </StackLayout>
                            <Button Text="Edit" Command="{Binding EditProductCommand}" />
                        </StackLayout>
                        
                       
                    </Grid>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>
    </VerticalStackLayout>
</ContentPage>

如何通过ICommand点击EditProduct方法

Answer 1

首先，你可以阅读关于相对绑定的官方文档。你可以绑定到祖先。如：

<Button Text="Edit"
 Command="{Binding Source={RelativeSource AncestorType={x:Type vm:ProductViewModel}}, Path=EditProductCommand}"
" />