MvxItemTemplate ItemClick Связывание

Question

У меня есть следующие связывания на 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" /> 

MvxItemTemplate выглядит следующим образом

<?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> 

Когда ItemClick происходит в GroupSelectedCommand пожаров правильно :)

Однако я хочу для запуска двух разных команд в зависимости от того, где внутри элемента, который касается пользователь. Мне нужно, чтобы определить, какой из TexViews были затронуты (SubGroupCount или VehicleCount)

Я попытался изменить связывание в MvxListView быть

local:MvxBind="ItemsSource AvailableGroups" /> 

и изменил связывание с MvxItemTemplate быть

local:MvxBind="Text SubGroupCount; ItemClick GroupSelectedCommand " /> 

и

local:MvxBind="Text VehicleCount; ItemClick ItemSelectedCommand " /> 

и я создал necess ary для команды ItemSelectedCommand.

К сожалению, это не сработало ни одной из команд.

Можно ли разблокировать отдельные команды из одного шаблона, и если да, то как связать их с разными элементами управления в MvxItemTemplate?

Answer 1

Для этого вам необходимо иметь две отдельные команды, связанные с представлением внутри строки.

Добавьте к этому и относительных расположений, которые вы хотите иметь отдельные щелчки:

local:MvxBind="Click OpenFirstCommand" 

Теперь вы должны иметь доступ к ViewModel список привязан к вместо ViewModel самой строки. Есть несколько подходов, которые вы можете предпринять, чтобы исправить это.

1. Оберните модель RowView в предмет обертки. Для получения более подробной информации см. Это: Binding button click in ListView template MvvMCross

2. Используйте конвертер значений, чтобы обернуть строку в элемент обертки. Более подробная информация о том, что один: How to binding list item to whether it is contained in another collection

Я бы лично пойти на конвертер, потому что он держит ваш код более чистым.Преобразователь может выглядеть следующим образом:

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; 
      } 
     } 

обертка будет:

public class CellWrapperViewModel<T> 
{ 
    public T Item { get; set; } 

    public BaseViewModel ViewModel { get; set; } 

    public CellWrapperViewModel(T item, BaseViewModel viewModel) 
    { 
     Item = item; 
     ViewModel = viewModel; 
    } 
} 

Вашего MvxListView связывание бы тогда:

local:MvxBind="ItemsSource ListWrapper(Items, .)" 

Ваш конвертер для команд внутри строки:

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); }); 
     } 
    } 

Если y ou've сделано, что привязка для макетов изменится на что-то вроде этого:

local:MvxBind="Click OpenFirstCommand(.)" 
local:MvxBind="Click OpenSecondCommand(.)" 

Более подробная информация по этому вопросу также на mvvmcross GitHub: https://github.com/MvvmCross/MvvmCross/issues/35