How to select a selected item in an MvxListView

Question

How to save an element in MvxListView selected until it is selected or until another element is selected?

My program has an MvxListView that correctly displays a list of items. The user can select an item by clicking it, and then click the "Save" button. The selected item is stored in MyChosenItem until the save button code needs it. Currently, the selected item remains flare for a second of a second before returning to an unselected color.

This creates the 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" /> 

This is 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

This method provides an easy way to configure which items remain selected. I settled on this because it gives me full control over what is highlighted and how it is displayed in the list. (This example only highlights one item, but it can be easily expanded to select more.)

• The MvxListView in the original question refers to MyItems and MyChosenItem in the associated view model. MyItems is a collection of Item , and MyChosenItem is just one Item . I added isItemSelected to Item . The Item class is as follows:

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

  Note. The Item class extends MvxViewModel so that RaisePropertyChange() can be called. This allows you to notify my_item_layout.xaml when this property changes.

• Update each instance of isItemSelected from the property to which the MvxListView SelectedItem is bound. In this case, this is the MyChosenItem property in the associated view model. Here's what the new code looks like:

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

  It would be pretty easy to change UpdateItemSelections() to whatever selection behavior you want.

• Make each row something based on the isItemSelected property. I just changed the background color by controlling the visibility property of the view. However, all kinds of things are possible. isItemSelected can even be passed to a user control for some really interesting visual effects. My new Layout/my_item_layout.xaml as follows:

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

It is better to use MvxCommand instead of launching the highlighted action when SelectedItem installed. It seems that SelectedItem is only set if it is not already selected. When selecting an item, select it. Clicking another item will change the selection. Pressing the same item again will not cancel it. This means that after selecting an item, one item must remain selected. If you need the ability to deselect all items in the list, perform the following changes in the original instructions:

• Add MvxCommand to the view model. Call UpdateItemSelections() from MvxCommand instead of MyChosenItem .

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

• Modify UpdateItemSelections() to toggle the isItemSelected property instead of always setting it to true:

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

• Remember to check MyChosenItem.isItemSelected == true when saving or performing actions that affect the selected item in the list. MyChosenItem may have a value that is not selected in the list that the user sees.

• Bind MvxCommand to ItemClick in the MvxListView layout 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; ItemClick ItemSelectedCommand" local:MvxItemTemplate="@layout/my_item_layout" />