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, it first displays the said image : ImgMsg_Normal.

1) How to change the image dynamically by passing image filename: ImgMsg_Grey in Local : MvxBind above?

Thanks

Joehl Joehl · Accepted Answer · 2015-08-19T08:35:58

We do that with a converter. So the binding is on a (for example) boolean value. If its true the converter returns the image 1 and if the value is false, he returns the image 2.

The Converter (in the 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" />

With above code we change the icon dynamically in a list who shows different items. The icon depends on a property of the item in the list.

How to dynamically change image in MvvmCross

1 Answers