MvxItemTemplate ItemClick Binding - xamarin.android

Question

I have the following binding on a MvxListView
<Mvx.MvxListView
android:id="#+id/listGroups"
android:layout_height="fill_parent"
android:layout_width="fill_parent"
android:layout_below="#+id/layoutGroupPadder"
android:dividerHeight="7dp"
android:divider="#drawable/list_divider"
local:MvxItemTemplate="#layout/list_group"
local:MvxBind="ItemsSource AvailableGroups; ItemClick GroupSelectedCommand" />
The MvxItemTemplate is as follows
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:local="http://schemas.android.com/apk/res/xxxx.xxxx"
android:orientation="horizontal"
android:background="#color/white"
android:layout_width="fill_parent"
android:layout_height="63dp">
<TextView
android:id="#+id/groupsGroupName"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:textSize="18dp"
android:gravity="center"
android:layout_margin="7dp"
android:textColor="#color/verydarknavy"
local:MvxBind="Text Name" />
<RelativeLayout
android:id="#+id/layoutGroupGroupCount"
android:orientation="horizontal"
android:layout_width="90dp"
android:layout_height="fill_parent"
android:layout_centerInParent="true">
<TextView
android:id="#+id/groupsSubGroupCount"
android:layout_width="50dp"
android:layout_height="fill_parent"
android:textSize="16dp"
android:gravity="center"
android:layout_margin="7dp"
android:textColor="#color/hblue"
android:layout_toLeftOf="#+id/imageArrowGrp"
local:MvxBind="Text SubGroupCount" />
<ImageView
android:src="#drawable/YellowArrowRight"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_margin="7dp"
android:layout_alignParentRight="true"
android:id="#+id/imageArrowGrp" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/layoutGroupItemCount"
android:orientation="horizontal"
android:layout_width="90dp"
android:layout_height="fill_parent"
android:layout_marginRight="14dp"
android:layout_alignParentRight="true"
android:fitsSystemWindows="false">
<TextView
android:id="#+id/groupsVehicleCount"
android:layout_width="50dp"
android:layout_height="fill_parent"
android:textSize="16dp"
android:gravity="center"
android:layout_margin="7dp"
android:textColor="#color/hblue"
android:layout_toLeftOf="#+id/imageArrowItem"
local:MvxBind="Text VehicleCount" />
<ImageView
android:src="#drawable/YellowArrowRight"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentRight="true"
android:layout_margin="7dp"
android:id="#+id/imageArrowItem" />
</RelativeLayout>
</RelativeLayout>
When the ItemClick happens the GroupSelectedCommand fires correctly :)
However I want to fire 2 different commands depending where within the item the user touches. I need to distinguish which of the TexViews have been touched (SubGroupCount or VehicleCount)
I tried changing the binding in the MvxListView to be
local:MvxBind="ItemsSource AvailableGroups" />
and changed the binding with the MvxItemTemplate to be
local:MvxBind="Text SubGroupCount; ItemClick GroupSelectedCommand " />
and
local:MvxBind="Text VehicleCount; ItemClick ItemSelectedCommand " />
and I created the necessary handling for the command ItemSelectedCommand.
Unfortunately it didn't fire either command.
Is it possible to fire separate commands from one template, and if so how do I bind them to different controls within the MvxItemTemplate?

Answer 1

To accomplish this you need to have two separate commands that are bound to the view inside the row.
Add this to both of the relative layouts that you want to have separate clicks:
local:MvxBind="Click OpenFirstCommand"
Now you need to have access to the viewmodel the list is bound to instead of the Viewmodel of the row itself. There are multiple approaches you can take there to fix that.
Wrap the RowViewmodel into a Wrapper Item. For more detail see this: Binding button click in ListView template MvvMCross
Use a value converter to wrap the Row into a wrapper item. More info on that one: How to binding list item to whether it is contained in another collection
I would personally go for the converter, because it keeps your code more clean. The converter could look like:
public class ListWrapperValueConverter : MvxValueConverter
{
public override object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
IEnumerable items = value as IEnumerable;
IList<CellWrapperViewModel<Item>> cellWrapperItems = items.OfType<Item>().Select(x => new CellWrapperViewModel<Item>(x, (BaseViewModel)parameter)).ToList();
ObservableCollection<CellWrapperViewModel<Item>> itemsList = new ObservableCollection<CellWrapperViewModel<Item>> (cellWrapperItems);
// If the old collection was observable, forward the triggers, happening on the old one to the new collection.
if (value as ObservableCollection<Item> != null) {
ObservableCollection<Item> documents = value as ObservableCollection<Item>;
documents.CollectionChanged += (object sender, System.Collections.Specialized.NotifyCollectionChangedEventArgs e) => {
switch (e.Action) {
default:
itemsList.SwitchTo (documents.Select (x => new CellWrapperViewModel<Item> (x, (BaseViewModel)parameter)).ToList ());
break;
}
};
}
return itemsList;
}
}
The Wrapper would be:
public class CellWrapperViewModel<T>
{
public T Item { get; set; }
public BaseViewModel ViewModel { get; set; }
public CellWrapperViewModel(T item, BaseViewModel viewModel)
{
Item = item;
ViewModel = viewModel;
}
}
Your MvxListView binding would then be:
local:MvxBind="ItemsSource ListWrapper(Items, .)"
Your converter for the commands inside the row:
public class OpenFirstCommandValueConverter : MvxValueConverter<CellWrapperViewModel<Item>, MvxCommand>
{
protected override MvxCommand Convert(CellWrapperViewModel<Item> value, Type targetType, object parameter, CultureInfo culture)
{
BaseViewModel viewModel = value.ViewModel;
Item item = value.Item;
return new MvxCommand(() => { viewModel.OptionCommand.Execute((Item)item); });
}
}
If you've done that the binding for the layouts would change to something like this:
local:MvxBind="Click OpenFirstCommand(.)"
local:MvxBind="Click OpenSecondCommand(.)"
More information on this issue is also on the mvvmcross GitHub: https://github.com/MvvmCross/MvvmCross/issues/35