विंडोज फोन 7 के लिए शुरू से आखिर तक एक एप्लिकेशन बनाएं। भाग 4. एक नया प्रोजेक्ट बनाना, पेज जोड़ना

पिछला हिस्सा

आपके द्वारा अपने एप्लिकेशन के पृष्ठों के थंबनेल बनाने और नेविगेशन पथ निर्धारित करने के बाद, आप Windows Phone के लिए Visual Studio 2010 एक्सप्रेस में एप्लिकेशन बनाना शुरू कर सकते हैं।

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

• विजुअल स्टूडियो में एक नया विंडोज फोन प्रोजेक्ट कैसे बनाया जाए।
• अपने आवेदन में नए पृष्ठ कैसे जोड़े।
• पेज प्रॉपर्टी कैसे सेट करें।
• एप्लिकेशन बार कैसे जोड़ें
• एप्लिकेशन पैनल आइकन कैसे जोड़ें।

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

विंडोज फोन प्रोजेक्ट के लिए एक नया सिल्वरलाइट बनाएं

1. सुनिश्चित करें कि आपके पास विंडोज फोन डेवलपर उपकरण स्थापित हैं।
2. Visual Studio में, एक नया प्रोजेक्ट बनाएँ।
3. नए प्रोजेक्ट संवाद बॉक्स में , विंडोज फोन के लिए सिल्वरलाइट का चयन करें और फिर प्रोजेक्ट टेम्पलेट का चयन करें।

प्रोजेक्ट बनाने के बाद, समाधान एक्सप्लोरर निम्न छवि की तरह दिखाई देगा।



विंडोज फोन परियोजना के लिए सिल्वरलाइट में निम्नलिखित फाइलें हैं:

प्रोजेक्ट फ़ाइल	विवरण
AppManifest.xml	यह एप्लिकेशन पैकेज बनाने के लिए आवश्यक एप्लिकेशन मैनिफ़ेस्ट फ़ाइल है। एक नियम के रूप में, इस फ़ाइल को संपादित करने की कोई आवश्यकता नहीं है।
AssemblyInfo.cs	इस फ़ाइल में असेंबली जानकारी है जैसे कि मेटाडेटा का नाम और संस्करण।
WMAppManifest.xml	यह एप्लिकेशन मैनिफ़ेस्ट फ़ाइल है जिसमें मोबाइल एप्लिकेशन का मेटाडेटा है। यह फ़ाइल मुख्य रूप से विंडोज फोन मार्केटप्लेस में एप्लिकेशन को प्रकाशित करने की प्रक्रिया में उपयोग की जाती है।
अनुप्रयोग फ़ाइलें	इन फ़ाइलों का उपयोग अनुप्रयोग स्तर तर्क को निर्धारित करने के लिए किया जाता है। उपयोगकर्ता इंटरफ़ेस को प्रदर्शित करने के लिए ऐप वर्ग की आवश्यकता है।
MainPage.xaml	यह यूजर इंटरफेस बनाने के लिए इस्तेमाल की जाने वाली स्टैंडर्ड स्टार्ट पेज फाइल है।
MainPage.xaml.cs	इस कोड-बैक फ़ाइल में एक मानक प्रारंभ पृष्ठ के लिए तर्क होता है। MainPage क्लास PhoneApplicationPage से ली गई है।
ApplicationIcon.png Background.png SplashScreenImage.jpg	डिफ़ॉल्ट आइकन और छवि फ़ाइलें, जिन्हें आप बाद में बदल सकते हैं।

नए पृष्ठ जोड़ना

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

नई आइटम जोड़ें संवाद बॉक्स का उपयोग करके आप अपने प्रोजेक्ट में पेज जोड़ सकते हैं।



जब आप Visual Studio में एक नया Windows Phone अनुप्रयोग प्रोजेक्ट बनाते हैं, तो MainPage नामक एक मानक प्रारंभ पृष्ठ स्वचालित रूप से बनाया जाता है। आप इस पृष्ठ को ले जा सकते हैं या उसका नाम बदल सकते हैं, लेकिन यदि आप ऐसा करते हैं, तो आपको WMAppManifest.xml फ़ाइल में DefaultTask तत्व की NavigationPage संपत्ति को भी बदलना होगा।

पृष्ठ गुण सेट करना

डिफ़ॉल्ट रूप से, पृष्ठ में एप्लिकेशन का नाम और पृष्ठ का नाम होता है। पृष्ठ शीर्षक पृष्ठ के लिए एक वैकल्पिक गैर-स्क्रॉल करने योग्य शीर्षक है। आप इन नामों को XAML व्यू मोड या प्रॉपर्टीज विंडो में बदल सकते हैं।



शीर्षक जानकारी जोड़ने के लिए:

1. डिज़ाइन मोड में, एप्लिकेशन नाम या पृष्ठ का नाम चुनें।
2. XAML दृश्य मोड में या गुण विंडो में, पाठ गुण परिवर्तित करें।

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

एप्लिकेशन बार जोड़ना

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



इंटरफ़ेस डिजाइन सिफारिश:
सामान्य अनुप्रयोग कार्य करने के लिए एप्लिकेशन बार का उपयोग करें। एप्लिकेशन पैनल मेनू में कम बार निष्पादित क्रियाएं करें।

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



एक आवेदन पैनल जोड़ने के लिए:

1. XAML व्यू मोड में, एप्लिकेशन बार सेक्शन को अनइंस्टॉल करें।
2. आवश्यकतानुसार बटन, मेनू आइटम और टेक्स्ट बदलें।

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

< phone:PhoneApplicationPage.ApplicationBar > < shell:ApplicationBar IsVisible ="True" IsMenuEnabled ="True" > < shell:ApplicationBarIconButton IconUri ="/Images/fillup.png" Text ="add fill-up" Click ="FillupButton_Click" IsEnabled ="False" /> < shell:ApplicationBarIconButton IconUri ="/Images/car.png" Text ="add car" Click ="CarButton_Click" /> </ shell:ApplicationBar > </ phone:PhoneApplicationPage.ApplicationBar > * This source code was highlighted with Source Code Highlighter .

1. < phone:PhoneApplicationPage.ApplicationBar > < shell:ApplicationBar IsVisible ="True" IsMenuEnabled ="True" > < shell:ApplicationBarIconButton IconUri ="/Images/fillup.png" Text ="add fill-up" Click ="FillupButton_Click" IsEnabled ="False" /> < shell:ApplicationBarIconButton IconUri ="/Images/car.png" Text ="add car" Click ="CarButton_Click" /> </ shell:ApplicationBar > </ phone:PhoneApplicationPage.ApplicationBar > * This source code was highlighted with Source Code Highlighter .
2. < phone:PhoneApplicationPage.ApplicationBar > < shell:ApplicationBar IsVisible ="True" IsMenuEnabled ="True" > < shell:ApplicationBarIconButton IconUri ="/Images/fillup.png" Text ="add fill-up" Click ="FillupButton_Click" IsEnabled ="False" /> < shell:ApplicationBarIconButton IconUri ="/Images/car.png" Text ="add car" Click ="CarButton_Click" /> </ shell:ApplicationBar > </ phone:PhoneApplicationPage.ApplicationBar > * This source code was highlighted with Source Code Highlighter .
3. < phone:PhoneApplicationPage.ApplicationBar > < shell:ApplicationBar IsVisible ="True" IsMenuEnabled ="True" > < shell:ApplicationBarIconButton IconUri ="/Images/fillup.png" Text ="add fill-up" Click ="FillupButton_Click" IsEnabled ="False" /> < shell:ApplicationBarIconButton IconUri ="/Images/car.png" Text ="add car" Click ="CarButton_Click" /> </ shell:ApplicationBar > </ phone:PhoneApplicationPage.ApplicationBar > * This source code was highlighted with Source Code Highlighter .
4. < phone:PhoneApplicationPage.ApplicationBar > < shell:ApplicationBar IsVisible ="True" IsMenuEnabled ="True" > < shell:ApplicationBarIconButton IconUri ="/Images/fillup.png" Text ="add fill-up" Click ="FillupButton_Click" IsEnabled ="False" /> < shell:ApplicationBarIconButton IconUri ="/Images/car.png" Text ="add car" Click ="CarButton_Click" /> </ shell:ApplicationBar > </ phone:PhoneApplicationPage.ApplicationBar > * This source code was highlighted with Source Code Highlighter .
5. < phone:PhoneApplicationPage.ApplicationBar > < shell:ApplicationBar IsVisible ="True" IsMenuEnabled ="True" > < shell:ApplicationBarIconButton IconUri ="/Images/fillup.png" Text ="add fill-up" Click ="FillupButton_Click" IsEnabled ="False" /> < shell:ApplicationBarIconButton IconUri ="/Images/car.png" Text ="add car" Click ="CarButton_Click" /> </ shell:ApplicationBar > </ phone:PhoneApplicationPage.ApplicationBar > * This source code was highlighted with Source Code Highlighter .
6. < phone:PhoneApplicationPage.ApplicationBar > < shell:ApplicationBar IsVisible ="True" IsMenuEnabled ="True" > < shell:ApplicationBarIconButton IconUri ="/Images/fillup.png" Text ="add fill-up" Click ="FillupButton_Click" IsEnabled ="False" /> < shell:ApplicationBarIconButton IconUri ="/Images/car.png" Text ="add car" Click ="CarButton_Click" /> </ shell:ApplicationBar > </ phone:PhoneApplicationPage.ApplicationBar > * This source code was highlighted with Source Code Highlighter .
7. < phone:PhoneApplicationPage.ApplicationBar > < shell:ApplicationBar IsVisible ="True" IsMenuEnabled ="True" > < shell:ApplicationBarIconButton IconUri ="/Images/fillup.png" Text ="add fill-up" Click ="FillupButton_Click" IsEnabled ="False" /> < shell:ApplicationBarIconButton IconUri ="/Images/car.png" Text ="add car" Click ="CarButton_Click" /> </ shell:ApplicationBar > </ phone:PhoneApplicationPage.ApplicationBar > * This source code was highlighted with Source Code Highlighter .
8. < phone:PhoneApplicationPage.ApplicationBar > < shell:ApplicationBar IsVisible ="True" IsMenuEnabled ="True" > < shell:ApplicationBarIconButton IconUri ="/Images/fillup.png" Text ="add fill-up" Click ="FillupButton_Click" IsEnabled ="False" /> < shell:ApplicationBarIconButton IconUri ="/Images/car.png" Text ="add car" Click ="CarButton_Click" /> </ shell:ApplicationBar > </ phone:PhoneApplicationPage.ApplicationBar > * This source code was highlighted with Source Code Highlighter .

< phone:PhoneApplicationPage.ApplicationBar > < shell:ApplicationBar IsVisible ="True" IsMenuEnabled ="True" > < shell:ApplicationBarIconButton IconUri ="/Images/fillup.png" Text ="add fill-up" Click ="FillupButton_Click" IsEnabled ="False" /> < shell:ApplicationBarIconButton IconUri ="/Images/car.png" Text ="add car" Click ="CarButton_Click" /> </ shell:ApplicationBar > </ phone:PhoneApplicationPage.ApplicationBar > * This source code was highlighted with Source Code Highlighter .

परिषद:
एप्लिकेशन पैनल में, आपके द्वारा जोड़ा गया कोई भी पाठ स्वचालित रूप से निचले मामले में प्रदर्शित होता है।

आवेदन बार प्रतीक

कई एप्लिकेशन पैनल आइकन हैं जो विंडोज फोन डेवलपर टूल के साथ इंस्टॉल किए गए हैं। आप निम्न स्थानों में से एक में ये चिह्न पा सकते हैं:

• 32-बिट ऑपरेटिंग सिस्टम पर: C: \ Program Files \ Microsoft SDKs \ Windows Phone \ v7.0 \ Icons
• 64-बिट ऑपरेटिंग सिस्टम पर: C: \ Program Files (x86) \ Microsoft SDKs \ Windows Phone \ v7.0 \ Icons

यदि आपको अपना स्वयं का एप्लिकेशन पैनी आइकन बनाने की आवश्यकता है, तो आइकन को निम्नलिखित आवश्यकताओं को पूरा करना होगा:

• आकार 48 पिक्सेल 48 पिक्सेल।
• यह पारदर्शी पृष्ठभूमि पर सफेद होना चाहिए।
• इसमें वृत्त चित्र शामिल नहीं हैं, क्योंकि यह अनुप्रयोग पैनल द्वारा प्रदर्शित होता है।

फ़्यूल ट्रैकर ऐप में उपयोग किए जाने वाले ऐप बार आइकन निम्नलिखित हैं।



निम्नलिखित दिखाता है कि एप्लिकेशन बार आइकन एक अंधेरे और हल्के विषय के साथ कैसे दिखते हैं।



एप्लिकेशन पैनल आइकन जोड़ने के लिए:

1. प्रोजेक्ट में आइकन फ़ाइल जोड़ें और सामग्री पर बिल्ड एक्शन सेट करें।
2. XAML कोड में, छवि के सापेक्ष URI के लिए ApplicationBarIconButton तत्व का IconUri गुण सेट करें, जैसा कि निम्नलिखित स्निपेट में दिखाया गया है।

1. < खोल: ApplicationBarIconButton IconUri = "/ छवियाँ / appbar.save.rest.png"
2. पाठ = "कार सहेजें" पर क्लिक करें = "SaveButton_Click" />

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

अगला भाग