किसी MvxListView

Question

में चयनित आइटम को हाइलाइट करने के लिए कैसे करें, मैं MvxListView में कोई आइटम कैसे रख सकता हूं, जब तक कि इसे अचयनित नहीं किया जाता है या जब तक कोई अन्य आइटम नहीं चुना जाता है?

मेरे प्रोग्राम में MvxListView है जो वस्तुओं की एक सूची को सही ढंग से प्रदर्शित करता है। उपयोगकर्ता इसे क्लिक करके एक आइटम का चयन कर सकते हैं, और उसके बाद एक सहेजें बटन क्लिक करें। चयनित आइटम MyChosenItem में संग्रहीत किया जाता है जब तक कि इसे सहेजें बटन कोड द्वारा आवश्यक न हो। वर्तमान में, चयनित आइटम अचयनित रंग पर लौटने से पहले एक विभाजित दूसरे के लिए हाइलाइट रहता है।

यह 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 को संबद्ध दृश्य मॉडल में जोड़ता है। MyItemsItem का संग्रह है, और MyChosenItem केवल एक ही Item है। मैंने isItemSelected से Item जोड़ा। 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"); 
        } 
       } 
   } 
   

   नोट: Item वर्ग MvxViewModel ताकि RaisePropertyChange() कहा जा सकता है प्रदान करता है। यह my_item_layout.xaml को उस संपत्ति में परिवर्तन होने पर अधिसूचित करने की अनुमति देता है।

2. MvxListView के SelectedItem से जुड़ी संपत्ति से isItemSelected के प्रत्येक उदाहरण को अद्यतन करें। इस मामले में, संबंधित दृश्य मॉडल में 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 कुछ वाकई दिलचस्प दृश्यों के लिए कस्टम नियंत्रण में भी पारित किया जा सकता है। मेरा नया 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"> 
   
       <!-- 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> 
   

---

संपादित

यह बजाय हाइलाइट किए गए कार्रवाई ट्रिगर जब SelectedItem सेट किया गया है की एक MvxCommand उपयोग करने के लिए बेहतर हो सकता है। ऐसा लगता है कि SelectedItem केवल तभी सेट किया गया है जब यह पहले से ही नहीं चुना गया है। किसी आइटम को टैप करने से इसका चयन होगा। किसी अन्य आइटम को टैप करने से चयन बदल जाएगा। उसी आइटम को फिर से टैप करना इसे अचयनित नहीं करेगा।इसका मतलब है कि एक बार आइटम का चयन करने के बाद, एक आइटम चयनित रहना चाहिए। आप सूची में सभी आइटम का चयन रद्द करने की क्षमता की जरूरत है, मूल निर्देशों के इन संशोधनों का पालन करें:

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()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 की MvxCommand में ItemClick के लेआउट परिभाषा:

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