Seçilen öğenin bir MvxListView öğesinde vurgulanması

Question

Bir öğeyi, seçili olmayana veya başka bir öğe seçilene kadar vurgulanan bir MvxListView içinde nasıl saklayabilirim?

Programım, öğelerin bir listesini doğru olarak görüntüleyen bir MvxListView vardır. Kullanıcı, bir öğeyi tıklayıp, ardından bir kaydetme düğmesine tıklayabilir. Seçilen öğe, kaydetme düğmesi kodu gerekene kadar MyChosenItem'da saklanır. Şu anda seçili öğe, seçili olmayan renge dönmeden önce ayrık saniye için öne çıkar.

Bu

MvxListView böyle ortaya çıkıyor:

<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" /> 

Bu Layout/my_item_layout.xaml geçerli:

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

Bu yöntem öğeler vurgulanır kaldığı özelleştirmek için kolay bir yol sağlar. Buna yerleştim çünkü bana neyin vurgulandığı ve listede nasıl görüntülendiğini tam olarak kontrol ediyor. (Bu örnek yalnızca bir öğe vurgulayarak gösterir, ancak kolayca daha fazla vurgulamak için genişletilebilir.)

1. MvxListView, orijinal söz konusu, ilgili görünümdür modelinde MyItems ve MyChosenItem bağlantılar. MyItems, Item topluluğudur ve MyChosenItem yalnızca tek bir Item'dir. isItemSelected'u Item'a ekledim. Item sınıfı şimdi şöyle görünür:

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

   Not: Item sınıf böylece RaisePropertyChange() çağrılabilir MvxViewModel uzanır. Bu özellik değiştiğinde my_item_layout.xaml bildirilmesini sağlar.

2. Her bir isItemSelected örneğini, MvxListView'ün SelectedItem bağlandığı özellikten güncelleyin. Bu durumda, ilgili görünüm modelindeki MyChosenItem özelliği. Kanalları istediğiniz seçim davranışına UpdateItemSelections() değiştirmek çok kolay olurdu

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

   : Bu gibi yeni kod görüntüsü.

3. Her satırın, isItemSelected özelliğine göre bir şeyler yapmasını sağlayın. Bir görüşün görünürlük özelliğini kontrol ederek arka plan rengini değiştirdim. Ancak, her türlü şey mümkündür. Bazı gerçekten ilginç görseller için isItemSelected özel bir kontrole bile geçebilir. Benim yeni Layout/my_item_layout.xaml şöyle görünür:

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

---

DÜZENLEME

yerine SelectedItem ayarlandığında vurgulanan eylemden tetikleme bir MvxCommand kullanmak daha iyi olabilir. SelectedItem sadece seçilmiş değilse ayarlanmış gibi görünüyor. Bir öğeye dokunmak onu seçer. Başka bir öğeye dokunmak seçimi değiştirir. Aynı öğeye tekrar dokunulduğunda, işaretini kaldırın.Bu, bir öğe seçildiğinde, bir öğenin seçili kalması gerektiği anlamına gelir. Eğer listedeki tüm öğeleri seçimini kaldırmak için yeteneği gerekiyorsa, orijinal talimatlara bu değişiklikleri izleyin:

1. görünümü modeline bir MvxCommand ekleyin. MyChosenItem yerine 'u MvxCommand'dan arayın.

   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. Değişim UpdateItemSelections() her zaman doğru bunu ayarlamak yerine isItemSelected özelliğini geçiş yapmak için:

   // 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. kaydetme veya listede seçili öğeye davranan bir şey yaparken MyChosenItem.isItemSelected == true kontrol etmeyi unutmayın. Kullanıcının gördüğü liste görünümünde seçilmemiş olan MyChosenItem'da bir değer olabilir.

4. Bind MvxListView arasında MvxCommand yılında ItemClick için düzen tanımı:

   <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" />