विंडोज फोन 7 के लिए शुरू से आखिर तक एक एप्लिकेशन बनाएं। भाग 7, सालगिरह। छवियाँ और प्रतीक जोड़ना

पिछला हिस्सा

यदि आप अपने एप्लिकेशन को बाकी हिस्सों से अलग बनाना चाहते हैं, तो आपको अपनी स्वयं की छवियां और आइकन जोड़ना चाहिए।

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

• छवियों और आइकन के लिए डिज़ाइन टिप्स।
• पेज में इमेज कैसे जोड़े।
• पेज बैकग्राउंड के रूप में इमेज कैसे जोड़ें।
• स्प्लैश स्क्रीन (स्प्लैश स्क्रीन) पर छवि कैसे बदलें।
• एप्लिकेशन आइकन कैसे जोड़ें।
• एप्लिकेशन टाइल आइकन कैसे जोड़ें।

चित्र और प्रतीक के लिए डिज़ाइन टिप्स

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

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

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

पृष्ठ पर एक छवि जोड़ना

किसी पृष्ठ पर छवियां प्रदर्शित करने के लिए, आप अपने प्रोजेक्ट में एक छवि निर्दिष्ट कर सकते हैं या रन टाइम पर छवि को बांध सकते हैं।

किसी पृष्ठ पर एक छवि जोड़ने के लिए:

1. प्रोजेक्ट में JPG या PNG छवि जोड़ें और सामग्री पर बिल्ड एक्शन सेट करें।
2. पेज पर एक छवि नियंत्रण जोड़ें।
3. छवि नियंत्रण के स्रोत गुण को छवि फ़ाइल के स्थान पर सेट करें।

XAML कोड के निम्नलिखित स्निपेट से पता चलता है कि समाधान एक्सप्लोरर (समाधान एक्सप्लोरर) में छवियाँ फ़ोल्डर में myPicture.jpg नाम की छवि कैसे प्रदर्शित की जाती है।

< Image Source ="/Images/myPicture.jpg" > * This source code was highlighted with Source Code Highlighter .

1. < Image Source ="/Images/myPicture.jpg" > * This source code was highlighted with Source Code Highlighter .

< Image Source ="/Images/myPicture.jpg" > * This source code was highlighted with Source Code Highlighter .

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

1. < छवि ऊँचाई = "75" चौड़ाई = "75" मार्जिन = "15" खिंचाव = "वर्दी वर्दी"
2. स्रोत = "{बाइंडिंग पिक्चर}" वर्टिकल एलाइमेंट = "टॉप" />

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

पृष्ठ पर पृष्ठभूमि छवि जोड़ना

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

• एक छवि चुनें जो प्रकाश और अंधेरे दोनों विषयों के साथ समान रूप से अच्छी तरह से प्रदर्शित करता है।
• JPG या PNG फ़ाइल स्वरूपों का उपयोग करें। यदि आप छवि पारदर्शिता का उपयोग करने का इरादा रखते हैं, तो आपको PNG फ़ाइल का उपयोग करना चाहिए।

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

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



निम्न छवि दिखाती है कि पृष्ठ पर पृष्ठभूमि की छवि अंधेरे और हल्के विषयों पर कैसे दिखती है। चूंकि इसकी एक पारदर्शी पृष्ठभूमि है, पाठ दोनों विषयों पर दिखाई देता है।



पृष्ठ पर पृष्ठभूमि छवि जोड़ने के लिए:

1. प्रोजेक्ट में चित्र जोड़ें और बिल्ड एक्शन को सामग्री पर सेट करें।
2. एक ImageBrush संसाधन बनाएँ और छवि के सापेक्ष URI (यूनिफ़ॉर्म रिसोर्स आइडेंटिफ़ायर) के लिए ImageSource गुण सेट करें। आपको छवि के लिए एक कुंजी भी सेट करनी होगी।
   यदि आप PNG फ़ाइल का उपयोग कर रहे हैं, तो आप वैकल्पिक रूप से यह निर्दिष्ट कर सकते हैं कि आप निर्दिष्ट की गई जगह को फिट करने के लिए छवि का आकार कैसे बदलना चाहते हैं, यह निर्दिष्ट करने के लिए आप 0 और 1 और स्ट्रेच गुण के बीच अपारदर्शिता गुण सेट कर सकते हैं।
   फ्यूल ट्रैकर एप्लिकेशन के लिए, ImageBrush को App.xaml में घोषित किया गया है, क्योंकि यह ब्रश सभी पृष्ठों के लिए उपयोग किया जाता है।
   

   1. < ImageBrush x: Key = "गैसब्रश" ImageSource = "/ Images / gasPump.png" Opacity = "। 1" Stretch = "UniformToFill" />।

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

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

   1. <! - LayoutRoot रूट ग्रिड है जहां सभी पृष्ठ सामग्री रखी गई है ->
   2. < ग्रिड x: नाम = "लेआउटरूट" पृष्ठभूमि = "{StaticResource गैसब्रश}" >

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

   आप गुण विंडो का उपयोग करके ImageBrush भी लगा सकते हैं, जैसा कि निम्नलिखित छवि में दिखाया गया है।
   
   
   
   

स्प्लैश स्क्रीन में एक छवि जोड़ना

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



स्प्लैश स्क्रीन में अपनी स्वयं की छवि जोड़ने के लिए, अपने JPG फ़ाइल के साथ SplashScreenImage.jpg को 480 के 800 पिक्सेल के आकार के साथ बदलें। अपने एप्लिकेशन के स्क्रीनशॉट का उपयोग करना एक समान छवि बनाने का सबसे तेज़ तरीका है।

प्रमाणन की आवश्यकता:
आपके एप्लिकेशन को लॉन्च के बाद 5 सेकंड के भीतर पहली स्क्रीन प्रदान करनी चाहिए। स्प्लैश स्क्रीन का उपयोग करने से आपको इस आवश्यकता को पूरा करने में मदद मिलेगी।

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

प्रमाणन की आवश्यकता:
जब आप एप्लिकेशन के पहले पृष्ठ पर "बैक" बटन पर क्लिक करते हैं, तो एप्लिकेशन को बाहर निकलना चाहिए।

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

एप्लिकेशन आइकन वह छवि है जो आपके एप्लिकेशन के लिए फ़ोन की एप्लिकेशन सूची में दिखाई देती है। एप्लिकेशन आइकन को निम्नलिखित आवश्यकताओं को पूरा करना चाहिए:

• पीएनजी प्रारूप
• 62 x 62 पिक्सेल

नीचे ईंधन ट्रैकर के लिए आवेदन आइकन है।



निम्नलिखित दिखाता है कि एप्लिकेशन सूची में एप्लिकेशन आइकन कैसा दिखता है।



एप्लिकेशन आइकन सेट करने के लिए:

1. प्रोजेक्ट में एक आइकन जोड़ें और सामग्री पर बिल्ड एक्शन सेट करें।
2. प्रोजेक्ट डिज़ाइनर में, एप्लिकेशन टैब पर, आइकन ड्रॉप-डाउन सूची में अपना एप्लिकेशन आइकन निर्दिष्ट करें।
   
   
   
   इसके अलावा, आप आवेदन चिह्न का चयन करने के लिए WMAppManifest.xml फ़ाइल में IconPath तत्व को बदल सकते हैं, जैसा कि निम्नलिखित मार्कअप टुकड़े में दिखाया गया है।
   

   1. < IconPath IsRelative = "सत्य" IsResource = "false" > gasIcon.png </ IconPath >

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

एक एप्लिकेशन टाइल आइकन जोड़ना

एक एप्लिकेशन टाइल आपके एप्लिकेशन का एक प्रतिनिधित्व है जो तब प्रकट होता है जब उपयोगकर्ता आपके आवेदन को स्टार्ट स्क्रीन पर रखते हैं।

आवेदन के टाइल आइकन को निम्नलिखित आवश्यकताओं को पूरा करना चाहिए:

• पीएनजी प्रारूप
• 173 x 173 पिक्सेल

नीचे ईंधन ट्रैकर ऐप के लिए टाइल आइकन है।



निम्न दिखाता है कि प्राथमिक रंग हरा होने पर एप्लिकेशन का टाइल आइकन कैसा दिखता है।



आवेदन का टाइल आइकन सेट करने के लिए:

1. प्रोजेक्ट में एक आइकन जोड़ें और सामग्री पर बिल्ड एक्शन सेट करें।
2. प्रोजेक्ट डिज़ाइनर में, एप्लिकेशन टैब पर, पृष्ठभूमि छवि ड्रॉप-डाउन सूची में अपना टाइल आइकन निर्दिष्ट करें।
   
   
   
   इसके अलावा, आप एप्लिकेशन आइकन का चयन करने के लिए WMAppManifest.xml फ़ाइल में BackgroundImageURI तत्व को बदल सकते हैं, जैसा कि निम्नलिखित मार्कअप टुकड़ा में दिखाया गया है।
   

   1. < PrimaryToken TokenID = "फ्यूलट्रैकर टोकेन" TaskName = "_ default" >
   2. < TemplateType5 >
   3. < BackgroundImageURI IsRelative = "सत्य"
   4. IsResource = "false" > gasTileIcon.png </ BackgroundImageURI >
   5. < गणना > 0 </ गणना >
   6. < शीर्षक > ईंधन ट्रैकर </ शीर्षक >
   7. </ TemplateType5 >
   8. </ PrimaryToken >

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

अगला भाग