UxBoolConvert in xamarin

Question

I am making an application for a basket, I need to change the image in the addToCart button. I have a + button in the form of a list, and I add an item to the basket so that the image changes to "-". when I remove an item from my recycle bin, the image again changes to "+". I hope that here I also need to be notified, but how to implement it here. I have a Boolean property. My logic is “change the boolean value when adding and removing, but I don’t know how to change the image to a button”, this is my view model

public BaseViewModel(){
        App.Instance.ViewModel = this;
        TempList = TempList ?? new ObservableCollection<cm_items>();
        this.Title = AppResources.AppResource.Cart_menu_title;
        this.IsContain = CartCell.buttonImg();
        TempList.CollectionChanged += (sender, args) =>{
            this.Price = CartCell.Calculate_price();};}

and my property

  private bool _isContain;
    public bool IsContain
    {
        get { return _isContain; }
        set {_isContain=value;OnPropertyChanged("IsContain");}
    }

and converter

 public class BoolToImageConverter : IValueConverter
{
      #region IValueConverter implementation

    public object Convert (object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        if (value is bool)  {

            if((bool)value == true)
    return "add.png";
    else
    return "minus.png";
        }
        return "";
    }

    public object ConvertBack (object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        throw new NotImplementedException ();
    }

    #endregion
}

but still i have no image in the button

Answer 1

in my cage

  var addedOrNotImageBinding = new Binding("IsAddedToCart", 0, new ImagePathConvertor());
        btn_Cart.SetBinding(ImageButton.SourceProperty,addedOrNotImageBinding);

        btn_Cart.Clicked += (sender, e ) =>
            {
                sender = BindingContext;

                cm_items item = (cm_items)sender;
                //ViewCell viewCell = (ViewCell)sender;
                //BaseViewModel item = (BaseViewModel)viewCell.BindingContext;
                if (item.IsAddedToCart)
                {

                   item.IsAddedToCart = false;
                    App.Instance.ViewModel.TempList.Remove(BindingContext as cm_items);
                }
                else
                {
                    item.IsAddedToCart = true;
                    App.Instance.ViewModel.TempList.Add(BindingContext as cm_items);
                }

             //   CartCell.Calculate_price();
            };

ImagePathConvertor,

public class ImagePathConvertor : IValueConverter
{
    public ImagePathConvertor() { }



    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        if ((bool)value)
        {
            return "minus";
        }
        else
        {
            return "add";
        }


    }

    public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        throw new NotImplementedException();
    }

    #endregion
}

   private bool isAddedToCart;
    public bool IsAddedToCart
    {
        get { return isAddedToCart; }
        set
        {
            isAddedToCart = value;
            OnPropertyChanged("IsAddedToCart");
        }
    }
    private void OnPropertyChanged(string propertyName)
    {
        if (PropertyChanged != null)
        {
            PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}

, @David

Answer 2

, : https://developer.xamarin.com/guides/cross-platform/xamarin-forms/user-interface/xaml-basics/data_binding_basics/

yourImageView.SetBinding<YourViewModelType>(Image.SourceProperty, v => v.IsContain);

BindingContext ViewModel.

Answer 3

ValueConvertor, Image, .

.

IE

public class MyPage : ContentPage
    {
        ObservableCollection<string> listToWatch = new ObservableCollection<string> ();
        public MyPage ()
        {
            Button buttonToUpdate = new Button {Text = "Image Button",  Image = "icon.png"};
            Button UpdatesList = new Button {Text="Add Item to list"};
            buttonToUpdate.SetBinding (Button.ImageProperty, new Binding("ImagePath"));
            UpdatesList.Clicked += (sender,e) => {
                listToWatch.Add (DateTime.Now.ToString());
            };
            listToWatch.CollectionChanged+=(sender,e)=>{
                if( listToWatch.Count%2==1)
                {
                    ImagePath="noci.png";       
                }
                else
                {
                    ImagePath="icon.png";
                }
            };
            Content = new StackLayout { 
                Children = {
                    buttonToUpdate,
                    UpdatesList
                }
            };
            Content.BindingContext = this;
        }
        private string imagePath="icon.png";
        public string ImagePath {
            get { return imagePath; } 
            set { 
            imagePath = value; 
            OnPropertyChanged ("ImagePath");
            }
        }
    }

https://github.com/DavidStrickland0/Xamarin-Forms-Samples.git

Answer 4

ViewModel seems good. Could you provide your button please? How do you bind the IsContain property to the Image Properties property?

If I were you, I would create a slightly different converter:

    public class UxBoolConvertExtension : IValueConverter, IMarkupExtension
{
    public object OnTrue { get; set; }

    public object OnFalse { get; set; }

    public object OnNull { get; set; }

    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return ImageSourceHelper.ToImageSourceIfPossible(this.ConvertValue(value), targetType);
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotSupportedException();
    }

    public object ProvideValue(IServiceProvider serviceProvider)
    {
        return this;
    }

    private object ConvertValue(object value)
    {
        if (value == null) return this.OnNull;
        return (bool)value ? this.OnTrue : this.OnFalse;
    }
}

And it will bind the button image to your value using a converter, for example

<Button Image="{Binding Icon, Converter={m:UxBoolConvert OnTrue='minus.png', OnFalse='add.png'}}" />