Binding to Path ImageView in MvvmCross for MonoDroid/Android

Question

In my case path "MyZooSnap.Core;component/Resources/Images/i.jpg" . How to convert path for Android ImageView ? In order to use it in the following binding:

{'AssetImagePath':{'Path':'ImagePath'}}

More here

similar questions

Thanks

Answer 1

Quick answer:

• if your Android image file is stored in assets/images/i1.png
• then make sure it is marked as an AndroidAsset
• then your path needs to be images/i1.png

---

Longer answer:

Ideally your ViewModel should be platform independent and not know about View concerns.

So your ViewModel might perhaps expose a property like:

 private GameState _state;
 public GameState State 
 { 
     get { return _state; }
     set { _state = value; RaisePropertyChanged(() => State); }
 }

where GameState is an enumeration like:

 public enum GameState
 {
     Stopped,
     Running,
     Paused,
     GameOver
 }

you might then have images representing these states in an assets structure like:

/assets/gamestates/stopped.png
/assets/gamestates/running.png
/assets/gamestates/paused.png
/assets/gamestates/gameover.png

where each of those files is marked with BuildAction of AndroidAsset.

To then display the correct image in the UI, you would need a value converter like:

public class GameStateConverter
    : MvxBaseValueConverter
{
    public override object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        return string.Format("gamestates/{0}.png", ((GameState)value).ToString().ToLower());
    }
}

mapped in using a Converters wrapper like:

public class Converters
{
    public readonly GameStateConverter GameState = new GameStateConverter();
}

which is configured in setup.cs using:

    protected override IEnumerable<Type> ValueConverterHolders
    {
        get { return new[] { typeof(Converters) }; }
    }

With this in place, then your axml binding statement would be:

    {'AssetImagePath':{'Path':'State', 'Converter':'GameState'}}

---

For an alternative approach using resources instead of assets, see MvxButtonIconBinding in Іssue with binding to GridLayout to Android

Answer 2

I could not fix the problem. My MainViewModel.cs

public class MainMenuViewModel
    : MvxViewModel
{
    private const string path = "myimage";

    public List<SquareModel> Items { get; set; }

    public IMvxCommand ShowItemCommand
    {
        get
        {
            return new MvxRelayCommand<Type>((type) => this.RequestNavigate(typeof(MainMenuViewModel)));
        }
    }

    public MainMenuViewModel()
    {
        Items = GetCollection();
    }

    public List<SquareModel> GetCollection()
    {
        List<SquareModel> col = new List<SquareModel>();
        for (int i = 0; i < 20; i++)
        {
            col.Add(new SquareModel { ID = i, PathImage = path });
        }
        return col;
    }
}

My Converts.cs

public class Converters
{
    public readonly PathImageConverter GameImage = new PathImageConverter();
}

My PathImageConverter.cs

public class PathImageConverter
    : MvxBaseValueConverter
{
    public override object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        return string.Format("squareresources/{0}.png", value.ToString().ToLower());
    }
}

My Setup.cs

public class Setup
    : MvxBaseAndroidBindingSetup
{
    public Setup(Context applicationContext)
        : base(applicationContext)
    {
    }

    protected override MvxApplication CreateApp()
    {
        return new App();
    }

    protected override IEnumerable<Type> ValueConverterHolders
    {
        get { return new[] { typeof(Converters.Converters) }; }
    }
}

My GameView.axml

<cirrious.mvvmcross.binding.android.views.MvxBindableGridView
                  xmlns:android="http://schemas.android.com/apk/res/android"
                  xmlns:local="http://schemas.android.com/apk/res/MyZooSnap.UI"
                  android:layout_width="fill_parent"
                  android:layout_height="fill_parent"
                  android:numColumns="4"
                  android:verticalSpacing="10dp"
                  android:horizontalSpacing="10dp"
                  android:gravity="center"
                  local:MvxItemTemplate="@layout/itemimage"
                  local:MvxBind="{'ItemsSource':{'Path':'Items'}}" />

My ItemImage.axml

<ImageView
  xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:local="http://schemas.android.com/apk/res/MyZooSnap.UI"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent"
  android:padding="10dp"
  local:MvxBind="{'AssetImagePath':{'Path':'PathImage', 'Converter':'GameImage'}}"

/>

My UI project :

Answer 3

When the image is placed in the folder Assets and indicates simply indicate the name of the picture - it works. And when it create another folder and specify the path:

/asset/folder/image.png
asset/folder/image.png
/folder/image.png
folder/image.png

Does not work!

Answer 4

<Mvx.MvxImageView
    android:layout_width="40dp"
    android:layout_height="40dp"
    local:MvxBind="AssetImagePath PathImage,Converter=GameImage" />

Should work also