使用图像或标签切换行为 -ON -OFF -在 xamarin 表单中的列表视图内绑定图像

Question

我想在点击时将图像源从 white.png 更改为 blue.png ，当图像更改为 white.png 并且当它是 blue.png 时，我需要访问每个commannd ，也.it会根据图像结果将其设置为 true 或 false 会有所帮助。

所有这些都将出现在一个列表中。我需要访问每个被点击的人。

我试过了：

IValueConveter

public class ConverterAddRemoveImage : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            bool isAddedToCart = (bool)value;
            if (isAddedToCart)
            {
                return "FilledIcon"; //This will be a string
            }
            else
            {
                return "EmptyIcon";  //This will be a string
            }
        }
    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }

Xaml

<Image Source="{Binding IsAddedToCart, Converter={StaticResource AddRemoveImage}}"/>

这只是向我展示 else ，永远不会成为真的。理想情况下，我想访问它们中的每一个并为其添加逻辑，并且显然会更改每次点击时的图像。

第二种方法 - 这里的问题是 - 只被点击一次，我无法在第二次点击时返回到前一个图像，而且，我不知道如何访问每个命令。 （我想模仿一个开关打开和关闭，然后他们每个人都做一些事情）

public ImageSource ColorImage { get; set; }

查看模型

public ICommand SwitchIMGCommand
            {
                get;
                set;
            }



private void AddImg(object obj)
  {
     var selection = obj as ExistingModel;
     selection.ColorImage = "FilledIcon.png";**
     ColorImage= "FilledIcon.png";**I tried this and it doesnt change 
     to this img
  }



private ImageSource imagePath = "white.png";
        public ImageSource ColorImage
        {
            get { return imagePath; }
            set
            {
                imagePath = value;
                PropertyChanged(this, new PropertyChangedEventArgs("ColorImage"));
            }
        }

构造函数

SwitchIMGCommand = new Command(AddImg);

XAML

<Image
    Source="{Binding ColorImage}">  
    <Image.GestureRecognizers>
    <TapGestureRecognizer
    Command="{Binding Source={x:Reference listView}, Path=BindingContext.SwitchIMGCommand}" CommandParameter="{Binding .} "
     NumberOfTapsRequired="1" />
     </Image.GestureRecognizers>
  </Image>

Answer 1

似乎 Image 在 listview 的 ViewCell 中。

您应该在模型中定义 ColorImage。

public class MyModel : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;


    private void NotifyPropertyChanged([CallerMemberName] String propertyName = "")
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }

    private string imagePath;
    public string ColorImage
    {
        get { return imagePath; }
        set
        {
            imagePath = value;
            NotifyPropertyChanged("ColorImage");
        }
    }


    //...other properties     

    public MyModel()
    {
       ColorImage = "white.png";
    }
}

在您的视图模型中

private void AddImg(object obj)
{
   var model = obj as MyModel;

   model.ColorImage = "imgcolorblue.png";

}

Answer 2

XAML 使用 DataTrigger - ChangeIsCheckedCommand 更改 IsChecked 属性：

<Image>
  <Image.GestureRecognizers>
    <TapGestureRecognizer Command="{Binding ChangeIsCheckedCommand}" NumberOfTapsRequired="1" />
  </Image.GestureRecognizers>
  <Image.Triggers>
    <DataTrigger TargetType="Image" Binding="{Binding IsChecked}" Value="True">
      <Setter Property="Source" Value="{StaticResource OnImage}" />
    </DataTrigger>
    <DataTrigger TargetType="Image" Binding="{Binding IsChecked}" Value="False">
      <Setter Property="Source" Value="{StaticResource OffImage}" />
    </DataTrigger>
  </Image.Triggers>
</Image>

Resources 代表OnImage 和OffImage：

<OnPlatform x:Key="OnImage" x:TypeArguments="FileImageSource">
  <On Platform="Android">on.png</On>
  <On Platform="iOS">on.png</On>
  <On Platform="UWP">Assets/on.png</On>
</OnPlatform>

<OnPlatform x:Key="OffImage" x:TypeArguments="FileImageSource">
  <On Platform="Android">off.png</On>
  <On Platform="iOS">off.png</On>
  <On Platform="UWP">Assets/off.png</On>
</OnPlatform>

Answer 3

这是对Lucas Zhang Anwser 的补充，这是正确的做法，但它错过了切换回原始表单的切换功能。

以下是缺少的内容：

1º - 为模型添加布尔属性

private bool _isCheckedState;
public bool IsCheckedState
{
    get { return _isCheckedState; }
    set
    {
        _isCheckedState= value;
        NotifyPropertyChanged("IsCheckedState");
    }
}

2º - 在设置 ColorImage 之前添加验证

private void AddImg(object obj)
{
    var model = obj as MyModel;

    if(model.IsCheckedState)
        model.ColorImage = "white.png";
    else
        model.ColorImage = "imgcolorblue.png";

    model.IsCheckedState = !model.IsCheckedState;
}

Answer 4

您为参数“ColorImage”使用了错误的类型。图片的来源是 ImageSource 类型。

假设您在项目中正确设置了图像，以下代码应该可以解决您的问题

private void AddImg(object obj)
{
    ColorImage = ImageSource.FromFile("imgcolorblue.png");
}

还可以通过 ImageSource 更改“ColorImage”的类型。