XAML 创建ImageButton函数以在项目突出显示为收藏夹xamarin表单时更改时出错

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

我正在使用Xamarin和MVVM创建一个项目,我想知道如何创建一个按钮,我将有一个灰色的收藏夹图像,当我单击时,我想将其更改为红色的收藏夹图像,有2个不同的图像。
I wanted something like this:
我尝试使用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>

字符串

kmb7vmvb

kmb7vmvb1#

您可以为数据列表的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>

注:

在这里,我们可以使用以下代码在视图模型上绑定命令AddFavouriteCommand。而mCollectionView是当前CollectionView的x:Name

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

相关问题