How to dynamically change image in MvvmCross

Question

I have both images in the resources folder

1) ImgMsg_Normal.png
2) ImgMsg_Grey.png

in Layout file: <ImageView android:id="@+id/imgMsg" android:src="@drawable/ImgMsg_Normal" android:layout_width="wrap_content" android:layout_height="wrap_content" android:maxHeight="80dp" android:maxWidth="80dp" android:layout_margin="20dp" android:scaleType="fitCenter" local:MvxBind =" " /> 

in code. Behind:

when this page is loaded, the indicated image is first displayed: ImgMsg_Normal.

1) How to change the image dynamically by passing the image file name: ImgMsg_Grey in local: MvxBind above?

thanks

Answer 1

We do this with a converter. Thus, the binding is performed on (for example) a logical value. If it is true, the converter returns image 1, and if the value is false, it returns image 2.

Converter (in Core-Project):

 public class MyIconValueConverter : MvxValueConverter<bool, string> { protected override string Convert(bool value, Type targetType, object parameter, CultureInfo culture) { if(value) { return "res:ImgMsg_Normal"; } else { return "res:ImgMsg_Grey"; } } } 

And the binding in your file:

 <Mvx.MvxImageView local:MvxBind="ImageUrl MyBoolProperty, Converter=MyIcon" /> 

Using the above code, we dynamically change the icon in the list, which shows different elements. The icon depends on the property of the item in the list.