विंडोज फोन 7 के लिए शुरू से आखिर तक एक एप्लिकेशन बनाएं। भाग 6. परिदृश्य अभिविन्यास के लिए समर्थन, नियंत्रण का उपयोग

पिछला हिस्सा

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

• पोर्ट्रेट और लैंडस्केप ओरिएंटेशन के लिए समर्थन कैसे लागू करें।
• क्या नियंत्रण उपलब्ध हैं और सही का चयन कैसे करें।
• पैनोरमा और पिवट नियंत्रण के बीच चयन कैसे करें।
• पाठ दर्ज करने के लिए नियंत्रण का उपयोग कैसे करें।
• नियंत्रण घटनाओं को कैसे संभालें।

चित्र और परिदृश्य उन्मुखीकरण का समर्थन करें

पोर्ट्रेट अभिविन्यास विंडोज फोन अनुप्रयोगों पर मानक है। परिदृश्य अभिविन्यास के लिए समर्थन को लागू करने के लिए, आपको अतिरिक्त कोड लिखना होगा। यह इंगित करने के लिए कि एप्लिकेशन पोर्ट्रेट और लैंडस्केप ओरिएंटेशन दोनों का समर्थन करता है, आपको XAML या कोड में PortraitOrLandscape को SupportedOrientations प्रॉपर्टी सेट करनी होगी। फिर आपको यह सुनिश्चित करने की आवश्यकता है कि आपके एप्लिकेशन के पृष्ठों की सामग्री लैंडस्केप ओरिएंटेशन में सही ढंग से प्रदर्शित हो।

इंटरफ़ेस डिजाइन सिफारिश:
यदि एप्लिकेशन टेक्स्ट इनपुट का समर्थन करता है, तो आपको हार्डवेयर कीबोर्ड के संभावित अस्तित्व के कारण लैंडस्केप ओरिएंटेशन का समर्थन करना चाहिए।

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

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

स्क्रॉल चित्र और लैंडस्केप समर्थन

1. SupportedOrientations पृष्ठ की संपत्ति को PortraitOrLandscape में बदलें।
2. स्क्रॉल ग्रिड और स्टैकपैनल के साथ मानक ग्रिड बदलें।

दूसरी विधि, ग्रिड, आपको उपयोगकर्ता इंटरफ़ेस तत्वों को ग्रिड नियंत्रण में रखने की अनुमति देती है। यदि आवश्यक हो, जब अभिविन्यास में परिवर्तन होता है, तो आप प्रोग्राम को तत्वों को ग्रिड में अन्य कोशिकाओं में स्थानांतरित करते हैं।

ग्रिड का उपयोग करके पोर्ट्रेट और लैंडस्केप ओरिएंटेशन के लिए समर्थन

1. SupportedOrientations पृष्ठ की संपत्ति को PortraitOrLandscape में बदलें।
2. सामग्री के लिए एक पैनल के रूप में ग्रिड का उपयोग करें।
3. यदि आवश्यक हो, एक ओरिएंटेशन चेंजेड इवेंट हैंडलर बनाएं और तत्वों को ग्रिड में स्थानांतरित करने के लिए कोड जोड़ें।

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



एप्लिकेशन में नियंत्रण डेटा प्रदर्शित करने और उपयोगकर्ता को एप्लिकेशन के साथ सहभागिता करने की अनुमति देने के लिए उपयोग किया जाता है।

नियंत्रण का चयन

आप टूलबॉक्स से केवल डिजाइनर की सतह पर उन्हें खींचकर बड़ी संख्या में नियंत्रण का उपयोग कर सकते हैं।



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

आवेदन की आवश्यकता	नियंत्रण
नेविगेशन	PhoneApplicationFrame PhoneApplicationPage ApplicationBarIconButton ApplicationBarMenuItem HyperlinkButton
अंकन	सीमा कैनवास ContentControl ग्रिड चित्रमाला प्रधान आधार StackPanel ScrollViewer VirtualizingStackPanel
पाठ प्रदर्शन	TextBlock
पाठ इनपुट	पाठ बॉक्स PasswordBox
वस्तुओं की सूची प्रदर्शित करें	ListBox
बटन	बटन HyperlinkButton
एक सूची से चयन करने के लिए नियंत्रण	चेक बॉक्स RadioButton स्लाइडर कॉम्बो बॉक्स *
छवि प्रदर्शन	छवि
कार्ड के साथ काम करें	बिंग मैप्स
वीडियो प्रदर्शन	MediaElement
HTML रेंडरिंग	WebBrowser
प्रगति	ProgressBar
पॉप-अप संदेश	पॉपअप

* इसे मेट्रो डिज़ाइन के तहत स्टाइल नहीं किया गया है, लेकिन अगर इसे ठीक से डिज़ाइन किया गया है तो इसका इस्तेमाल किया जा सकता है।

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

प्रदर्शन सुधार टिप:
संसाधन-गहन नियंत्रण (जैसे बिंग मैप्स या वीडियो) का उपयोग करते समय और यदि आपका एप्लिकेशन मेमोरी से बाहर चला जाता है, तो आप मेमोरी उपयोग की निगरानी के लिए DeviceExtendedProperties.GetValue विधि को कॉल कर सकते हैं।

निम्नलिखित छवि फ्यूल ट्रैकर सारांश पृष्ठ पर कुछ नियंत्रणों का उपयोग करने का एक उदाहरण दिखाती है। कृपया ध्यान दें कि यह पृष्ठ प्रयोग करने योग्य स्थान का विस्तार करने के लिए धुरी नियंत्रण का उपयोग करता है।

पैनोरमा और पिवट नियंत्रणों के बीच चयन करें

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

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

पैनोरमा और धुरी नियंत्रण के लिए डिजाइन दिशानिर्देश:

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

पाठ दर्ज करने के लिए नियंत्रणों का उपयोग करना

एप्लिकेशन में टेक्स्ट दर्ज करने के लिए नियंत्रण जोड़ते समय, आपको ऑन-स्क्रीन कीबोर्ड के लिए जगह छोड़नी चाहिए, जिसे सॉफ्ट इनपुट पैनल (SIP) भी कहा जाता है। आपको यह सुनिश्चित करना होगा कि कीबोर्ड बटन या अन्य नेविगेशन नियंत्रणों को छिपाए नहीं। इस व्यवहार को रोकने का एक तरीका नेविगेशन आइटम को एप्लिकेशन बार में रखना है।

उपयोगकर्ता इनपुट त्रुटियों को रोकने के लिए, आपको नियंत्रण के लिए InputScope गुण सेट करके सबसे उपयुक्त ऑन-स्क्रीन कीबोर्ड का उपयोग करना चाहिए। निम्न तालिका में InputScope मूल्यों के दो उदाहरण दिखाए गए हैं।

कीबोर्ड	ख़ाका
TelephoneNumber	12 संख्यात्मक कुंजी के साथ लेआउट
टेक्स्ट	ऑटो-सुधार और पाठ सुझाव जैसी सुविधाओं के साथ मानक लेआउट

सही कीबोर्ड लेआउट प्रदान करने से उपयोगकर्ता द्वारा गलती करने की संभावना सीमित हो जाएगी, लेकिन आपको उपयोगकर्ता इनपुट सत्यापन को भी लागू करना होगा।

इंटरफ़ेस डिजाइन सिफारिश:
यदि एप्लिकेशन टेक्स्ट इनपुट का समर्थन करता है, तो आपको हार्डवेयर कीबोर्ड के संभावित अस्तित्व के कारण लैंडस्केप ओरिएंटेशन का समर्थन करना चाहिए।

हैंडलिंग इवेंट कंट्रोल

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

आप गुण विंडो के ईवेंट टैब का उपयोग करके एक ईवेंट हैंडलर बना सकते हैं। गुण विंडो चयनित नियंत्रण के लिए उपलब्ध सभी घटनाओं को सूचीबद्ध करती है। निम्न छवि बटन के लिए कुछ घटनाओं को दिखाती है।



डिफ़ॉल्ट नाम के साथ ईवेंट हैंडलर बनाने के लिए, आप बस गुण विंडो में ईवेंट नाम को डबल-क्लिक कर सकते हैं। एक ईवेंट हैंडलर बनाया जाता है और कोड एडिटर में एक कोड-बैक फ़ाइल खोली जाती है। निम्न कोड स्निपेट बटन नियंत्रण के लिए ईवेंट हैंडलर पर क्लिक करता है।

private void PhotoButton_Click( object sender, RoutedEventArgs e) { } * This source code was highlighted with Source Code Highlighter .

1. private void PhotoButton_Click( object sender, RoutedEventArgs e) { } * This source code was highlighted with Source Code Highlighter .
2. private void PhotoButton_Click( object sender, RoutedEventArgs e) { } * This source code was highlighted with Source Code Highlighter .
4. private void PhotoButton_Click( object sender, RoutedEventArgs e) { } * This source code was highlighted with Source Code Highlighter .

private void PhotoButton_Click( object sender, RoutedEventArgs e) { } * This source code was highlighted with Source Code Highlighter .

आप XAML में ईवेंट हैंडलर भी बना सकते हैं। XAML संपादन मोड में, उस ईवेंट का नाम दर्ज करें जिसे आप प्रोसेस करना चाहते हैं। जब आप XAML संपादन मोड में लिखना शुरू करते हैं, तो IntelliSense विंडो दिखाई देती है। निम्न छवि दिखाती है कि XAML कोड में क्लिक घटना को कैसे परिभाषित किया जाए।



एक बार जब आपने ईवेंट को परिभाषित कर लिया है, तो आप दिखाई देने वाले इंटेलीसेनियन विंडो में ईवेंट हैंडलर या डबल-क्लिक करें <नया ईवेंट हैंडलर> का नाम निर्दिष्ट कर सकते हैं। निम्न छवि IntelliSense विंडो को दिखाती है जो आपको एक नया ईवेंट हैंडलर बनाने में मदद करती है।



XAML कोड का निम्नलिखित टुकड़ा PhotoButton_Click इवेंट हैंडलर के बटन नियंत्रण के क्लिक इवेंट को संलग्न करता है।

1. < बटन ग्रिड । रो = "2" ग्रिड । ColumnSpan = "2"
2. सामग्री = "चित्र चुनें" पर क्लिक करें = "PhotoButton_Click"
3. आड़ा-तिरछा = "केंद्र" वर्टिकल ऑलिगमेंट = "केंद्र" />

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

अगला भाग