How to wire up MvxRecyclerView Item's actions to ViewModel - xamarin

Question

I have a MvxRecyclerView which has the following axml file:
<?xml version="1.0" encoding="utf-8"?>
<MvvmCross.Droid.Support.V7.RecyclerView.MvxRecyclerView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:MvxItemTemplate="#layout/item_detail"
app:MvxBind="ItemsSource Items" />
Correspodning ViewModel is defined like this:
public class ItemsViewModel : MvxViewModel
{
private ObservableCollection<Models.Item> _items;
public ObservableCollection<Models.Item> Items
{
get { return _items; }
set
{
_items = value;
RaisePropertyChanged(() => Items);
}
}
public MvxCommand CommandToBeInvokedFromItem
{
get
{
return new MvxCommand(async () =>
{
await ...;
});
}
}
...
}
My item_detail axml is defined like this:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:local="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="24dp"
local:MvxBind="Text Name" />
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_delete_forever_black_24dp"
local:MvxBind="Click CommandToBeInvokedFromItem"/>
</LinearLayout>
And Model.Item is defined like this:
public class Item
{
public string Name { get; set; }
}
First TextView binds to Item's name property which works great. But I want the ImageButton to bind to a Command on the ViewModel to which MvxRecylerView is bound rather than to a property of the Item. Item is just a Model and not a ViewModel. How do I accomplish that?

Answer 1

If you need the command to be called on the click of an item in the MvxRecycler (i.e. the entire cell), the binding is relatively simple. Just change the value of MvxBind on the MvxRecyclerView from ItemsSource Items to ItemsSource Items; ItemClick CommandToBeInvokedFromItem. CommandToBeInvokedFromItem would then need to be modified to accept Item as a type parameter, which would look like this:
public MvxCommand<Models.Item> CommandToBeInvokedFromItem
{
get
{
return new MvxCommand<Models.Item>(async () =>
{
await ...;
});
}
}
If the command needs to be raised specifically by clicking on the ImageButton, then the easiest method would be to move CommandToBeInvokedFromItem to Item, and to have Item inherit MvxViewModel, or at least implement INotifyPropertyChanged.

Answer 2

Hand the command over to the Item when you create it in yourItemsViewModel.
public class Item
{
public string Name { get; set; }
public MvxCommand CommandToBeInvokedFromItem {get;}
public Item(MvxCommand clickCommand)
{
CommandToBeInvokedFromItem = clickCommand;
}
}