MvxListViewで選択したアイテムを強調表示する方法

Question

アイテムを選択しない限り、または別のアイテムが選択されるまで、アイテムをMvxListViewに保存するにはどうすればよいですか？

私のプログラムには、項目リストが正しく表示されるMvxListViewがあります。ユーザーは、項目をクリックして選択し、保存ボタンをクリックすることができます。選択された項目は、保存ボタンのコードによって必要とされるまでMyChosenItemに格納されます。現在、選択した項目は、選択されていない色に戻る前に1秒間ハイライトを維持します。

これはMvxListViewの作成方法です：

<Mvx.MvxListView 
    android:layout_width="match_parent" 
    android:layout_height="260dp" 
    android:layout_marginTop="40dp" 
    android:id="@+id/MyMvxListViewControl" 
    local:MvxBind="ItemsSource MyItems; SelectedItem MyChosenItem" 
    local:MvxItemTemplate="@layout/my_item_layout" /> 

これはLayout/my_item_layout.xamlです：

<?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/Project.Ui.Droid" 
    android:orientation="horizontal" 
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content"> 
    <TextView 
     android:layout_width="300.0dp" 
     android:layout_height="wrap_content" 
     android:padding="5dp" 
     android:textSize="20dp" 
     android:textColor="#000000" 
     local:MvxBind="Text Field1" /> 
    <TextView 
     android:layout_width="250.0dp" 
     android:layout_height="wrap_content" 
     android:padding="5dp" 
     android:textSize="20dp" 
     android:textColor="#000000" 
     local:MvxBind="Text Field2" /> 
</LinearLayout> 

Answer 1

この方法では、ハイライト表示されたままその項目をカスタマイズするための簡単な方法を提供します。私は強調表示されているものとリストにどのように表示されているのかを完全に制御できるので、これを解決しました。 （この例では、一つだけのアイテムを強調示し、容易に、より強調するために拡張することができる。）

1. MvxListViewは、元の質問では、関連するビューモデルにMyItemsとMyChosenItemにリンクします。 MyItemsはItemのコレクションであり、MyChosenItemは単なるItemです。私はisItemSelectedをItemに追加しました。

   public class Item : MvxViewModel   
   { 
       private string _field1; 
       private string _field2; 
       private bool _isItemSelected = false; 
   
       public string Field1 
       { 
        get { return _field1; } 
        set 
        { 
         _field1= value; 
         RaisePropertyChanged("Field1"); 
        } 
       } 
   
       public string Field2 
       { 
        get { return _field2; } 
        set 
        { 
         _field2= value; 
         RaisePropertyChanged("Field2"); 
        } 
       } 
   
       public bool isItemSelected 
       { 
        get { return _isItemSelected; } 
        set 
        { 
         _isItemSelected = value; 
         RaisePropertyChanged("isItemSelected"); 
        } 
       } 
   } 
   

   注：RaisePropertyChange()を呼び出すことができるようにItemクラスがMvxViewModel拡張Itemクラスには、次のようになります。これにより、そのプロパティが変更されたときにmy_item_layout.xamlに通知することができます。

2. isItemSelectedの各インスタンスを、MvxListViewのSelectedItemがバインドするプロパティから更新します。この場合、関連付けられているビューモデルのプロパティはMyChosenItemです。これは、新しいコードは次のようになります。

   public Item MyChosenItem 
   { 
       get { return _myChosenItem; } 
       set 
       { 
        if (_myChosenItem != value) 
        { 
         _myChosenItem = value; 
         UpdateItemSelections(); 
         RaisePropertyChanged("MyChosenItem"); 
        } 
       } 
   } 
   
   // Select MyChosenItem and unselect all other items 
   private void UpdateItemSelections() 
   { 
       if(MyItems.Count > 0) 
       { 
        for (int index = 0; index < MyItems.Count; index++) 
        { 
         // If the chosen item is the same, mark it as selected 
         if (MyItems[index].Field1.Equals(MyChosenItem.Field1) 
          && MyItems[index].Field2.Equals(MyChosenItem.Field2)) 
         { 
          MyItems[index].isItemSelected = true; 
         } 
         else 
         { 
          // Only trigger the property changed event if it needs to change 
          if (MyItems[index].isItemSelected) 
          { 
           MyItems[index].isItemSelected = false; 
          } 
         } 
        } 
       } 
   } 
   

   あなたが望む任意の選択動作にUpdateItemSelections()を変更するのは簡単だろう。

3. 各行は、isItemSelectedプロパティに基づいて何かを実行します。ビューの可視性プロパティを制御して、背景色を変更しました。しかし、あらゆることが可能です。 isItemSelectedは、本当に興味深いビジュアルのカスタムコントロールに渡すことさえできます。

   <?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/Project.Ui.Droid" 
       android:orientation="horizontal" 
       android:layout_width="fill_parent" 
       android:layout_height="wrap_content"> 
   
       <!-- SELECTED BACKGROUND COLOR --> 
       <View 
        android:layout_width="fill_parent" 
        android:layout_height="fill_parent" 
        android:background="#FF0000" 
        local:MvxBind="Visibility isItemSelected,Converter=BoolToViewStates" /> 
   
       <TextView 
        android:layout_width="300.0dp" 
        android:layout_height="wrap_content" 
        android:padding="5dp" 
        android:textSize="20dp" 
        android:textColor="#000000" 
        local:MvxBind="Text Field1" /> 
       <TextView 
        android:layout_width="250.0dp" 
        android:layout_height="wrap_content" 
        android:padding="5dp" 
        android:textSize="20dp" 
        android:textColor="#000000" 
        local:MvxBind="Text Field2" /> 
   </LinearLayout> 
   

---

EDIT

SelectedItemが設定されているときにハイライト表示され、アクションをトリガーするのではなく、MvxCommandを使用する方がよいかもしれません：私の新しいLayout/my_item_layout.xamlはこのようになります。 SelectedItemはまだ選択されていない場合にのみ設定されているようです。項目をタップすると項目が選択されます。別の項目をタップすると選択が変更されます。同じ商品を再度タップすると、でなく、は選択解除されます。つまり、アイテムが選択されると、1つのアイテムが選択されたままでなければなりません。あなたは、リスト内のすべての項目の選択を解除する機能が必要な場合は、元説明書にこれらの変更は、次のとおりです。

1. は、ビューモデルにMvxCommandを追加します。 MyChosenItemの代わりにMvxCommandからUpdateItemSelections()を呼び出してください。

   public MvxCommand ItemSelectedCommand { get; private set; } 
   
   // Constructor 
   public ItemSelectionViewModel() 
   { 
       ItemSelectedCommand = new MvxCommand(OnItemSelected); 
   } 
   
   public Item MyChosenItem 
   { 
       get { return _myChosenItem; } 
       set 
       { 
        if (_myChosenItem != value) 
        { 
         _myChosenItem = value; 
         //UpdateItemSelections(); // Move this to OnItemSelected() 
         RaisePropertyChanged("MyChosenItem"); 
        } 
       } 
   } 
   
   private void OnItemSelected() 
   { 
       UpdateItemSelections(); 
   } 
   

2. 変更UpdateItemSelections()は常にtrueに設定するのではなく、isItemSelectedプロパティを切り替えます：

   // Select MyChosenItem and unselect all other items 
   private void UpdateItemSelections() 
   { 
       if(MyItems.Count > 0) 
       { 
        for (int index = 0; index < MyItems.Count; index++) 
        { 
         // If the chosen item is the same, mark it as selected 
         if (MyItems[index].Field1.Equals(MyChosenItem.Field1) 
          && MyItems[index].Field2.Equals(MyChosenItem.Field2)) 
         { 
          // Toggle selected status 
          MyItems[index].isItemSelected = !MyItems[index].isItemSelected; 
         } 
         else 
         { 
          // Only trigger the property changed event if it needs to change 
          if (MyItems[index].isItemSelected) 
          { 
           MyItems[index].isItemSelected = false; 
          } 
         } 
        } 
       } 
   } 
   

3. を保存したり、リスト内の選択した項目に作用何もしていたときにMyChosenItem.isItemSelected == trueをチェックすることを忘れないでください。ユーザーに表示されるリストビューで選択されていない値がMyChosenItemにある可能性があります。

4. バインドMvxListViewのレイアウト定義でItemClickからMvxCommand：

   <Mvx.MvxListView 
       android:layout_width="match_parent" 
       android:layout_height="260dp" 
       android:layout_marginTop="40dp" 
       android:id="@+id/MyMvxListViewControl" 
       local:MvxBind="ItemsSource MyItems; SelectedItem MyChosenItem; ItemClick ItemSelectedCommand" 
       local:MvxItemTemplate="@layout/my_item_layout" />