创建 ImageButton 函数以在项目突出显示为最喜欢的 xamarin 表单时进行更改时出现问题

Question

我正在使用 Xamarin 和 MVVM 创建一个项目，我想知道如何创建一个按钮，其中我将有一个灰色的最喜欢的图像，当我单击时，我想将其更改为红色的最喜欢的图像，有 2 个不同的图像。

我尝试使用 ImageButton，但我在 Viewmodel 中创建 Command 功能时遇到困难：

<ImageButton
    Margin="0,0,0.5"
    BackgroundColor="Transparent"
    Command="{Binding AddFavouriteCommand}"
    CommandParameter="{Binding .}"
    HorizontalOptions="End">
    <ImageButton.Triggers>
        <DataTrigger
            Binding="{Binding ProductFavItem}"
            TargetType="ImageButton"
            Value="True">
            <Setter Property="Source" Value="love_filled.png" />
        </DataTrigger>
        <DataTrigger
            Binding="{Binding ProductFavItem}"
            TargetType="ImageButton"
            Value="False">
            <Setter Property="Source" Value="love_default.png" />
        </DataTrigger>
    </ImageButton.Triggers>
</ImageButton>

Answer 1

您可以为数据列表的 Item 模型创建一个 bool 变量（例如

public bool IsFavourited

），并根据 bool 变量的值更新

ImageView

的图标。

我这边实现了这个，可以参考以下代码：

Item.cs

  public class Item: INotifyPropertyChanged 
    {
        public string Name { get; set; }

        bool _isFavourited;
        public bool IsFavourited
        {
            get => _isFavourited;
            set => SetProperty(ref _isFavourited, value);
        }


        bool SetProperty<T>(ref T storage, T value, [CallerMemberName] string propertyName = null)
        {
            if (Object.Equals(storage, value))
                return false;
            storage = value;
            OnPropertyChanged(propertyName);
            return true;
        }
        protected void OnPropertyChanged([CallerMemberName] string propertyName = null)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
        public event PropertyChangedEventHandler PropertyChanged;
    }

MyViewModel.cs

public class MyViewModel 
{
    public ObservableCollection<Item> Items { get; set; }

   //add command AddFavouriteCommand
   public ICommand AddFavouriteCommand { get; set; }

    public MyViewModel() 
    { 
         Items =new ObservableCollection<Item>();

        Items.Add(new Item { Name = "test1" });
        Items.Add(new Item { Name = "test2" });
        Items.Add(new Item { Name = "test3" });
        Items.Add(new Item { Name = "test4" });
        Items.Add(new Item { Name = "test5" });
        Items.Add(new Item { Name = "test6" });

        AddFavouriteCommand = new Command<Item>((item) =>
        {
            item.IsFavourited= !item.IsFavourited;

            System.Diagnostics.Debug.WriteLine("---------> item " + item.Name + " is favourited or not: " + item.IsFavourited);
        });
    }
}

使用示例：

<?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:viewmodels="clr-namespace:MauiListViewMVVMApp.ViewModels"
             x:Class="MauiListViewMVVMApp.MainPage">

    <ContentPage.BindingContext>
        <viewmodels:MyViewModel></viewmodels:MyViewModel>
    </ContentPage.BindingContext>


    <StackLayout Orientation="Vertical">
        <CollectionView  ItemsSource="{ Binding Items}" x:Name="mCollectionView"   VerticalOptions="FillAndExpand"
                    SelectionMode="Single"
                    >
            <CollectionView.ItemTemplate>
                <DataTemplate>
                    <HorizontalStackLayout  Margin="3"  HeightRequest="60">
                        <Label Text="{Binding Name}" BackgroundColor="Gray" WidthRequest="100"/>

                        <ImageButton   Margin="10,0,0,0"
                                Command="{Binding  Path= BindingContext.AddFavouriteCommand,Source={Reference mCollectionView }}"  CommandParameter="{Binding .}"  >

                            <ImageButton.Triggers>
                                <DataTrigger
                                    Binding="{Binding IsFavourited}"
                                    TargetType="ImageButton"
                                    Value="True">
                                    <Setter Property="Source" Value="love_filled.png" />
                                </DataTrigger>
                                <DataTrigger
                                    Binding="{Binding IsFavourited}"
                                    TargetType="ImageButton"
                                    Value="False">
                                    <Setter Property="Source" Value="love_default.png" />
                                </DataTrigger>
                            </ImageButton.Triggers>
                        </ImageButton>
                    </HorizontalStackLayout>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>
    </StackLayout>
</ContentPage>