使用图像或标签切换行为 -ON -OFF -以 xamarin 形式在列表视图中绑定图像

Question

我想在点击时将图像源从 white.png 更改为 blue.png，当图像切换到 white.png 时我需要访问每个命令blue.png ，也。根据图像结果将其设置为 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; }

View Model

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"));
            }
        }

Constructor

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

您使用的参数类型错误 "ColorImage"。图片来源为ImageSource类型

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

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

同时更改 "ColorImage" ImageSource 的类型。

Answer 2

似乎图像在列表视图的 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 3

这是对 的补充，这是正确的做法，但它缺少转换回原始形式的切换功能。

这是缺少的内容：

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

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>