विंडोज फोन 7 के लिए शुरू से आखिर तक एक एप्लिकेशन बनाएं। भाग 5. पृष्ठों, पृष्ठ लेआउट के बीच नेविगेट करना

पिछला हिस्सा

यदि आपके आवेदन में एक से अधिक पृष्ठ हैं, तो आपको उपयोगकर्ताओं को इन पृष्ठों के बीच नेविगेट करने की क्षमता देनी होगी।

लेआउट बनाना पैनलों को जोड़ने, नियंत्रण रखने और अपने पृष्ठों के वांछित रूप और व्यवहार को प्राप्त करने के लिए गुणों को स्थापित करने की प्रक्रिया है।

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

• हाइपरलिंक का उपयोग करके दूसरे पृष्ठ पर संक्रमण कैसे लागू किया जाए।
• नेविगेशन सेवा का उपयोग करके दूसरे पृष्ठ पर संक्रमण कैसे लागू किया जाए।
• पृष्ठ पर किस मानक पैनल का उपयोग किया जाता है।
• XAML क्या है और इसका उपयोग यूजर इंटरफेस बनाने के लिए कैसे किया जाता है।
• पृष्ठ पर नियंत्रण कैसे रखें।
• डायनेमिक मार्कअप कैसे बनाएं।

पृष्ठों के बीच नेविगेशन।

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

पेजों के बीच नेविगेशन को लागू करने का सबसे आसान तरीका हाइपरलिंकबटन नियंत्रण का उपयोग करना है। वांछित पृष्ठ पर जाने के लिए आप इसके नेवीगेशन प्रॉपर्टी का उपयोग कर सकते हैं। निम्नलिखित उदाहरण से पता चलता है कि SecondPage.xaml नामक पेज पर कैसे जाना है।

< HyperlinkButton NavigateUri ="SecondPage.xaml" /> * This source code was highlighted with Source Code Highlighter .

1. < HyperlinkButton NavigateUri ="SecondPage.xaml" /> * This source code was highlighted with Source Code Highlighter .

< HyperlinkButton NavigateUri ="SecondPage.xaml" /> * This source code was highlighted with Source Code Highlighter .

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

1. निजी शून्य FillupButton_Click ( ऑब्जेक्ट प्रेषक, EventArgs e)
2. {
3. नैविगेशन सेवा
4. नई उरी ( "/ साक्षात्कार / फ़िलअपपेज। एक्सएमएल" , उरीकिंड.रेटिव));
5. }

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

नेविगेट करने की विधि हमेशा निर्दिष्ट यूआरआई में एक नया पृष्ठ उदाहरण बनाती है। आप निर्दिष्ट राज्य को अनुरोधित पृष्ठ को आरंभ करने के लिए यूआरआई पैरामीटर भी जोड़ सकते हैं (ईंधन ट्रैकर यूआरआई मापदंडों में स्थिति की जानकारी प्रसारित नहीं करता है)। पृष्ठों के बीच डेटा स्थानांतरित करने के अन्य विकल्पों में एप्लिकेशन-स्तरीय गुण, बाहरी उपयोगिता वर्ग या PhoneApplicationService.State संपत्ति का उपयोग करना शामिल है।

वापस जाने के लिए, आप NavigationService.GoBack पद्धति का उपयोग कर सकते हैं, जो पिछले पृष्ठ के उदाहरण पर लौटता है। बेशक, यह बैक बटन की कार्यक्षमता को डुप्लिकेट करता है, इसलिए आप इस विधि को कुछ अन्य कार्यक्षमता के हिस्से के रूप में कहेंगे।

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

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

पृष्ठ लेआउट: मानक पैनल

जब आप Visual Studio में एक नया Windows Phone अनुप्रयोग प्रोजेक्ट बनाते हैं, तो आपको अपने पृष्ठ को चिह्नित करने के लिए स्वचालित रूप से कई पैनल और तत्व मिलते हैं। आपके अधिकांश मार्कअप निर्णय ContentPanel से संबंधित होंगे। निम्नलिखित चित्र चित्र अभिविन्यास में पृष्ठ के लिए मानक पैनल और तत्वों को दर्शाता है।

XAML परिचय

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

विंडोज फोन के लिए विजुअल स्टूडियो 2010 एक्सप्रेस और विंडोज फोन के लिए एक्सप्रेशन ब्लेंड आपको डिजाइनर की सतह पर नियंत्रण को खींचने और छोड़ने की अनुमति देता है, उन्हें एक दृश्य तरीके से सेट और गुण देता है। ये उपकरण आपके लिए आवश्यक XAML कोड उत्पन्न करते हैं, इसलिए आपको Windows Phone एप्लिकेशन बनाने के लिए व्यापक XAML ज्ञान की आवश्यकता नहीं है। फिर भी, एक सामान्य विचार उन मामलों के लिए उपयोगी है जब आप XAML कोड को मैन्युअल रूप से बदलना आवश्यक समझते हैं। विजुअल स्टूडियो के XAML एडिटर में IntelliSense और स्टेटमेंट कॉम्पटेशन (स्टेटमेंट पूरा होने) की सुविधा है। इसके अलावा, डिज़ाइनर में छवि को XAML परिवर्तन के रूप में अपडेट किया गया है। यदि आपको किसी विशेष आइटम की मदद चाहिए, तो उस आइटम पर होवर करें और उस आइटम के लिए सहायता विषय पर जाने के लिए F1 दबाएं।

XAML फ़ाइल में, प्रत्येक उपयोगकर्ता इंटरफ़ेस ऑब्जेक्ट XAML तत्व है, और इस ऑब्जेक्ट के गुणों को विशेषताओं का उपयोग करके सेट किया गया है। XAML स्पष्ट रूप से उपयोगकर्ता इंटरफ़ेस मार्कअप के बच्चे / माता-पिता के रिश्ते को पारित करता है। निम्न XAML कोड एक पैनल (StackPanel) प्रदर्शित करता है जिसमें एक छवि (छवि) और कुछ पाठ (TextBlock) होता है। इस उदाहरण में, गुण गुण सिंटैक्स का उपयोग करके सेट किए जाते हैं।

1. <! - कार फोटो और नाम ।-->
2. < स्टैकपैनल ओरिएंटेशन = "क्षैतिज" मार्जिन = "12,130" ऊँचाई = "110"
3. वर्टिकल ऑलिमेंट = "टॉप" >
4. < छवि ऊँचाई = "75" चौड़ाई = "75" मार्जिन = "15" खिंचाव = "वर्दी वर्दी"
5. स्रोत = "{बंधन चित्र}" />
6. < TextBlock पाठ = "{बाइंडिंग नाम}" वर्टिकल ऑलिमेंट = "केंद्र" />
7. </ stackpanel >

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

निम्न छवि दिखाती है कि आवेदन शुरू होने पर यह XAML कोड कैसे दिखाई देता है।

नियंत्रणों का स्थान

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



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

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



आप कैनवास लेआउट नियंत्रण का उपयोग करके नियंत्रण भी रख सकते हैं। पिक्सल में निर्दिष्ट x और y निर्देशांक के आधार पर कैनवस पर नियंत्रण रखा जाता है।

इंटरफ़ेस डिजाइन सिफारिश:
कैनवस नियंत्रण पिक्सेल-आधारित मार्कअप का उपयोग करता है और फिक्स्ड-ओरिएंटेशन अनुप्रयोगों में गहराई से एम्बेडेड (नेस्टेड) ​​नियंत्रण के लिए ग्रिड नियंत्रण से बेहतर प्रदर्शन प्रदान कर सकता है।

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

गतिशील मार्कअप बनाएँ

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

गतिशील लेआउट बनाने के लिए, आप आमतौर पर पैनल से प्राप्त निम्न नियंत्रणों में से एक से शुरू करते हैं।

• ग्रिड नियंत्रण आपको पंक्तियों और स्तंभों के रूप में आइटम रखने की अनुमति देता है।
• StackPanel नियंत्रण स्वचालित रूप से बाल वस्तुओं को लंबवत या क्षैतिज रूप से रखता है।

इंटरफ़ेस डिजाइन सिफारिश:
जब आवेदन फ्रेम का विस्तार करना, अनुबंध करना या घूमना हो तो ग्रिड सबसे अच्छा विकल्प है।

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

गतिशील लेआउट के लिए दो महत्वपूर्ण आकार सेटिंग्स हैं।

• ऑटो - नियंत्रण को अपनी सामग्री को फिट करने के लिए आकार बदलने देता है, भले ही सामग्री का आकार परिवर्तन हो।
• * (तारांकन) - सेट वेट के अनुपात में ग्रिड नियंत्रण की पंक्तियों और स्तंभों के बीच मुक्त स्थान आवंटित करता है।

डायनेमिक व्यवहार के लिए StackPanel गुण सेट करने के लिए:

1. "ऊँचाई" और "चौड़ाई" गुण " ऑटो " पर सेट करें, जिसका अर्थ है कि वे मूल पृष्ठ या पैनल की पूरी चौड़ाई या ऊँचाई को भर देंगे।

गतिशील व्यवहार के लिए ग्रिड गुण सेट करने के लिए:

1. गुण विंडो या डिज़ाइनर का उपयोग करके ग्रिड में पंक्तियों और स्तंभों को जोड़ें।
2. पंक्तियों और स्तंभों के लिए एक ऑटो आकार या एक तारांकन चिह्न (*) निर्दिष्ट करें।
   निम्न उदाहरण ईंधन ट्रैकर एप्लिकेशन में वाहन जानकारी पृष्ठ पर ContentPanel नामक ग्रिड नियंत्रण दिखाता है। पहले तीन लाइनों की ऊंचाई ऑटो पर सेट है, और चौथा * है । इसका मतलब है कि पहली तीन लाइनों की ऊंचाई उनकी सामग्री के आकार से निर्धारित की जाएगी, और अंतिम पंक्ति शेष स्थान को ले जाएगी। पहले कॉलम की चौड़ाई ऑटो पर सेट है, और दूसरा कॉलम शेष स्थान को ले जाएगा।
   

   1. < Grid.RowDefinitions >
   2. < रोवफिनिशन हाइट = "ऑटो" />
   3. < रोवफिनिशन हाइट = "ऑटो" />
   4. < रोवफिनिशन हाइट = "ऑटो" />
   5. < रोवडिफिनिशन हाइट = "*" />
   6. </ Grid.RowDefinitions >
   7. < Grid.ColumnDefinitions >
   8. < ColumnDefinition Width = "ऑटो" />
   9. < ColumnDefinition Width = "*" />
   10. </ Grid.ColumnDefinitions >

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

3. चाइल्ड कंट्रोल को विशिष्ट पंक्तियों और कॉलमों में रखें। ग्रिड और ग्रिड.पॉलिमेंट प्रॉपर्टीज़ का उपयोग करके, या डिज़ाइनर सतह पर उन्हें इच्छित स्थान पर खींचकर।
4. यदि आवश्यक हो, तो Grid.RowSpan और Grid.ColumnSpan गुणों का उपयोग करके बच्चे के नियंत्रण के लिए कई पंक्तियों या स्तंभों को असाइन करें।
5. नियंत्रण के लिए प्रत्येक निश्चित मार्जिन की समीक्षा करें और सुनिश्चित करें कि उनकी आवश्यकता है।
6. सभी नियंत्रणों के लिए आकार पर विचार करें और यदि आवश्यक हो, तो ऊँचाई और चौड़ाई के गुणों को हटा दें, इसके बजाय न्यूनतम या न्यूनतम गुण सेट करें।

पाठ नियंत्रण के लिए MinHeight और MinWidth गुण सेट करना पाठ को आकार से जब यह अपठनीय हो जाता है, तो स्केलिंग से रोकता है।

इंटरफ़ेस डिजाइन सिफारिश:
उन फोंट का उपयोग करने से बचें जो 15 अंकों से छोटे हैं। आपको पहले Segoe फ़ॉन्ट का उपयोग करना चाहिए।

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



अगला भाग