विंडोज फोन 7 के लिए शुरू से आखिर तक एक एप्लिकेशन बनाएं। भाग 9. डेटा मानचित्रण

पिछला हिस्सा

इसलिए आपने अपने आवेदन के लिए पूर्ण पृष्ठ बनाए हैं। अब आप शायद उन्हें विभिन्न डेटा के साथ आबाद करना चाहते हैं।

इस भाग में आप सीखेंगे:

• उपयोगकर्ता इंटरफ़ेस में डेटा को कैसे बांधें।
• विज़ुअल स्टूडियो आपको डेटा बाइंडिंग बनाने में कैसे मदद कर सकता है।
• किसी सूची में डेटा कैसे प्रदर्शित किया जाए।
• अधिक जटिल बाध्यकारी परिदृश्यों के साथ कैसे काम करें।

उपयोगकर्ता इंटरफ़ेस के लिए बाध्यकारी डेटा

फ्यूल ट्रैकर ऐप में तीन डेटा पेज हैं। डेटा मुख्य रूप से तीन वर्गों में संग्रहीत किया जाता है। निम्नलिखित छवि पृष्ठों और उनके संबंधित वर्गों को दिखाती है।



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

निम्न XAML कोड टुकड़ा एक स्रोत वस्तु के नाम संपत्ति के लिए एक TextBox नियंत्रण की पाठ संपत्ति को बाँधने के लिए उपयोग किया जाता है कि वाक्यविन्यास दिखाता है।

< TextBox x:Name ="NameTextBox" Text ="{Binding Name, Mode=TwoWay}" /> * This source code was highlighted with Source Code Highlighter .

1. < TextBox x:Name ="NameTextBox" Text ="{Binding Name, Mode=TwoWay}" /> * This source code was highlighted with Source Code Highlighter .

< TextBox x:Name ="NameTextBox" Text ="{Binding Name, Mode=TwoWay}" /> * This source code was highlighted with Source Code Highlighter .

निम्नलिखित छवि इस तरह के बंधन का एक उदाहरण दिखाती है।



प्रत्येक बंधन में एक मोड गुण होता है, जो यह निर्धारित करता है कि डेटा कब और कैसे अपडेट किया गया है। OneWay (वन-वे) बाइंडिंग का अर्थ है कि स्रोत बदलने पर उपयोगकर्ता इंटरफ़ेस का लक्ष्य तत्व अपडेट किया जाता है। टूवे (टू-वे) बाइंडिंग का मतलब है कि लक्ष्य और स्रोत दोनों को अपडेट किया जाता है यदि उनमें से कोई भी बदलता है। यदि आप स्रोत ऑब्जेक्ट में परिवर्तनों को अधिसूचित करने के लिए बाइंडिंग के लिए OneWay या TwoWay बाइंडिंग का उपयोग करते हैं, तो आपको INotifyPropertyChanged इंटरफ़ेस को लागू करना होगा। इस इंटरफ़ेस पर अगले खंड में "डेटा क्लासेस बनाना" पर चर्चा की जाएगी।

आप DataContext गुण (डेटा संदर्भ) सेट करके स्रोत ऑब्जेक्ट निर्दिष्ट करें। यदि आप एक सूची बॉक्स नियंत्रण का उपयोग कर रहे हैं, तो आपको आइटम स्रोत सोर्स सेट करके स्रोत ऑब्जेक्ट को निर्दिष्ट करना होगा। निम्न उदाहरण दिखाता है कि CarHeader पैनल की DataContext संपत्ति को किसी स्थैतिक संपत्ति से पुनर्प्राप्त स्रोत ऑब्जेक्ट पर कैसे सेट किया जाए।

1. CarHeader.DataContext = CarDataStore.Car;

* इस सोर्स कोड को सोर्स कोड हाइलाइटर के साथ हाइलाइट किया गया था।

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

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

डेटा बाइंडिंग बिल्डर का उपयोग करना

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

डेटा बाइंडिंग बिल्डर का उपयोग करने के लिए :

1. उस नियंत्रण का चयन करें जिसके लिए आप एक बंधन बनाना चाहते हैं।
2. प्रॉपर्टीज विंडो में, वह प्रॉपर्टी ढूंढें जिसमें आप बांधना चाहते हैं।
3. बाएं कॉलम के किनारे पर, प्रॉपर्टी मार्कर आइकन पर क्लिक करें और फिर डेटा बाइंडिंग बटन पर क्लिक करें।
   डेटा बाइंडिंग बिल्डर खुलता है।
4. विभिन्न विकल्पों को प्रकट करने के लिए डेटा बाइंडिंग बिल्डर में विभिन्न पैनलों पर क्लिक करें।
   निम्न छवि निम्न मापदंडों के साथ डेटा बाइंडिंग बिल्डर को दिखाती है:
   • डेटा संदर्भ: फ़िलअप ऑब्जेक्ट
   • बाइंडिंग पाथ: ओडोमीटर रीडिंग प्रॉपर्टी
   • कनवर्टर: ZeroFormatter
   • मोड: टूवे
   
   

निम्नलिखित XAML स्निपेट डेटा बाइंडिंग बिल्डर द्वारा उत्पन्न कोड दिखाता है।

1. < पाठ बॉक्स
2. ग्रिड । रो = "0" ग्रिड । कॉलम = "1"
3. x: नाम = "OdometerTextBox"
4. पाठ = "{बाइंडिंग ओडोमीटर रीडिंग , मोड = टूवे, कन्वर्टर = {StaticResource ZeroForming}" "
5. इनपुटस्कोप = "टेलिफोन नम्बर "
6. MaxLength = "8" />

* इस सोर्स कोड को सोर्स कोड हाइलाइटर के साथ हाइलाइट किया गया था।

नोट:
जब आप कोड में DataContext गुण सेट करते हैं, तो डेटा बाइंडिंग बिल्डर को डेटा स्रोत में उपलब्ध गुणों के बारे में कोई पता नहीं होता है और आप बाइंडिंग पथ को चुनने में मदद नहीं कर सकते हैं। हालाँकि, आप डिज़ाइन समय पर डेटा संदर्भ सेट करके इस समस्या को हल कर सकते हैं। आप यहां विकास के दौरान डेटा संदर्भ सेट करने के बारे में अधिक जानकारी प्राप्त कर सकते हैं: वॉकथ्रू: सिल्वर डिज़ाइनर में डेटा के लिए बाइंड के लिए एक डिज़ाइनइंस्टेंस का उपयोग करना ।

सूची डेटा

एक सूची में वस्तुओं का संग्रह प्रदर्शित करना फोन पर मुख्य कार्यों में से एक है। डेटा बाइंडिंग का उपयोग करके सूची में तत्वों का एक संग्रह प्रदर्शित करने के लिए आपको निम्नलिखित कार्य करने होंगे:

1. अपने आवेदन में सूची बॉक्स जोड़ें।
2. आइटम स्रोत के लिए संग्रह को बाइंड करके सूची बॉक्स के लिए डेटा स्रोत निर्दिष्ट करें।
3. सूची बॉक्स में प्रत्येक आइटम की उपस्थिति को अनुकूलित करने के लिए, सूची बॉक्स के लिए एक डेटा टेम्पलेट जोड़ें।
4. डेटा टेम्प्लेट में, आइटम संग्रह के गुणों के लिए लिस्टबॉक्स आइटम को बांधें।

निम्न चित्र ईंधन ट्रैकर सारांश पृष्ठ पर एक सूची बॉक्स के लिए बाइंडिंग दिखाता है।



निम्न XAML कोड दिखाता है कि ListBox के लिए बाइंडिंग कैसे निर्दिष्ट की गई थी।

1. < ListBox ItemContainerStyle = "{StaticResource ListBoxStyle}"
2. ItemSource = "{बाइंडिंग फ़िलअपहिस्टर}"
3. ऊँचाई = "380" क्षैतिज आवर्तन = "वाम" मार्जिन = "5.25,0.0"
4. वर्टिकल ऑलिमेंट = "शीर्ष" चौड़ाई = "444" >
5. < ListBox.ItemTemplate >
6. < DataTemplate >
7. < स्टैकपैनल ओरिएंटेशन = "क्षैतिज" >
8. < TextBlock स्टाइल = "{StaticResource सारांश"}
9. पाठ = "{बाइंडिंग दिनांक, कनवर्टर = {StaticResource StringFormatter}, ConverterParameter = \ {0: d \}}"
10. चौड़ाई = "105" टेक्स्टवैपिंग = "रैप" />
11. < TextBlock स्टाइल = "{StaticResource सारांश"}
12. पाठ = "{बाइंडिंग फ्यूलक्वांटिटी}" टेक्स्टवैपिंग = "रैप" />
13. < TextBlock स्टाइल = "{StaticResource सारांश"}
14. पाठ = "{बाइंडिंग डिडिएरवेन }" टेक्स्टवैपिंग = "रैप" />
15. < TextBlock स्टाइल = "{StaticResource सारांश"}
16. पाठ = "{बाइंडिंग प्राइसपेरुएलयूनेट, कन्वर्टर = {StaticResource StringFormatter}, ConverterParameter = \ {0: c \}, कनवर्टरकल्चर = en-US}" />
17. < TextBlock स्टाइल = "{StaticResource सारांश"}
18. पाठ = "{बांधने की क्षमता, कनवर्टर = {StaticResource StringFormatter}, ConverterParameter = \ {0: F \}}" TextWrapping = "लपेटें />>
19. </ stackpanel >
20. </ DataTemplate >
21. </ ListBox.ItemTemplate >
22. </ ListBox >

* इस सोर्स कोड को सोर्स कोड हाइलाइटर के साथ हाइलाइट किया गया था।

पिछले XAML कोड में, ListBox.ItemsSource गुण Car.FillupHistory संपत्ति के लिए बाध्य है, ताकि कहानी संग्रह में प्रत्येक Fillup ऑब्जेक्ट ListBox में एक अलग आइटम के रूप में दिखाई दे। DataTemplate तत्व प्रत्येक आइटम की उपस्थिति को परिभाषित करता है और इसमें कई TextBlock तत्व होते हैं, जिनमें से प्रत्येक Fillup वर्ग की संपत्ति के साथ जुड़ा हुआ है।

यह XAML केवल तभी काम करेगा जब Car ऑब्जेक्ट पहले पेज से जुड़ा हो, जैसा कि निम्नलिखित कोड से दिखाया गया है। सारांशपेज.xaml.cs से।

1. यह .DataContext = CarDataStore.Car;

* इस सोर्स कोड को सोर्स कोड हाइलाइटर के साथ हाइलाइट किया गया था।

प्रदर्शन सुधार टिप:
यदि आपके लिस्टबॉक्स में स्क्रॉल करना सहज और उत्तरदायी नहीं लगता है, तो निम्नलिखित युक्तियों का उपयोग करें:

• सूची बॉक्स में आइटम को सरल बनाएं।
• पृष्ठभूमि में चित्र डाउनलोड करें।
• डेटा वर्चुअलाइजेशन का उपयोग करें।
• DeferredLoadListBox या LazyListBox का उपयोग करने पर ध्यान दें।
• नेस्टेड सूचियों का उपयोग न करें।

जटिल स्नैप पथ

किसी भी स्तर पर DataContext संपत्ति की स्थापना के लचीलेपन के अलावा (जो आपको उच्च स्तर पर सेटिंग्स को ओवरराइड करने की अनुमति देता है), आप लिंक बाइंडरों में कार ड्रिल करने के लिए जटिल बाइंडिंग पथ भी निर्दिष्ट कर सकते हैं, जैसे कि Car.Filluptistory । उदाहरण के लिए, सारांशपेज। Xaml से निम्नलिखित XAML कोड, ईंधन भरने के इतिहास संग्रह में पहले आइटम की Fillup.FuelEfficiency संपत्ति के लिए बाध्यकारी दर्शाता है।

1. < TextBlock टेक्स्ट = "{बाइंडिंग फ़िलिपहिस्ट्रोन [0]। एफिशिएंसी, कन्वर्टर = {StaticResource StringFormatter}, ConverterParameter = \ {0: F \}}" />

* इस सोर्स कोड को सोर्स कोड हाइलाइटर के साथ हाइलाइट किया गया था।

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



बाईं ओर धुरी स्क्रीन शो पर हरे रंग की आयतें नियंत्रण करती हैं जो जटिल रास्तों का उपयोग कर लंगर डालती हैं। ये पथ Car.FillupHistory संग्रह में पहले तत्व (इंडेक्स 0) से शुरू होते हैं और फिलअप क्लास के विभिन्न गुणों के साथ समाप्त होते हैं। उदाहरण के लिए, वर्तमान MPG फ़ील्ड बाइंडिंग मार्ग FillupHistory [0] .FuelEfficiency का उपयोग करता है। यदि आप इस पथ में पृष्ठ के डेटाकोनेट सेटिंग को शामिल करते हैं, तो संपूर्ण बाइंडिंग पथ इस तरह दिखाई देगा: CarDataStore.Car.FillupHistory [0] ।

अगला भाग