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

पिछला हिस्सा

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

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

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

रंग और विषय-वस्तु

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

इनलाइन शैलियों का उपयोग करना

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

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

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

< Button Content ="Button" Height ="72" Background ="{StaticResource PhoneAccentBrush}" Width ="160" /> * This source code was highlighted with Source Code Highlighter .

1. < Button Content ="Button" Height ="72" Background ="{StaticResource PhoneAccentBrush}" Width ="160" /> * This source code was highlighted with Source Code Highlighter .

< Button Content ="Button" Height ="72" Background ="{StaticResource PhoneAccentBrush}" Width ="160" /> * This source code was highlighted with Source Code Highlighter .

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



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



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

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

1. < TextBlock ग्रिड । रो = "0" ग्रिड । कॉलम = "0"
2. शैली = "{StaticResource PhoneTextLargeStyle}"
3. पाठ = "वर्तमान एमपीजी:"
4. आड़ा-तिरछा = "राइट" वर्टिकल ऑलिगमेंट = "सेंटर" />

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

इंटरफ़ेस डिजाइन सिफारिश:
पूंजीकरण की इसी शैली को बनाए रखें।

आप यहां विंडोज फोन के लिए उपलब्ध अंतर्निहित शैलियों और संसाधनों की सूची देख सकते हैं: विंडोज फोन के लिए थीम संसाधन । आप यहाँ मार्कअप एक्सटेंशन के बारे में अधिक जान सकते हैं: XAML ओवरव्यू ।

अपनी खुद की शैली बनाएँ

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

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

1. < ग्रिड। स्रोत >
2. < Style x: Key = "LabelStyle" TargetType = "TextBlock" >
3. < सेटर प्रॉपर्टी = " हॉरिज़ॉन्टल एलाइगमेंट " वैल्यू = "राइट" />
4. < सेटर प्रॉपर्टी = "मार्जिन" मान = "15.5" />
5. </ शैली >
6. < Style x: Key = "ValueStyle" TargetType = "TextBlock" >
7. < सेटर प्रॉपर्टी = "मार्जिन" मान = "15.5" />
8. </ शैली >
9. </ ग्रिड। स्रोत >
11. । । ।
13. < TextBlock ग्रिड । रो = "2" ग्रिड । कॉलम = "0"
14. शैली = "{StaticResource LabelStyle}"
15. पाठ = "तिथि:" > </ TextBlock >
17. < TextBlock ग्रिड । रो = "2" ग्रिड । कॉलम = "1"
18. शैली = "{StaticResource ValueStyle}"
19. पाठ = "{बाइंडिंग फ़िलिपहिस्टोर [0]। दिनांक, कन्वर्टर = {StaticResource StringFormatter}, ConverterParameter = \ {0: d \}}" > </ TextBlock >

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

डेटा टेम्प्लेट

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

अगला भाग