XAML 无法从CollectionView按钮命中ICommand

holgip5t  于 11个月前  发布在  其他
关注(0)|答案(1)|浏览(160)

在我使用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方法

ssm49v7z

ssm49v7z1#

首先,你可以阅读关于Relative Binding的官方文档。并可以绑定到一个祖先。如:

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

字符串

相关问题