how to bind an image src to resource drawable image with Mvvmcross? - xamarin.android

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

Answer 1

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

Answer 2

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.
You can write you own custom binding
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

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

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.