शैलियों का उपयोग करके एक संगत UI बनाएँ
- {नंबरऑफमिनट} मिनट
.NET मल्टी-प्लेटफ़ॉर्म ऐप UI (MAUI) में, संसाधन आपके एक्सटेंसिबल एप्लिकेशन मार्कअप लैंग्वेज (XAML) मार्क-अप में हार्ड-कोडेड, डुप्लिकेट मानों से बचने के लिए बढ़िया हैं, लेकिन उन्हें लागू करना थकाऊ हो सकता है। आप प्रत्येक गुण मान अलग-अलग असाइन करते हैं, जिसके परिणामस्वरूप अव्यवस्थित और वर्बोज़ XAML हो सकता है. यह इकाई आपको दिखाती है कि एकाधिक सेटिंग्स को एक शैली में कैसे समूहित किया जाए, जो आपके कोड को अव्यवस्थित करने और इसे अधिक रखरखाव योग्य बनाने में मदद कर सकता है।
संसाधन आपके XAML को कैसे अव्यवस्थित कर सकते हैं
एक संसाधन एकल संपत्ति के लिए एक मूल्य प्रदान करता है। हालांकि, बहुत सारे संसाधनों का उपयोग करने से वर्बोज़ एक्सएएमएल हो सकता है। मान लीजिए कि आप अपने बटनों के लिए एक अनुकूलित रूप चाहते हैं। आप पहले उन मानों के लिए संसाधन बनाते हैं जिनकी आपको आवश्यकता है. फिर, आप प्रत्येक संसाधन को अपने सभी बटनों पर लागू करते हैं। निम्न कोड दिखाता है कि XAML मार्क-अप दो बटनों के लिए कैसे दिख सकता है।
<Button
Text = "OK"
BackgroundColor = "{StaticResource highlightColor}"
BorderColor = "{StaticResource borderColor}"
BorderWidth = "{StaticResource borderWidth}"
TextColor = "{StaticResource textColor}" />
<Button
Text = "Cancel"
BackgroundColor = "{StaticResource highlightColor}"
BorderColor = "{StaticResource borderColor}"
BorderWidth = "{StaticResource borderWidth}"
TextColor = "{StaticResource textColor}" />
ध्यान दें कि प्रत्येक बटन पर समान पांच गुण कैसे सेट किए गए हैं। संसाधनों का उपयोग उनमें से चार में दोहराए गए, हार्ड-कोडेड मानों की आवश्यकता को हटा देता है। हालाँकि, इस प्रकार का XAML मार्क-अप जल्दी से पढ़ने में कठिन हो जाता है। इसके अतिरिक्त, यदि आप प्रत्येक नियंत्रण के लिए बड़ी संख्या में गुण सेट कर रहे हैं, तो गलती से उनमें से किसी एक को छोड़ना आसान है, जिससे नियंत्रणों की उपस्थिति में विसंगतियां हो जाती हैं। समाधान एक ऐसी शैली बनाना है जो एक ही बार में सभी चार गुणों को असाइन करती है।
एक सेटर क्या है?
सेटर्स प्रमुख घटक हैं जिनका उपयोग आप शैलियाँ बनाने के लिए करते हैं।
एक सेटर एक संपत्ति/मूल्य जोड़ी के लिए एक कंटेनर है। आप एक असाइनमेंट स्टेटमेंट का प्रतिनिधित्व करने के रूप में एक सेटर के बारे में सोच सकते हैं। आप निर्दिष्ट करते हैं कि कौन सा गुण असाइन करना है और लागू करने के लिए मान। आप आमतौर पर अपने XAML मार्क-अप में सेटर ऑब्जेक्ट बनाते हैं। निम्न उदाहरण TextColor गुण के लिए सेटर ऑब्जेक्ट बनाता है।
<Setter Property="TextColor" Value="White" />
आप एक सेटर में मान के लिए एक संसाधन का उपयोग कर सकते हैं, जैसा कि निम्न कोड में दिखाया गया है। यह तकनीक बहुत अच्छी है जब आप कई सेटर्स में एक ही मूल्य का उपयोग करना चाहते हैं।
<Setter Property="TextColor" Value="{StaticResource textColor}" />
नोट
किसी सेटर में आपके द्वारा निर्दिष्ट गुण मान को बाइंडेबल गुण के रूप में लागू किया जाना चाहिए. .NET MAUI में नियंत्रणों पर सभी गुण जो गुण प्रत्यय के साथ समाप्त होते हैं जो गुण बाइंड करने योग्य गुण होते हैं. यदि आप किसी सेटर में TextColor जैसी प्रॉपर्टी का उपयोग करने का प्रयास कर रहे हैं, तो सुनिश्चित करें कि उस नियंत्रण के लिए TextColorProperty नाम की एक संगत बाइंडेबल प्रॉपर्टी है। व्यवहार में, लगभग सभी गुण जिन्हें आप अपने सेटर्स में उपयोग करना चाहते हैं, इस तरह से लागू किए जाते हैं।
एक शैली क्या है?
एक शैली एक विशिष्ट प्रकार के नियंत्रण पर लक्षित सेटर्स का एक संग्रह है। .NET MAUI को एक लक्ष्य प्रकार की आवश्यकता होती है ताकि यह सुनिश्चित कर सके कि आपके सेटर्स में गुण उस प्रकार पर मौजूद हैं।
निम्न कोड एक शैली दिखाता है जो पिछले उदाहरण से चार मानों को जोड़ता है। ध्यान दें कि TargetType बटन पर सेट है, और सेटर्स में सभी गुण बटन वर्ग के सदस्य हैं। आप लेबल के लिए इस शैली का उपयोग नहीं कर सकते, क्योंकि लेबल वर्ग में BorderColor या BorderWidth गुण शामिल नहीं है.
<Style TargetType="Button">
<Setter Property="BackgroundColor" Value="#2A84D3" />
<Setter Property="BorderColor" Value="#1C5F9B" />
<Setter Property="BorderWidth" Value="3" />
<Setter Property="TextColor" Value="White" />
</Style>
एक शैली को परिभाषित करें
आप आमतौर पर शैलियों को किसी ResourceDictionary ऑब्जेक्ट के अंदर संसाधनों के रूप में निर्धारित करते हैं. एक संसाधन शब्दकोश एक ही पृष्ठ पर कई नियंत्रणों में, या यहां तक कि आपके पूरे एप्लिकेशन में शैली का उपयोग करना आसान बनाता है। निम्न कोड दिखाता है कि एक शब्दकोश के अंदर संसाधन के रूप में एक शैली को कैसे परिभाषित किया जाए। ध्यान दें कि शैली को x:Key गुण का उपयोग करके एक नाम दिया गया है। किसी शैली का नामकरण आपको इसे अपने XAML पृष्ठों के भीतर से संदर्भित करने में सक्षम बनाता है।
<ContentPage.Resources>
<Style x:Key="MyButtonStyle" TargetType="Button">
...
</Style>
</ContentPage.Resources>
शैली लागू करना
आप शैली गुण को नाम असाइन करके नियंत्रण के लिए एक शैली अनुलग्न करें। असाइनमेंट प्रत्येक सेटर ऑब्जेक्ट शैली में लक्ष्य नियंत्रण के लिए लागू किया जा करने के लिए कारण बनता है। निम्न कोड दिखाता है कि दो बटन पर बटन शैली कैसे लागू करें।
<Button Text="OK" Style="{StaticResource MyButtonStyle}" />
<Button Text="Cancel" Style="{StaticResource MyButtonStyle}" />
पिछले उदाहरण में, आपने शैली को नियंत्रणों से अनुलग्न करने के लिए StaticResource मार्क-अप एक्सटेंशन का उपयोग किया था. यह तकनीक बहुत अच्छी है जब आपको रनटाइम पर शैली बदलने की आवश्यकता नहीं होती है। लेकिन क्या होगा यदि आप गतिशील विषयों की तरह कुछ लागू करना चाहते हैं, जहां यूआई को बदलने की जरूरत है? इस स्थिति में, आप शैली लोड करने के लिए DynamicResource मार्क-अप एक्सटेंशन का उपयोग कर सकते हैं.
<Button Text="Cancel" Style="{DynamicResource MyButtonStyle}" />
DynamicResource संसाधन शब्दकोश में x:Key गुण के प्रतिस्थापन के लिए सुनता है. यदि आप कोड लिखते हैं जो उसी x:Key मान के साथ ResourceDictionary में एक नई शैली लोड करता है, तो नई शैली स्वचालित रूप से आपके UI पर लागू होती है।
एकाधिक नियंत्रणों के लिए एक अंतर्निहित शैली का उपयोग करें
मान लीजिए कि आपके UI में 50 बटन हैं और आप उन सभी पर एक ही स्टाइल लागू करना चाहते हैं। अब तक हम जो जानते हैं, उसके साथ आपको मैन्युअल रूप से प्रत्येक बटन पर स्टाइल प्रॉपर्टी को असाइन करना होगा। ऐसा करना मुश्किल नहीं है, लेकिन यह अभी भी थकाऊ है।
एक अंतर्निहित शैली एक शैली है जिसे आप एक x:Key पहचानकर्ता दिए बिना संसाधन शब्दकोश में जोड़ते हैं। अस्पष्ट शैलियाँ स्वचालित रूप से निर्दिष्ट TargetType ऑब्जेक्ट के सभी नियंत्रणों पर लागू होती हैं.
निम्नलिखित कोड पिछले उदाहरण को एक अंतर्निहित शैली के रूप में घोषित करता है। यह शैली पृष्ठ के प्रत्येक बटन पर लागू होती है.
<ContentPage.Resources>
<Style TargetType="Button">
<Setter Property="BackgroundColor" Value="Blue" />
<Setter Property="BorderColor" Value="Navy" />
...
</Style>
</ContentPage.Resources>
महत्वपूर्ण
नियंत्रणों के लिए अंतर्निहित शैलियों के मिलान के लिए निर्दिष्ट TargetTypeसे सटीक मिलान की आवश्यकता होती है. लक्ष्य प्रकार से इनहेरिट किए गए नियंत्रण शैलियाँ प्राप्त नहीं करते हैं. इनहेरिट किए गए नियंत्रणों को प्रभावित करने के लिए, आप शैली निर्धारित करते समय Style.ApplyToDerivedTypes विशेषता को True पर सेट कर सकते हैं. उदाहरण के लिए, बटन पर एक शैली लागू करने के लिए टाइप करें और यह आपके किसी भी बटन को प्रभावित करता है जो बटन से विरासत में मिला है (जैसे कि एक ImageButton, RadioButton, या आपके द्वारा बनाया गया एक कस्टम प्रकार), आप इस तरह की शैली का उपयोग कर सकते हैं।
<ContentPage.Resources>
<Style TargetType="Button"
ApplyToDerivedTypes="True">
<Setter Property="BackgroundColor" Value="Black" />
</Style>
</ContentPage.Resources>
शैली को ओवरराइड करें
आप नियंत्रणों के लिए डिफ़ॉल्ट मानों का एक सेट प्रदान करने के रूप में एक शैली के बारे में सोच सकते हैं। एक मौजूदा शैली आपकी आवश्यकताओं के करीब हो सकती है, लेकिन इसमें एक या दो सेटर शामिल हैं जिन्हें आप नहीं चाहते हैं। उस स्थिति में, आप शैली लागू कर सकते हैं और फिर गुणों को सीधे सेट करके मान को ओवरराइड कर सकते हैं। स्पष्ट सेटिंग शैली के बाद लागू की जाती है, इसलिए यह शैली से मान को ओवरराइड करेगी।
मान लीजिए कि आप अपने पृष्ठ पर कई बटनों के लिए निम्न शैली का उपयोग करना चाहते हैं।
<Style x:Key="MyButtonStyle" TargetType="Button">
<Setter Property="BackgroundColor" Value="Blue" />
<Setter Property="BorderRadius" Value="10" />
<Setter Property="BorderWidth" Value="3" />
</Style>
यह शैली रद्द करें को छोड़कर आपके सभी बटनों के लिए काम करती है, जिसके लिए लाल पृष्ठभूमि की आवश्यकता होती है। आप रद्द करें बटन के लिए उसी शैली का उपयोग कर सकते हैं जब तक कि आप सीधे BackgroundColor गुण भी सेट करते हैं। निम्न कोड दिखाता है कि रंग सेटिंग को ओवरराइड कैसे करें।
<Button
Text="Cancel"
Style="{StaticResource MyButtonStyle}"
BackgroundColor="Red"
... />
पूर्वज प्रकार को लक्षित करें
मान लीजिए कि आप अपने बटन और लेबल के लिए एक कस्टम पृष्ठभूमि रंग चाहते हैं। आप प्रत्येक प्रकार के लिए अलग-अलग शैलियाँ बना सकते हैं, या आप VisualElement पर सेट TargetType साथ एक शैली बना सकते हैं। यह तकनीक काम करती है क्योंकि VisualElementबटन और लेबलदोनों के लिए एक बेस क्लास है।
निम्न कोड एक शैली दिखाता है जो एक आधार वर्ग को लक्षित करता है जिसे दो अलग-अलग व्युत्पन्न प्रकारों पर लागू किया जा रहा है।
<Style x:Key="MyVisualElementStyle" TargetType="VisualElement">
<Setter Property="BackgroundColor" Value="#2A84D3" />
</Style>
...
<Button Style="{StaticResource MyVisualElementStyle}" ... />
<Label Style="{StaticResource MyVisualElementStyle}" ... />
यह उदाहरण x:Key का उपयोग करके शैली की पहचान करता है और नियंत्रण इसे स्पष्ट रूप से लागू करते हैं. एक अंतर्निहित शैली यहां काम नहीं करती है क्योंकि एक अंतर्निहित शैली के लिए लक्ष्य प्रकार नियंत्रण प्रकार के लिए एक सटीक मिलान होना चाहिए।
किसी शैली से इनहेरिट करने के लिए BasedOn का उपयोग करें
मान लीजिए कि आप अपने UI के लिए एक समेकित रूप बनाना चाहते हैं। आप तय करते हैं कि सभी नियंत्रणों को एक संगत पृष्ठभूमि रंग का उपयोग करना चाहिए। पृष्ठभूमि रंग सेटिंग आपकी एक से अधिक शैलियों में प्रकट होने की संभावना है. निम्नलिखित कोड एक दोहराया सेटर के साथ दो शैलियों को दिखाता है।
<Style x:Key="MyButtonStyle" TargetType="Button">
<Setter Property="BackgroundColor" Value="Blue" />
<Setter Property="BorderColor" Value="Navy" />
<Setter Property="BorderWidth" Value="5" />
</Style>
<Style x:Key="MyEntryStyle" TargetType="Entry">
<Setter Property="BackgroundColor" Value="Blue" />
<Setter Property="TextColor" Value="White" />
</Style>
आप डुप्लिकेट सेटर को आधार शैली में कारक बनाने के लिए शैली विरासत का उपयोग कर सकते हैं। व्युत्पन्न शैली बनाने के लिए, आधार शैली को संदर्भित करने के लिए इसके BasedOn गुण सेट करें। नई शैली अपनी आधार शैली से सभी सेटर्स को विरासत में मिली है। व्युत्पन्न शैली नए सेटर्स भी जोड़ सकती है या एक विरासत में मिले सेटर को एक अलग मूल्य के साथ बदल सकती है।
निम्न कोड पिछले उदाहरण से शैलियों को एक पदानुक्रम में पुन: फैक्टर दिखाता है। सामान्य सेटर दोहराया जाने के बजाय केवल आधार शैली में दिखाई देता है। ध्यान दें कि आप आधार शैली को देखने के लिए StaticResource मार्क-अप एक्सटेंशन का उपयोग करें। आप इस स्थिति में DynamicResource का उपयोग नहीं कर सकते।
<Style x:Key="MyVisualElementStyle" TargetType="VisualElement">
<Setter Property="BackgroundColor" Value="Blue" />
</Style>
<Style x:Key="MyButtonStyle" TargetType="Button" BasedOn="{StaticResource MyVisualElementStyle}">
<Setter Property="BorderColor" Value="Navy" />
<Setter Property="BorderWidth" Value="5" />
</Style>
<Style x:Key="MyEntryStyle" TargetType="Entry" BasedOn="{StaticResource MyVisualElementStyle}">
<Setter Property="TextColor" Value="White" />
</Style>
आधार और व्युत्पन्न शैलियों का TargetType मान संगत होना चाहिए. शैलियों संगत होने के लिए, वे या तो समान TargetType गुण होना आवश्यक है, या व्युत्पन्न शैली का TargetType आधार शैली के TargetType का वंशज है।