हम LongListSelector में डेटा वर्चुअलाइजेशन करते हैं

नमस्ते।

WP8 प्लेटफ़ॉर्म पर लंबी सूची वर्चुअलाइजेशन कैसे करें, इस विवरण के बारे में मेरी पूरी तरह से अनुपस्थिति से इस पोस्ट को संकेत दिया गया था। यहां विंडोज 8 dektopnoy में इस्तेमाल किए गए तरीके काम नहीं करते हैं। उदाहरण के लिए, एक ही ISupportIncrementalLading बस WP8 पर उपलब्ध नहीं है।

और जब से मैं (एक प्रबंधक के रूप में अपने खाली समय में) एक आवेदन करता हूं जहां इस तरह का वर्चुअलाइजेशन महत्वपूर्ण है, मैंने अपना समाधान साझा करने का फैसला किया। मुझे तुरंत कहना होगा कि मैं आदर्श होने का दिखावा नहीं करता, यह सिर्फ एक काम करने वाला विकल्प है जो आपको घंटों गुगली और परीक्षण करने से बचा सकता है।

पीएस नाउ मैंने मोनोटूच के तहत आईओएस पर स्विच किया और ऐसी कोई समस्या नहीं है, इसलिए मैंने ड्राफ्ट से लेख प्राप्त करने का फैसला किया। आप कभी नहीं जानते कि कौन उपयोगी होगा।

प्रस्तुति एक ट्यूटोरियल के रूप में होगी ताकि जो लोग अभी भी मंच और .net अनुप्रयोगों से परिचित नहीं हैं वे इसे खेल सकें।

मैं किस बारे में बात कर रहा हूँ

• हमारे पास एक सूची है।
• सूची में 100,500 से अधिक आइटम हैं। पूर्णता के लिए, प्रत्येक आइटम एक चित्र प्रदर्शित करता है।
• हम उन्हें प्रदर्शित करना चाहते हैं ताकि फोन मेमोरी की कमी से न मरे। और न केवल प्रदर्शित करें, बल्कि उनके साथ पूरी तरह से काम करें

इसके लिए आपको क्या करने की आवश्यकता है

XAML LongListSelector में बनाएँ

यह लॉन्गलिस्ट चयनकर्ता है जो सूचियों के विकास के लिए आधिकारिक तौर पर एमएस द्वारा अनुशंसित नियंत्रण है। अब उपयोग नहीं किए जाने के लिए लिस्टबॉक्स की अत्यधिक अनुशंसा की जाती है। खैर, हम नहीं जीत पाए।

<phone:LongListSelector Width="480" DataContext="{Binding}" Name="List_ListSelector" ItemTemplate="{StaticResource List_ListSelectorItemDataTemplate}" /> 

हमारे LongListSelector के लिए एक टेम्पलेट के साथ App.xaml में एक DataTemplate बनाएँ।

मेरे मामले में, यह केवल पाठ है जो आइटम नंबर और चित्र प्रदर्शित करता है।

 <Application.Resources> <DataTemplate x:Key="List_ListSelectorItemDataTemplate"> <StackPanel Margin="0,0,0,27" Height="400"> <TextBlock Text="{Binding Path=ID}" /> <Image Source="{Binding Path=ImageToShow}", Name="ListImage"></Image> </StackPanel> </DataTemplate> </Application.Resources> 

हम एक सहायक वर्ग बनाते हैं जो हमारी शीट, संग्रह और डेटा के लिए एक आवरण होगा। चलो इसे लॉन्गवीर्टुअलिस्ट कहते हैं।

  class LongVirtualList { public LongListSelector List; //    public ObservableCollection<BaseListElement> Collection; // ,      public DataSource DataSource;//     .   -       - .     ,   . public LongVirtualList(LongListSelector longListSelector) { this.List = longListSelector; this.Collection = new ObservableCollection<BaseListElement>(); this.DataSource = new DataSource(); this.InitializeCollection(this.DataSource); //        , maxCount   .     . this.List.ItemsSource = this.Collection; longListSelector.ItemRealized+=this.longListSelector_ItemRealized; longListSelector.ItemUnrealized+=this.longListSelector_ItemUnrealized; } private void InitializeCollection(DataSource dataSource) { for (int i = 0; i < dataSource.Count; i++) { this.Collection.Add(new ListTestElement(i)); //ListTestElement  -  BaseListElement. } } 

यह क्लास के लिए एक वर्कपीस है। यह महत्वपूर्ण है कि हम नियंत्रण के लिए एक संपूर्ण संग्रह संलग्न करें। यह सहज स्क्रॉलिंग की अनुमति देता है, तत्वों की कोई मरोड़ नहीं (गतिशील सूचियों के कुछ कार्यान्वयन भी एक छोटे संग्रह का उपयोग करते हैं और तत्वों का पुन: उपयोग करते हैं। यह हमारा विकल्प नहीं है)। खाली तत्वों के साथ एक संग्रह बहुत बड़ी मात्रा के साथ भी स्मृति समस्याओं का कारण नहीं बनता है (मैंने एक लाख की जाँच की और सब कुछ ठीक था)।

अब मजेदार हिस्सा आता है, वास्तव में, जिसके लिए मैं यह सब लिख रहा हूं।

MS ने निम्नलिखित आयोजन शुरू किए:

ItemRealized और ItemUnrealized

उनमें से पहला काम करता है जब सूची अपने आप में एक नई वस्तु को लोड करना चाहती है। जब इस आइटम को उतारना आवश्यक हो तो दूसरा चालू हो जाता है।

बहुत महत्वपूर्ण जोड़: आप इन घटनाओं के कॉल को नियंत्रित नहीं कर सकते। जब फ़ोन "महसूस" करता है तो उसे स्वचालित रूप से कॉल किया जाता है। वह इसे कैसे समझता है? कितने सूची आइटम स्क्रीन पर फिट होते हैं + थोड़ा पिछले और अगले। और यहां एक दिलचस्प नुकसान छिपा है, जो मुझे अनुभव से पता चला, उस पर कई घंटे मारे गए। यह रेंडर करने से पहले स्क्रीन पर सूची आइटम की संख्या निर्धारित करता है। एक गतिशील आकार (उदाहरण के लिए, एक चित्र) वाले तत्वों को अनदेखा किया जाता है जब तक कि आप मैन्युअल रूप से उनका आकार निर्धारित नहीं करते।

उदाहरण के लिए, यदि आप XAML में StackPanel Height = "400" को निर्दिष्ट करते हैं, तो ItemRealized इवेंट ~ 6 सूची आइटम के लिए क्रमिक रूप से उठाया जाएगा। यदि आप एक ही उदाहरण में एक ऊंचाई निर्दिष्ट नहीं करते हैं, तो बाहरी परिणाम समान होगा (यदि आप एक बड़ी तस्वीर का उपयोग करते हैं), हालांकि, इंजन पहले से ही 50 टुकड़े लोड करने की कोशिश करेगा और यह एक मेमोरी अतिप्रवाह त्रुटि को पकड़ने की संभावना है।

तो:

 public void longListSelector_ItemUnrealized(object sender, ItemRealizationEventArgs e) { BaseListElement item = (BaseListElement)e.Container.Content; if (item != null) { item.NullCache(); } } public void longListSelector_ItemRealized(object sender, Microsoft.Phone.Controls.ItemRealizationEventArgs e) { BaseListElement item = (BaseListElement)e.Container.Content; if (item != null) { if (item.Cached == false) { item.FillCache(); } } } 

स्वयं सूची आइटमों के माध्यम से जाने का समय है

सूची का आधार तत्व BaseListElement वर्ग है। आप आधार वर्ग के किसी भी वंश को उसी सूची में जोड़ सकते हैं।

 class BaseListElement : PropertyHelper // ,   PropertyChangedEventHandler   .        BaseListElement,         EventHandler.  -  BaseListElement  PropertyHelper   . { public int ID; public bool Cached; private BitmapImage imageToShow; public BitmapImage ImageToShow { get { return this.imageToShow; } set { this.imageToShow = value; NotifyChange("ImageToShow"); } } public BaseListElement(int id) { this.ID = id; this.Cached = false; } public virtual void NullCache() { this.Cached = false; if (this.ImageToShow != null) { this.ImageToShow = null; GC.Collect(); } } public virtual void FillCache() { this.Cached = true; // this.ImageToShow = DataSource.LoadImage(this.ID);     ,        // ,  BitmapImage bi = new BitmapImage(new Uri("Assets/test.jpg", UriKind.Relative)); bi.DecodePixelWidth = 400; bi.CreateOptions = BitmapCreateOptions.IgnoreImageCache; this.ImageToShow = bi; } //        ,      . public virtual async Task FillCacheAsync() { this.FillCache(); } } 

सब कुछ सोचो? कोई फर्क नहीं पड़ता कि कैसे। समान श्रेणी के कार्यान्वयन वाला कोड कुछ अपलोड की गई छवियों में मर जाएगा। ऐसा इसलिए है क्योंकि WP8 बहुत "हाई-हैंडेड" है (सही शब्द नहीं है!) डेटा के बिटमैप इमेज को एक्सेस करता है और अपने आप ही किसी पर तस्वीरें अपलोड नहीं करता है!

इसलिए, हम NullCache () और FillCache () विधियों को संशोधित करते हैं। अब उन्हें ऑपरेशन के लिए छवि नियंत्रण के लिंक की आवश्यकता होती है, जो उन्हें विधियों से पारित किया जा सकता है। इस लिंक को हम ItemUnrealized और ItemRelized विधियों के e.Container कंटेनर से प्राप्त करेंगे।

तो, सही छवि कैशिंग:

 public virtual void NullCache(Image image) { if (this.ImageToShow != null) { //   ,   . BitmapImage bitmapImage = image.Source as BitmapImage; bitmapImage.UriSource = null;//   image.Source = null;// ,        . DisposeImage(this.ImageToShow)//     ,      .   =null   ,            . GC.Collect(); } this.Cached = false; } public virtual void FillCache(Image image) { this.Cached = true; BitmapImage bi = new BitmapImage(new Uri("Assets/test.jpg", UriKind.Relative)); bi.DecodePixelWidth = 400; bi.CreateOptions = BitmapCreateOptions.IgnoreImageCache; this.ImageToShow = bi; //    image    source,         .    XAML   . Binding ImageValueBinding = new Binding("ImageToShow"); ImageValueBinding.Source = this; args.ImageControl.SetBinding(Image.SourceProperty, ImageValueBinding); } public static void DisposeImage(BitmapImage image) { Uri uri= new Uri("oneXone.png", UriKind.Relative);//   1x1,     StreamResourceInfo sr=Application.GetResourceStream(uri); try { using (Stream stream=sr.Stream) { image.DecodePixelWidth=1; //  .    ,      .    "",       BitmapImage    .   ,         WP8,   . (..    ,       ). image.SetSource(stream); } } catch {} } 

हमें लोडिंग / अनलोडिंग तत्वों के हमारे तरीकों के लिए छवि कहां मिलेगी?
यहाँ से:

  public void longListSelector_ItemRealized(object sender, Microsoft.Phone.Controls.ItemRealizationEventArgs e) { BaseListElement item = (BaseListElement)e.Container.Content; Image img= FindChild<Image>(e.Container, "ListImage"); if (item != null) { if (item.Cached == false) { item.FillCache(); } } } public static T FindChild<T>(DependencyObject parent, string childName) where T : DependencyObject { if (parent == null) { return null; } T foundChild = null; int childrenCount = VisualTreeHelper.GetChildrenCount(parent); for (int i = 0; i < childrenCount; i++) { DependencyObject child = VisualTreeHelper.GetChild(parent, i); var childType = child as T; if (childType == null) { //      foundChild = FindChild<T>(child, childName); if (foundChild != null) { break; } } else if (!string.IsNullOrEmpty(childName)) { var frameworkElement = child as FrameworkElement; //     if (frameworkElement != null && frameworkElement.Name == childName) { foundChild = (T)child; break; } //    ,            foundChild = FindChild<T>(child, childName); } else { foundChild = (T)child; break; } } return foundChild; } 

केवल थोड़ा ही शेष है, मैं प्रॉपर्टी हेल्पर सहायक वर्ग के कार्यान्वयन को दिखाऊंगा, क्योंकि हमारे पास एक विस्तृत ट्यूटोरियल है:

  public abstract class PropertyHelper:INotifyPropertyChanged { protected void NotifyChange(string args) { if (PropertyChanged != null) { PropertyChanged(this, new PropertyChangedEventArgs(args)); } } public event PropertyChangedEventHandler PropertyChanged; } 

सूची आइटम्स के गुणों में PropertyChanged घटनाओं की उपस्थिति हमें तत्वों के अद्यतन की गारंटी देती है, भले ही वे अतिरिक्त इशारों के बिना सूची में लोड किए गए हों। यह बहुत सुविधाजनक है। उदाहरण के लिए, हम भाषा को एप्लिकेशन सेटिंग्स में बदल सकते हैं और सूची संसाधनों को अपडेट करते समय, इसके तत्वों को पृष्ठ को फिर से लोड किए बिना, स्वयं द्वारा अपडेट किया जाएगा।

आखिरी क्षण और आप कर रहे हैं।

  public MainPage() { InitializeComponent(); LongVirtualList virtualList = new LongVirtualList(List_ListSelector); } 

इस आधार पर, आप घंटी और सीटी बजा सकते हैं, उदाहरण के लिए, एक अतिरिक्त कैश या कुछ और जो आप करना चाहते हैं।

यह सूची मेरे लिए 1600 * 1200 के हजारों चित्रों के एक परीक्षण संग्रह के साथ काम करती है, जिससे उनकी चिकनी स्क्रॉलिंग और समय पर लोडिंग सुनिश्चित होती है।

मैंने एसिंक्रोनस डेटा लोडिंग के मुद्दे को नहीं छुआ।

मुझे खुशी है कि अगर किसी को यह सब उपयोगी लगेगा। किसी भी मामले में, मुझे कोई अंग्रेजी इंटरनेट ब्रेक नहीं मिला, मुझे इस तरह की कोई भी रेसिपी नहीं मिली, मुझे खुद ही सबकुछ ईजाद करना पड़ा।