how to bind an image src to resource drawable image with Mvvmcross?

Question

I'm trying to bind an image's src.

I have tried using MvxHttpImageView like this

<Mvx.MvxHttpImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/iconeView"
                local:MvxBind="{'ImageUrl':{'Path':'ImgSrc'}}" />

with

public string ImgSrc
{
    get {return "@res/drawable/icon.png"; }
}

I have tried several other ImgSrc and still don't have any result.

icon.png is in my Resources/Drawable directory and is an AndroidResource

any help will be great ! Thanks

Thiol

Answer 1

The mvxhttpimageview knows how to load images from http and from 'disk'

Sadly, it doesn't know how to load from resources

However, there are ways to get an image to load static content.

1. You can write you own custom binding
2. You can use the standard imageview, images stored in android assets and the 'AssetImagePath' binding built into mvx.

To try the first, take a look at the conference sample - at how the favorite button background is bound to IsFavorite

To do the second:

• include the icons in the asset folder - e.g. /assets/icon1.png
• make sure the build action is set to AndroidAsset
• in the XML use a standard ImageView and binding text like {'AssetImagePath':{'Path':'WhichAsset'}}

In real use, I generally also use a converter - something that maps a viewmodel property like State with a value of LoadingState.Loading to an asset image path like '/loadingimages/loading.png'

---

You can see the code for the asset binding in https://github.com/slodge/MvvmCross/blob/master/Cirrious/Cirrious.MvvmCross.Binding/Android/Target/MvxImageViewDrawableTargetBinding.cs

---

Sorry answer doesn't include more code - answering on mobile

Agrestic

thanks, works like a charm with asset and AssetImagePath. Just in case it helps anybody, /assets/ must not be included in image path. public string ImgSrc { get {return "icon.png"; } } – Thiol

Answer 2

Newer versions of MvvmCross support binding to a drawable resources. Using the DrawableName binding you can bind an ImageView to a property on your viewmodel that contains a drawable name.

using System;
using Cirrious.MvvmCross.ViewModels;

namespace MyApp.ViewModels
{
    public class UserProfileViewModel : MvxViewModel
    {    
            // set this to the name of one of the files
            // in your Resources/drawable/drawable-xxxx folders
        private MyDrawable _myDrawable;
        public string MyDrawable { 
            get { return _myDrawable; }
            set {
                _myDrawable = value;
                RaisePropertyChanged (() => MyDrawable);
            }
        }
    }
}

And in your layout

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        local:MvxBind="DrawableName MyDrawable"/>

Alternatively, you could use the Drawable binding if your VM property is an int

Trimming

Keep in mind, _myDrawable should not contain capital letters even if the file name does. – Myungmyxedema

Would you please update these broken links? Thanks in advance! – Loblolly

Answer 3

I built a converter, which converts a drawable name to a Bitmap and bound the Bitmap to the ImageView.

The converter:

public class ImageNameToBitmapConverter : MvxValueConverter<string, Bitmap>
{
    protected override Bitmap Convert(string value, Type targetType, object parameter, CultureInfo culture)
    {

        var topActivity = Mvx.Resolve<IMvxAndroidCurrentTopActivity>();

        var bm = BitmapFactory.DecodeResource(topActivity.Activity.Resources, GetResourceId(value, "drawable", topActivity));

        return bm;
    }

    private static int GetResourceId(string variableName, string resourceName, IMvxAndroidCurrentTopActivity topActivity)
    {
        try
        {
            return topActivity.Activity.Resources.GetIdentifier(variableName, resourceName, topActivity.Activity.PackageName);
        }
        catch (Exception)
        {
            return -1;
        }
    }
}

The XML view:

<ImageView
    local:MvxBind="Bitmap Icon, Converter=ImageNameToBitmap"
    android:layout_width="100dp"
    android:layout_height="100dp" />

The Icon property I'm binding is a string like: "icon_name" where I put the image icon_name.png in the Android project's Resources/drawable

Wily

Nevermind my answer. @Trimming 's solution is cleaner :P – Wily

I like your solution, because you can set the image from the pcl! I had some problems with your GetResourceId. The return value is always 0. My solution for that is using reflection: return (int) typeof(Resource.Drawable).GetField(value).GetValue(null); – Lyall

Answer 4

For latest MvvmCross next solution is actual:

In markup:

<ImageView
    android:id="@+id/iconImage"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="10dp"
    android:layout_centerVertical="true"
    local:MvxBind="DrawableName Type, Converter=TypeToImageStringConverter" />

In converter:

public class TypeToImageStringConverter : MvxValueConverter<VacationType, int>
{
    protected override int Convert(VacationType value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        switch (value)
        {
            case VacationType.RegularVacation:
                return Resource.Drawable.Icon_Request_Green;
            case VacationType.SickLeave:
                return Resource.Drawable.Icon_Request_Blue;
            case VacationType.LeaveWithoutPay:
                return Resource.Drawable.Icon_Request_Dark;
            case VacationType.OvertimeVacation:
                return Resource.Drawable.Icon_Request_Gray;
            case VacationType.ExceptionalLeave:
                return Resource.Drawable.Icon_Request_Plum;
            default:
                return Resource.Drawable.Icon_Request_Gray;
        }
    }
}

All sense is that you just must give out a drawable resource id.

Rang