डब्ल्यूपीएफ में यूआई तत्वों को आलसी कैसे बनाएं?

Question

हम एक डब्ल्यूपीएफ एप्लीकेशन बना रहे हैं जो अत्यधिक सजाए गए इनपुट तत्वों का भारी उपयोग करता है। सजाए गए तत्व का एक साधारण उदाहरण एक टेक्स्टबॉक्स है जो फोकस प्राप्त करने के बाद केवल टेक्स्ट-टेक्स्ट की तरह दिखता है, और फ़ोकस प्राप्त करने के बाद टेक्स्टबॉक्स में बदल जाता है। साथ ही, जब अतिरिक्त मूल्य डेटाबेस में सहेजा जा रहा है तो अतिरिक्त दृश्य प्रतिक्रिया प्रदान की जाती है। समस्या यह है कि एक ऐसा दृश्य दिखा रहा है जिसमें इनमें से बहुत से तत्व शामिल हैं (मान लें 100) बहुत धीमी है और एप्लिकेशन को बहुत ही अनुत्तरदायी बनाता है।

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

<custom:Decorator Context="{Binding ValueHelper}" > 
    <TextBox Text="{Binding ValueHelper.Text}"/> 
</custom:Decorator> 

इससे हमें किसी भी इनपुट तत्व हम चाहते हैं को सजाने के लिए के लिए बनाता है, यह या तो पाठ बॉक्स, दिनांक पिकर, बता गया या किसी भी कस्टम तत्व।

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

तो, दृश्य में प्रत्येक तत्व के लिए सभी सजावटी तत्वों (या वास्तविक इनपुट तत्व) के बिना समान सजावट प्राप्त करने का सबसे अच्छा तरीका क्या होगा?

---

स्पष्ट करने के लिए यूज-केस सजाया पाठ बॉक्स का एक उदाहरण:

पाठ बॉक्स, केवल पढ़ने-TextBlock जब यह ध्यान या माउस कर्सर नहीं है की तरह लग रहा है कि यह के शीर्ष (पर वर्तमान में नहीं है राज्य 1)। इसके अलावा, तीन बिंदुओं ("...") दिखाए जाते हैं क्योंकि तत्व का कोई मूल्य नहीं है।

जब माउस कर्सर तत्व के शीर्ष पर स्थानांतरित हो जाता है, तो टेक्स्टबॉक के चारों ओर एक बिंदीदार हरा आयताकार प्रकट होता है यह इंगित करने के लिए कि तत्व को संशोधित किया जा सकता है (राज्य 2)। यदि टेक्स्टबॉक्स केवल पढ़ने के लिए हुआ तो रंग लाल हो जाएगा।

फोकस तत्व प्राप्त करने के बाद वास्तविक टेक्स्टबॉक्स में बदल जाता है जिसका उपयोग वास्तविक मूल्य (राज्य 3) को संशोधित करने के लिए किया जा सकता है।

टेक्स्टबॉक्स को अपना ध्यान खोने के बाद डेटाबेस में संग्रहीत किया जाता है, और यह दिखाने के लिए कि मूल्य वर्तमान में सहेजा जा रहा है एक व्यस्त संकेतक तत्व (राज्य 4) के बाईं ओर दिखाई देता है।

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

Answer 1

सभी UI तत्व अग्रिम ड्राइंग के बजाय, केवल लोगों की जरूरत आकर्षित

WPF आप एक वस्तु एक DataTrigger का उपयोग करने का Template संशोधित करने के लिए तो आप के लिए टेम्पलेट समायोजित कर सकते हैं अनुमति देता है आपके अपने ट्रिगर्स

के आधार पर डेकोरेटर अपने डेकोरेटर के लिए एक उदाहरण शैली कुछ इस तरह दिख सकता है:

<Style TargetType="{x:Type ContentControl}"> 
    <!-- Default Template --> 
    <Setter Property="ContentTemplate" 
      Value="{StaticResource NoDecoratorTemplate}" /> 

    <Style.Triggers> 
     <DataTrigger Property="Text" Value=""> 
      <Setter Property="ContentTemplate" 
        Value="{StaticResource BlankTemplate}" /> 
     </DataTrigger> 
     <Trigger Property="IsMouseOver" Value="True"> 
      <Setter Property="ContentTemplate" 
        Value="{StaticResource MouseOverTemplate}" /> 
     </Trigger> 
     <Trigger Property="IsFocused" Value="True"> 
      <Setter Property="ContentTemplate" 
        Value="{StaticResource FocusedTemplate}" /> 
     </Trigger> 
     <DataTrigger Property="{Binding IsLoading}" Value="True"> 
      <Setter Property="ContentTemplate" 
        Value="{StaticResource LoadingTemplate}" /> 
     </DataTrigger> 
    </Style.Triggers> 
</Style> 

इसके अलावा, WPF को गैर-दृश्यमान आइटम लोड नहीं करना चाहिए। आप अपने सजावटी Visibility="Collapsed" को परीक्षण के रूप में सेट करने का प्रयास कर सकते हैं यह देखने के लिए कि क्या लोड समय ठीक करता है या नहीं।

यह करता है और आप नहीं Template मार्ग जाना चाहते हैं, तो आप यह सुनिश्चित कर सकता है कि अपने सभी वस्तुओं की Visibility के साथ शुरू Collapsed के लिए सेट है, और वे केवल Visible लिए तैयार हो जाओ, जब वे प्रदर्शित किया जाना चाहिए।

यदि यह आपके लोड समय को ठीक नहीं करता है, तो आपकी समस्या शायद कहीं और है। उदाहरण के लिए, ऐसा लगता है कि आपके कुछ सजावटी वस्तुओं को इसके अंदर रखे गए सामग्री नियंत्रण के अनुसार आकार दिया गया है, इसलिए यह संभव है कि आप वास्तव में धीमा कर रहे हैं, वस्तुओं को प्रदर्शित नहीं कर रहे हैं, बल्कि वस्तुओं का आकार निर्धारित कर रहे हैं।