सिल्वरलाइट - क्विक गाइड

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

सिल्वरलाइट क्या है

सिल्वरलाइट एक ब्राउज़र प्लग-इन है, जो समृद्ध इंटरनेट अनुप्रयोगों के निर्माण के लिए बनाया गया है; ब्राउज़र में चलने वाले अनुप्रयोग सामान्य वेब अनुप्रयोगों की तरह होते हैं, लेकिन जो उपयोगकर्ता इंटरफ़ेस को आगे बढ़ाने की कोशिश करते हैं, जहां HTML जा सकते हैं। उदाहरण के लिए,

  • सिल्वरलाइट समृद्ध, ब्राउज़र-होस्ट किए गए अनुप्रयोगों के निर्माण के लिए एक रूपरेखा है जो विभिन्न प्रकार के ऑपरेटिंग सिस्टम पर चलते हैं।

  • यह HTML के साथ सह-अस्तित्व में भी हो सकता है। इसलिए, सिल्वरलाइट एक मौजूदा वेब एप्लिकेशन को बढ़ा सकता है।

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

  • महत्वपूर्ण हिस्सा यह है कि सिल्वरलाइट प्लग-इन HTML और जावास्क्रिप्ट के पारंपरिक मिश्रण की तुलना में अधिक समृद्ध वातावरण प्रदान करता है जो सामान्य वेब पेजों को अधिकार देता है।

  • आप वीडियो प्ले करने वाले सिल्वरलाइट पेज बना सकते हैं, हार्डवेयर में 3 डी ग्राफिक्स त्वरित कर सकते हैं, और वेक्टर एनिमेशन का उपयोग कर सकते हैं।

एक डेवलपर के दृष्टिकोण से, सिल्वरलाइट की सबसे दिलचस्प विशेषता यह है कि यह आपके वेब एप्लिकेशन के क्लाइंट पक्ष में .NET फ्रेमवर्क प्रोग्रामिंग मॉडल लाता है।

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

  • आप C # या Visual Basic .NET में लिख सकते हैं, और वेब ब्राउज़र में चलने वाले कोड पर .NET फ्रेमवर्क क्लास लाइब्रेरी सुविधाओं का उपयोग कर सकते हैं।

  • सिल्वरलाइट यूजर इंटरफेस, खुद विंडोज प्रेजेंटेशन फाउंडेशन (WPF) के लिए बहुत समान मॉडल का उपयोग करते हैं, जो कि पूर्ण डेस्कटॉप .NET फ्रेमवर्क में यूजर इंटरफेस फ्रेमवर्क है।

  • यदि आप WPF जानते हैं, तो सिल्वरलाइट सीखना आसान है। सिल्वरलाइट .NET की तुलना में बहुत छोटा डाउनलोड है। यह आकार का लगभग दसवां हिस्सा है, इसलिए केवल क्लास लाइब्रेरी का एक सबसेट मौजूद है, और WPF के मॉडल के लिए विभिन्न निहितार्थ बनाए गए हैं।

  • कम पैमाने के बावजूद, अनुभवी .NET डेवलपर्स सिल्वरलाइट में घर पर तुरंत महसूस करेंगे।

प्लेटफ़ॉर्म और ब्राउज़र

सिल्वरलाइट द्वारा समर्थित प्लेटफॉर्म और ब्राउज़र हैं -

खिड़कियाँ

  • सिल्वरलाइट विंडोज का समर्थन करता है, जैसा कि आप Microsoft उत्पाद की अपेक्षा करेंगे। इसके लिए Windows XP सर्विस पैक 2 को कम से कम या हाल ही में विंडोज के संस्करणों की आवश्यकता है।

  • पुराने संस्करण पूरी तरह से समर्थित नहीं हैं। उदाहरण के लिए, सिल्वरलाइट विंडोज एमई पर बिल्कुल नहीं चलेगा, और विंडोज 2000 में सीमित समर्थन है।

  • ब्राउज़रों के लिए, सिल्वरलाइट Microsoft के अपने इंटरनेट एक्सप्लोरर का समर्थन करता है, निश्चित रूप से, और यह फ़ायरफ़ॉक्स और Google क्रोम संस्करण 4 का समर्थन करता है।

  • मोटे तौर पर, सिल्वरलाइट आम वेब ब्राउज़र प्लग-इन एपीआई का समर्थन करता है। यह आधिकारिक रूप से समर्थित सूची की तुलना में ब्राउज़रों की एक विस्तृत श्रृंखला में काम करता है।

मैक

  • सिल्वरलाइट मैक ओएस 10 का समर्थन करता है, हालांकि सिल्वरलाइट संस्करण 2 या बाद में केवल इंटेल-आधारित मैक पर चलता है।

  • आधुनिक मैक पर, फ़ायरफ़ॉक्स और सफारी दोनों समर्थित हैं।

लिनक्स

  • माइक्रोसॉफ्ट का अपना सिल्वरलाइट प्लग-इन लिनक्स पर नहीं चलता है, लेकिन मोनो ओपन सोर्स प्रोजेक्ट में मूनलाइट नामक एक ऑफशूट है, जो कि लिनक्स पर चलने वाला सिल्वरलाइट संगत प्लग-इन है।

  • फ़ायरफ़ॉक्स में चाँदनी चलती है, और दिलचस्प रूप से हमेशा स्टैंडअलोन मोड में चलने में सक्षम है।

  • मोनो प्रोजेक्ट के कारण पहली बार में मूनलाइट का निर्माण करने का निर्णय लिया गया था, उन्होंने सोचा कि सिल्वरलाइट उपयोगकर्ता इंटरफ़ेस विजेट बनाने के लिए एक उपयोगी तकनीक होगी जो डेस्कटॉप पर चलती है।

Microsoft Silverlight अनुप्रयोग विकास के लिए दो महत्वपूर्ण उपकरण प्रदान करता है। वे हैं -

  • दृश्य स्टूडियो
  • अभिव्यक्ति मिश्रण

वर्तमान में, दोनों उपकरण सिल्वरलाइट प्रोजेक्ट बना सकते हैं, लेकिन तथ्य यह है कि विज़ुअल स्टूडियो डेवलपर्स द्वारा अधिक उपयोग किया जाता है जबकि ब्लेंड अभी भी डिजाइनरों द्वारा अधिक बार उपयोग किया जाता है। Microsoft दृश्य स्टूडियो का एक निःशुल्क संस्करण प्रदान करता है, जिसे से डाउनलोड किया जा सकता हैhttps://www.visualstudio.com। इस ट्यूटोरियल के लिए, हम ज्यादातर विजुअल स्टूडियो का उपयोग करेंगे।

इंस्टालेशन

Step 1- सिल्वरलाइट डाउनलोड होने के बाद इंस्टॉलर को चलाएं। निम्नलिखित संवाद बॉक्स प्रदर्शित किया जाएगा।

Step 2 - क्लिक करें Install बटन और यह स्थापना प्रक्रिया शुरू कर देगा।

Step 3 - एक बार Sivelight सफलतापूर्वक स्थापित हो जाने के बाद, आपको निम्नलिखित डायलॉग बॉक्स दिखाई देगा।

Step 4 - इस संवाद बॉक्स को बंद करें और यदि आवश्यक हो तो अपने कंप्यूटर को पुनरारंभ करें।

Step 5 - अब खोलें Visual studio वहाँ से Startमेनू, जो नीचे दिखाया गया डायलॉग बॉक्स खोलेगा। पहली बार घूरते हुए, तैयारी के लिए कुछ समय लगेगा।

Step 6 - इसके बाद, आप विजुअल स्टूडियो की मुख्य विंडो देखेंगे।

Step 7- अब सिल्वरलाइट एप्लिकेशन के साथ शुरू करने के लिए, आपको अपनी मशीन पर सिल्वरलाइट डेवलपर टूल भी इंस्टॉल करना होगा। नवीनतम सिल्वरलाइट डेवलपर टूल को डाउनलोड और इंस्टॉल करेंhttp://silverlight.dlservice.microsoft.com/download/8/E/7/8E7D9B4B-2088-4AED8356-20E65BE3EC91/40728.00/Silverlight_Developer_x64.exe

Step 8 - क्लिक करें Install। स्थापना के लिए कुछ समय लगेगा।

Step 9 - इंस्टॉलेशन पूरा होने के बाद, आपको निम्न संदेश दिखाई देगा।

Step 10- अब आप अपना पहला सिल्वरलाइट एप्लिकेशन बनाने के लिए तैयार हैं। क्लिकClose।

इस अध्याय में, हम सिल्वरलाइट के कार्यशील उदाहरण को देखेंगे। हमें दो चीजें चाहिए -

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

  • दूसरी चीज़ जो हमें चाहिए वह है सिल्वरलाइट सामग्री। यह ट्यूटोरियल सिल्वरलाइट के लिए .NET प्रोग्रामिंग मॉडल पर केंद्रित होगा। हम एक संकलित सिल्वरलाइट एप्लीकेशन बनाएंगे जिसमें XAML का मिश्रण होगा, जिस मॉकअप भाषा का उपयोग हम सिल्वरलाइट यूजर इंटरफेस और C # में लिखे .NET कोड को परिभाषित करने के लिए करते हैं।

एक वेब पेज बनाएँ

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

Step 1 - खोलें Visual Studio। दबाएंFile मेनू, इंगित करें New और फिर क्लिक करें Project।

Step 2 - ए New Projectडायलॉग बॉक्स खुलेगा। के अंतर्गतTemplates, चुनते हैं Visual C# और फिर click Silverlight। दाएँ फलक में, Silverlight अनुप्रयोग चुनें।

अपनी परियोजना को बचाने के लिए एक प्रोजेक्ट नाम और अपनी हार्ड ड्राइव पर एक स्थान दर्ज करें और फिर क्लिक करें OK परियोजना बनाने के लिए।

सिल्वरलाइट परियोजना स्वयं सिल्वरलाइट सामग्री का निर्माण करने जा रही है, और यह सामग्री कई लोगों के बीच सिर्फ एक संपत्ति है जो पूरे वेब एप्लिकेशन को बनाने जा रही है।

क्लिक OK।

Step 3 - जाँच करें Host the Silverlight application checkbox। डिफ़ॉल्ट ASP.NET वेब अनुप्रयोग प्रोजेक्ट है।

Step 4- MS-Visual Studio ने दो प्रोजेक्ट बनाए हैं, सिल्वरलाइट प्रोजेक्ट और एक ASP.NET वेब एप्लिकेशन। अब, हमें ASP.NET वेब एप्लिकेशन की आवश्यकता है। आप इसमें देख सकते हैंSolution Explorer नीचे दिखाए अनुसार।

कुछ भी जो HTTP के माध्यम से सामग्री की सेवा कर सकता है, लेकिन यह है Visual Studio, और यह ASP.NET वेब तकनीक को समझता है, इसलिए यह हमें देता है।

यह प्रदर्शित करने के लिए कि सिल्वरलाइट किसी विशेष सर्वर-साइड तकनीक पर निर्भर नहीं है, हम इसे हटा दें .aspx फ़ाइल, केवल सादे स्थिर HTML फ़ाइल को छोड़कर।

Step 5- राइट-क्लिक करें FirstExampleTestpage.aspx। विकल्पों की सूची से, क्लिक करेंDelete।

Step 6 - सेट करें FirstExampleTestPage.html के रूप में Start पृष्ठ।

MainPage.xamlफ़ाइल सिल्वरलाइट सामग्री के लिए उपयोगकर्ता इंटरफ़ेस को परिभाषित करता है। या तो आप सीधे XAML कोड लिख सकते हैं या आप भी उपयोग कर सकते हैंToolbox विभिन्न UI तत्वों को खींचने और छोड़ने के लिए।

Step 7 - नीचे दिए गए में एक सरल कोड है MainPage.xaml जिसमें ए Button और एक TextBlock अंदर परिभाषित कर रहे हैं StackPanel।

<UserControl x:Class = "FirstExample.MainPage" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   xmlns:d = "http://schemas.microsoft.com/expression/blend/2008" 
   xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006" 
   mc:Ignorable = "d" 
   d:DesignHeight = "300" d:DesignWidth = "400">  
   
   <Grid x:Name = "LayoutRoot" Background = "White"> 
      <StackPanel> 
         <TextBlock x:Name = "TextMessage"  
            Text = "Hello World!"  
            Margin = "5">
         </TextBlock> 
			
         <Button x:Name = "ClickMe"  
            Click = "ClickMe_Click"  
            Content = "Click Me!"  
            Margin = "5"> 
         </Button> 
			
      </StackPanel> 
   </Grid> 
	
</UserControl>

Step 8 - यह उदाहरण मानता है कि आपने नाम से एक ईवेंट-हैंडलिंग विधि बनाई है ClickMe_Click। यहाँ है कि यह कैसा दिखता हैMainPage.xaml.cs फ़ाइल।

using System.Windows; 
using System.Windows.Controls;
  
namespace FirstExample { 

   public partial class MainPage : UserControl { 
	
      public MainPage() { 
         InitializeComponent(); 
      } 
	  
      private void ClickMe_Click(object sender, RoutedEventArgs e) { 
         TextMessage.Text = "Congratulations! you have created your first Silverlight Applicatoin"; 
      } 
   } 
}

Step 9 - सिल्वरलाइट एप्लिकेशन को किसी भी स्थापित ब्राउज़र पर चलाया जा सकता है।

Step 10 - जब उपरोक्त कोड संकलित और निष्पादित किया जाता है, तो आपको निम्नलिखित वेबपेज दिखाई देगा।

Step 11 - अब, जब आप क्लिक करें Click Me बटन, यह में पाठ को अद्यतन करेगा TextBlock जैसा की नीचे दिखाया गया।

हम आपको कुछ और यूआई तत्वों को जोड़कर उपरोक्त उदाहरण को निष्पादित करने की सलाह देते हैं।

सिल्वरलाइट के साथ काम करते समय आपका सामना करने वाली पहली चीजों में से एक XAML है। XAML एक्स्टेंसिबल एप्लिकेशन मार्कअप लैंग्वेज के लिए खड़ा है। यह XML पर आधारित एक सरल और घोषित भाषा है।

  • XAML में, पदानुक्रमित संबंधों के साथ किसी ऑब्जेक्ट के गुण बनाना, आरंभ करना और सेट करना बहुत आसान है।

  • यह मुख्य रूप से GUI डिजाइन करने के लिए उपयोग किया जाता है।

  • इसका उपयोग अन्य उद्देश्यों के लिए भी किया जा सकता है, उदाहरण के लिए, वर्कफ़्लो नींव में वर्कफ़्लो घोषित करने के लिए।

बेसिक सिंटेक्स

जब आप एक नया सिल्वरलाइट प्रोजेक्ट बनाते हैं, तो आप डिफ़ॉल्ट रूप से कुछ XAML कोड देखेंगे MainPage.xaml जैसा की नीचे दिखाया गया।

<UserControl x:Class = "FirstExample.MainPage" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   xmlns:d = "http://schemas.microsoft.com/expression/blend/2008" 
   xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006" 
   mc:Ignorable = "d" 
   d:DesignHeight = "300" d:DesignWidth = "400"> 
	
   <Grid x:Name = "LayoutRoot" Background = "White"> 
         
   </Grid> 
	
</UserControl>

आप देख सकते हैं कि ऊपर दी गई XAML फाइल में विभिन्न प्रकार की जानकारी का उल्लेख है; उन सभी को संक्षेप में नीचे दी गई तालिका में वर्णित किया गया है।

जानकारी विवरण
<UserControl एक नए नियंत्रण को परिभाषित करने के लिए आधार वर्ग प्रदान करता है जो मौजूदा नियंत्रणों को अलग करता है और अपना तर्क प्रदान करता है।
x: कक्षा = "FirstExample.MainPage" यह एक आंशिक वर्ग घोषणा है, जो मार्कअप को उस आंशिक वर्ग कोड के पीछे जोड़ता है, जो इसमें परिभाषित है।
xmlns = "http://schemas.microsoft.com / winfx / 2006 / xaml / प्रस्तुति" सिल्वरलाइट क्लाइंट / फ्रेमवर्क के लिए डिफ़ॉल्ट XAML नेमस्पेस मैप करें।
xmlns: x = "http: //schemas.microsoft.c om / winfx / 2006 / xaml" XAML भाषा के लिए XAML नामस्थान, जो इसे x: उपसर्ग में मैप करता है।
xmlns: d = "http://schemas.microsoft.com / अभिव्यक्ति / मिश्रण / 2008" XAML नाम स्थान डिज़ाइनर समर्थन के लिए है, विशेष रूप से Microsoft Visual Studio और Microsoft अभिव्यक्ति ब्लेंड के XAML डिज़ाइन सतहों में डिज़ाइनर समर्थन।
xmlns: mc = "http: //schemas.openxmlforma ts.org/markup-compatit/2006" इंगित करता है और XAML पढ़ने के लिए एक मार्कअप संगतता मोड का समर्थन करता है।
> जड़ के वस्तु तत्व का अंत।
<ग्रिड> </ ग्रिड> ये एक खाली ग्रिड ऑब्जेक्ट के शुरुआती और समापन टैग हैं।
</ UserControl> वस्तु तत्व को बंद करना।

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

  • एक वस्तु तत्व का सिंटैक्स एक बाएं कोण ब्रैकेट (<) के साथ शुरू होता है, जिसके बाद एक ऑब्जेक्ट का नाम होता है, जैसे बटन।

  • उस वस्तु तत्व के गुणों और विशेषताओं को परिभाषित किया गया है।

  • ऑब्जेक्ट तत्व को आगे की ओर स्लैश (/) द्वारा बंद किया जाना चाहिए, जिसके तुरंत बाद एक समकोण कोष्ठक (>) होगा।

बिना किसी बाल तत्व के एक साधारण वस्तु का उदाहरण नीचे दिखाया गया है।

<Button/>

कुछ विशेषताओं के साथ एक वस्तु तत्व का उदाहरण -

<Button Content = "Click Me" Height = "30" Width = "60"/>

गुणों को परिभाषित करने के लिए एक वैकल्पिक सिंटैक्स का उदाहरण (संपत्ति तत्व सिंटैक्स) -

<Button> 
   <Button.Content>Click Me</Button.Content> 
   <Button.Height>30</Button.Height> 
   <Button.Width>60</Button.Width> 
</Button>

बाल तत्व के साथ एक वस्तु का उदाहरण: StackPanel में बाल तत्व के रूप में टेक्स्टब्लॉक है।

<StackPanel Orientation = "Horizontal"> 
   <TextBlock Text = "Hello"/> 
</StackPanel/>

क्यों चांदी में XAML

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

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

  • यह वीडियो और ऑडियो प्रदान करने के लिए तत्व भी प्रदान करता है।

  • इसमें सरल स्वरूपित पाठ समर्थन है, और आप किसी भी तत्व को एनिमेट कर सकते हैं। यदि आप WPF जानते हैं, तो यह सुविधा सेट आपके लिए परिचित होगा।

  • एक महत्वपूर्ण बिंदु, आप WPF XAML नहीं ले सकते हैं और इसे सिल्वरलाइट में उपयोग कर सकते हैं।

  • हालांकि समानताएं हैं, आप कई छोटे अंतर भी पाएंगे।

XAML और कोड के पीछे

XAML उपयोगकर्ता इंटरफ़ेस की उपस्थिति और संरचना को परिभाषित करता है। हालाँकि, यदि आप चाहते हैं कि आपका एप्लिकेशन उपयोगकर्ता के साथ बातचीत करने के दौरान कुछ उपयोगी कर सके, तो आपको कुछ कोड की आवश्यकता होगी।

  • प्रत्येक XAML फ़ाइल आमतौर पर एक स्रोत कोड फ़ाइल से जुड़ी होती है, जिसे हम पीछे के कोड के रूप में संदर्भित करते हैं। विभिन्न Microsoft फ्रेमवर्क इस शब्द का उपयोग करते हैं।

  • पीछे कोड आमतौर पर XAML में परिभाषित तत्वों का उपयोग करने की आवश्यकता होगी, या तो उपयोगकर्ता इनपुट के बारे में जानकारी प्राप्त करने के लिए, या उपयोगकर्ता को जानकारी दिखाने के लिए।

  • नीचे दिए गए XAML कोड में, TextBlock तथा Buttonपरिभाषित किया गया हैं। डिफ़ॉल्ट रूप से, जब एप्लिकेशन चलाया जाता है, तो यह एक टेक्स्ट दिखाएगा “Hello World!“वेब पेज और एक बटन पर।

<UserControl x:Class = "FirstExample.MainPage" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   xmlns:d = "http://schemas.microsoft.com/expression/blend/2008" 
   xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006" 
   mc:Ignorable = "d" 
   d:DesignHeight = "300" d:DesignWidth = "400">
   
   <Grid x:Name = "LayoutRoot" Background = "White"> 
      <StackPanel> 
         <TextBlock x:Name = "TextMessage"  
            Text = "Hello World!"  
            Margin = "5"> 
         </TextBlock> 
			
         <Button x:Name = "ClickMe"  
            Click = "ClickMe_Click"  
            Content = "Click Me!"  
            Margin = "5"> 
         </Button> 
			
      </StackPanel> 
   </Grid> 
</UserControl>

  • पीछे वाला कोड किसी भी तत्व को एक्सेस कर सकता है जिसका नाम है x:Name निर्देश।

  • नामांकित तत्व पीछे के कोड में फ़ील्ड के माध्यम से उपलब्ध हो जाते हैं, जिससे कोड इन वस्तुओं और उनके सदस्यों को सामान्य तरीके से एक्सेस कर सकता है।

  • x:Prefix यह दर्शाता है कि नाम एक सामान्य संपत्ति नहीं है।

  • x:Name XAML संकलक के लिए एक विशेष संकेत है जिसे हम कोड के पीछे इस ऑब्जेक्ट तक पहुंचना चाहते हैं।

नीचे दिया गया बटन-क्लिक इवेंट कार्यान्वयन है जिसमें TextBlock पाठ अद्यतन किया गया है।

using System.Windows; 
using System.Windows.Controls;
  
namespace FirstExample {
 
   public partial class MainPage : UserControl {
	
      public MainPage() { 
         InitializeComponent(); 
      }
		
      private void ClickMe_Click(object sender, RoutedEventArgs e) { 
         TextMessage.Text = "Congratulations! you have created your first Silverlight Applicatoin"; 
      } 
   } 
}

  • XAML यूआई तत्वों को डिजाइन करने का एकमात्र तरीका नहीं है। यह आपको XAML में वस्तुओं को घोषित करने या कोड में घोषित / लिखने के लिए है।

  • XAML वैकल्पिक है, लेकिन इसके बावजूद, यह दिल है Silverlight डिज़ाइन।

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

यदि आप Visual Studio में एक नया प्रोजेक्ट बनाते हैं, तो आप संवाद बॉक्स के दाएँ फलक में चार प्रकार की परियोजना देखेंगे। वे हैं -

  • सिल्वरलाइट एप्लीकेशन
  • सिल्वरलाइट क्लास लाइब्रेरी
  • कक्षा पुस्तकालय (पोर्टेबल)
  • सिल्वरलाइट नेविगेशन अनुप्रयोग

  • पहले दो, Silverlight Application तथा Silverlight Class Library, काफी सीधे हैं। ये क्लासिक विंडोज अनुप्रयोगों में डीएलएल में निष्पादन योग्य के अनुरूप हैं। दोनों डीएलएल का निर्माण करते हैं क्योंकि सिल्वरलाइट अनुप्रयोगों को कैसे तैनात किया जाता है।

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

  • यदि आप एक से अधिक एप्लिकेशन बनाने की योजना बना रहे हैं, और आप सामान्य कोड का पुन: उपयोग करना चाहते हैं तो आप एक क्लास लाइब्रेरी का निर्माण कर सकते हैं। यदि आप उन नियंत्रणों को बेचने की योजना बना रहे हैं जो अन्य लोग अपने अनुप्रयोगों में उपयोग करेंगे, तो फिर से एक पुस्तकालय निर्माण की चीज है।

  • अन्य परियोजना प्रकार थोड़ा कम स्पष्ट हैं, इसलिए हम इस अध्याय में बाद में उन पर विस्तार से देखेंगे।

सिल्वरलाइट वेब एप्लीकेशन

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

चलिए अब सिल्वरलाइट एप्लिकेशन प्रोजेक्ट के एक सरल उदाहरण पर एक नज़र डालते हैं।

Step 1 - खोलें Visual Studio। दबाएंFile मेनू, इंगित करें New और फिर क्लिक करें Project।

Step 2 - ए New Projectडायलॉग बॉक्स खुलेगा। के अंतर्गतTemplates, चुनते हैं Visual C# और फिर click Silverlight। दाएँ फलक में, Silverlight अनुप्रयोग चुनें।

अपनी परियोजना को बचाने के लिए एक प्रोजेक्ट नाम और अपनी हार्ड ड्राइव पर एक स्थान दर्ज करें।

सिल्वरलाइट परियोजना स्वयं सिल्वरलाइट सामग्री का निर्माण करने जा रही है, और यह सामग्री कई लोगों के बीच सिर्फ एक संपत्ति है जो पूरे वेब एप्लिकेशन को बनाने जा रही है।

क्लिक OK।

Step 3 - जाँच करें Host the Silverlight application checkbox। डिफ़ॉल्ट ASP.NET वेब अनुप्रयोग प्रोजेक्ट है।

Step 4- MS-Visual Studio ने दो प्रोजेक्ट बनाए हैं, सिल्वरलाइट प्रोजेक्ट और एक ASP.NET वेब एप्लिकेशन। अब, हमें ASP.NET वेब एप्लिकेशन की आवश्यकता है। आप इसमें देख सकते हैंSolution Explorer नीचे दिखाए अनुसार।

कुछ भी जो HTTP के माध्यम से सामग्री की सेवा कर सकता है, लेकिन यह है Visual Studio, और यह ASP.NET वेब तकनीक को समझता है, इसलिए यह हमें देता है।

यह प्रदर्शित करने के लिए कि सिल्वरलाइट किसी विशेष सर्वर-साइड तकनीक पर निर्भर नहीं है, हम इसे हटा दें .aspx फ़ाइल, केवल सादे स्थिर HTML फ़ाइल को छोड़कर।

Step 5- राइट-क्लिक करें FirstExampleTestpage.aspx। विकल्पों की सूची से, क्लिक करेंDelete।

Step 6 - सेट करें FirstExampleTestPage.html के रूप में Start पृष्ठ।

MainPage.xamlफ़ाइल सिल्वरलाइट सामग्री के लिए उपयोगकर्ता इंटरफ़ेस को परिभाषित करता है। या तो आप सीधे XAML कोड लिख सकते हैं या आप भी उपयोग कर सकते हैंToolbox विभिन्न UI तत्वों को खींचने और छोड़ने के लिए।

Step 7 - नीचे दिए गए में एक सरल कोड है MainPage.xaml जिसमें ए Button और एक TextBlock अंदर परिभाषित कर रहे हैं StackPanel।

<UserControl x:Class = "FirstExample.MainPage" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   xmlns:d = "http://schemas.microsoft.com/expression/blend/2008" 
   xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006" 
   mc:Ignorable = "d" 
   d:DesignHeight = "300" d:DesignWidth = "400">  
   
   <Grid x:Name = "LayoutRoot" Background = "White"> 
      <StackPanel> 
         <TextBlock x:Name = "TextMessage" Text = "Hello World!"  
            Margin = "5"> </TextBlock> 
         <Button x:Name = "ClickMe" Click = "ClickMe_Click" Content = "Click 
            Me!"  Margin = "5"> </Button> 
      </StackPanel> 
   </Grid> 
	
</UserControl>

Step 8 - यह उदाहरण मानता है कि आपने नाम से एक ईवेंट-हैंडलिंग विधि बनाई है ClickMe_Click। यहाँ है कि यह कैसा दिखता हैMainPage.xaml.cs फ़ाइल।

using System.Windows; 
using System.Windows.Controls;
  
namespace FirstExample { 

   public partial class MainPage : UserControl { 
	
      public MainPage() { 
         InitializeComponent(); 
      } 
	  
      private void ClickMe_Click(object sender, RoutedEventArgs e) { 
         TextMessage.Text = "Congratulations! you have created your 
            first Silverlight Applicatoin"; 
      } 
   } 
}

Step 9 - सिल्वरलाइट एप्लिकेशन को किसी भी स्थापित ब्राउज़र पर चलाया जा सकता है।

Step 10 - जब उपरोक्त कोड संकलित और निष्पादित किया जाता है, तो आपको निम्नलिखित वेबपेज दिखाई देगा।

सिल्वरलाइट नेविगेशन अनुप्रयोग

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

हमें एक नेविगेशन एप्लिकेशन बनाएं।

Step 1 - चयन करें Silverlight Navigation Application दाएँ फलक से New Project संवाद बॉक्स।

Step 2 - सिल्वरलाइट वेब एप्लिकेशन के लिए आपने जो सेटिंग की है, उसका पालन करें।

Step 3 - क्लिक करें OKबटन। जैसा कि नीचे दिखाया गया है एक विंडो खुल जाएगी।

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

Step 4- यह एक नेविगेशन बार सहित एक एप्लीकेशन क्रोम प्रदान करता है। समाधान में कुछ अतिरिक्त फ़ाइलें हैं। यहStyles फ़ाइल रूप को परिभाषित करती है और महसूस करती है Navigationबार। इसमेंViews फ़ोल्डर, हम कुछ पृष्ठों को देखते हैं, और त्रुटियों को दिखाने के लिए एक विंडो भी।

जैसा कि आप देख सकते हैं, जब आप एप्लिकेशन चलाते हैं, तो यह कुछ प्लेसहोल्डर सामग्री के साथ एक होम पेज दिखाता है।

Step 5 - जब आप क्लिक करें About बटन, यह करने के लिए नेविगेट करेगा About पृष्ठ।

महत्वपूर्ण हिस्सा यह है कि आप तब ब्राउज़र का उपयोग कर सकते हैं Back तथा Forward बटन चरणों को दोहराने के लिए।

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

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

अनुप्रयोग प्रयोज्य के लिए नियंत्रण का लेआउट बहुत महत्वपूर्ण और महत्वपूर्ण है। इसका उपयोग आपके एप्लिकेशन में GUI तत्वों के समूह को व्यवस्थित करने के लिए किया जाता है। लेआउट पैनल का चयन करते समय कुछ महत्वपूर्ण बातों पर विचार करना चाहिए। वे हैं -

  • बाल तत्वों की स्थिति।
  • बाल तत्वों का आकार।
  • एक-दूसरे के ऊपर बाल तत्वों को ओवरलैप करना।

यदि एप्लिकेशन का उपयोग विभिन्न स्क्रीन रिज़ॉल्यूशन पर किया गया है, तो नियंत्रण की एक निश्चित पिक्सेल व्यवस्था काम नहीं करती है। XAML GUI तत्वों को एक उपयुक्त तरीके से व्यवस्थित करने के लिए अंतर्निहित लेआउट पैनलों का एक समृद्ध सेट प्रदान करता है।

हम देखकर शुरू करेंगे simple fixedलेआउट। तब हम देखेंगेDynamicलेआउट परिदृश्य, जिसे सिल्वरलाइट ने समर्थन करने के लिए डिज़ाइन किया है। हम लेआउट-संबंधित गुणों और अवधारणाओं को देखेंगे जो सभी उपयोगकर्ता इंटरफ़ेस तत्वों को अनुमति देते हैं।

फिक्स्ड लेआउट

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

आमतौर पर, Canvas2D ग्राफिक तत्वों (जैसे कि एलीप, आयत आदि) के लिए उपयोग किया जाता है। यूआई तत्वों के लिए इसका उपयोग नहीं किया जाता है क्योंकि निरपेक्ष निर्देशांक निर्दिष्ट करते समय आपके एक्सएएमएल अनुप्रयोग के आकार बदलने, स्थानीयकरण या पैमाने पर परेशानी देते हैं।

नीचे दिए गए आमतौर पर इस्तेमाल किया जाता है properties का Canvas कक्षा।

अनु क्रमांक। संपत्ति विवरण
1

Background

हो जाता है या एक ब्रश सेट करता है जो पैनल सामग्री क्षेत्र को भरता है। (पैनल से निहित)
2

Children

इस पैनल के बाल तत्वों का एक UIElementCollection हो जाता है। (पैनल से निहित)
3

Height

तत्व की सुझाई गई ऊँचाई को प्राप्त या निर्धारित करता है। (फ्रेमवर्क से इंहेरिट किया गया।)
4

ItemHeight

हो जाता है या एक मान सेट करता है जो WrapPanel के भीतर समाहित सभी वस्तुओं की ऊंचाई को निर्दिष्ट करता है।
5

ItemWidth

हो जाता है या एक मान सेट करता है जो WrapPanel के भीतर समाहित सभी वस्तुओं की चौड़ाई को निर्दिष्ट करता है।
6

LogicalChildren

एक गणक हो जाता है जो इस पैनल तत्व के तार्किक बाल तत्वों को पुनरावृत्त कर सकता है। (पैनल से निहित)
7

LogicalOrientation

पैनल का ओरिएंटेशन, यदि पैनल केवल एक ही आयाम में लेआउट का समर्थन करता है। (पैनल से निहित)
8

LeftProperty

Canvas.Left XAML संलग्न संपत्ति की पहचान करता है।
9

Margin

किसी तत्व के बाहरी मार्जिन को प्राप्त करना या सेट करना। (फ्रेमवर्क से इंहेरिट किया गया।)
10

Name

तत्व का पहचान नाम हो जाता है या सेट हो जाता है। नाम एक संदर्भ प्रदान करता है ताकि कोड-पीछे, जैसे घटना हैंडलर कोड, एक XAML प्रोसेसर द्वारा प्रसंस्करण के दौरान निर्माण के बाद एक मार्कअप तत्व को संदर्भित कर सके। (फ्रेमवर्क से इंहेरिट किया गया।)
1 1

Orientation

एक मान प्राप्त करता है या सेट करता है जो उस आयाम को निर्दिष्ट करता है जिसमें बाल सामग्री व्यवस्थित होती है।
12

Parent

इस तत्व के तार्किक मूल तत्व को प्राप्त करता है। (फ्रेमवर्क से इंहेरिट किया गया।)
13

Resources

स्थानीय रूप से परिभाषित संसाधन शब्दकोश हो जाता है या सेट हो जाता है। (फ्रेमवर्क से इंहेरिट किया गया।)
14

Style

इस तत्व द्वारा उपयोग की जाने वाली शैली को प्रस्तुत किए जाने पर उसे सेट या सेट किया जाता है। (फ्रेमवर्क से इंहेरिट किया गया।)
15

TopProperty

Canvas.Top XAML से जुड़ी संपत्ति की पहचान करता है।
16

Width

तत्व की चौड़ाई प्राप्त या निर्धारित करता है। (फ्रेमवर्क से इंहेरिट किया गया।)
17

ZIndexProperty

Canvas.ZIndex XAML संलग्न संपत्ति की पहचान करता है।

नीचे दिए गए आमतौर पर इस्तेमाल किया जाता है methods का Canvas।

अनु क्रमांक। विधि और विवरण
1

GetLeft

लक्ष्य तत्व के लिए Canvas.Left XAML संलग्न संपत्ति का मूल्य प्राप्त होता है।
2

GetTop

लक्ष्य तत्व के लिए Canvas.Top XAML संलग्न संपत्ति का मूल्य हो जाता है।
3

GetZIndex

लक्ष्य तत्व के लिए Canvas.ZIndex XAML संलग्न संपत्ति का मूल्य प्राप्त होता है।
4

SetLeft

लक्ष्य तत्व के लिए Canvas.Left XAML संलग्न संपत्ति का मान सेट करता है।
5

SetTop

लक्ष्य तत्व के लिए Canvas.Top XAML संलग्न गुण का मान सेट करता है।
6

SetZIndex

लक्ष्य तत्व के लिए Canvas.ZIndex XAML संलग्न गुण का मान सेट करता है।

निम्न उदाहरण दिखाता है कि बाल तत्वों को एक में कैसे जोड़ा जाए Canvas। नीचे XAML कार्यान्वयन है जिसमें विभिन्न ऑफसेट गुणों के साथ एक कैनवस के अंदर एक एलिप्स बनाया गया है।

<UserControl x:Class = "FirstExample.MainPage" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   xmlns:d = "http://schemas.microsoft.com/expression/blend/2008" 
   xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006" 
   mc:Ignorable = "d" 
   d:DesignHeight = "300" d:DesignWidth = "400">
   
   <Grid x:Name = "LayoutRoot" Background = "White"> 
      <Canvas Width = "380" Height = "280" > 
         <Ellipse Canvas.Left = "30" Canvas.Top = "30"  
            Fill = "Gray" Width = "200" Height = "120" />             
      </Canvas>  
   </Grid>
	
</UserControl>

जब उपरोक्त कोड संकलित और निष्पादित किया जाता है, तो आपको निम्न आउटपुट दिखाई देगा।

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

सिल्वरलाइट गतिशील लेआउट रणनीतियों के साथ दो पैनल प्रदान करता है।

  • StackPanel - जो एक ऊर्ध्वाधर या क्षैतिज ढेर में तत्वों की व्यवस्था करता है।

  • Grid - जो एक लचीली ग्रिड जैसी, या टेबल जैसी लेआउट प्रणाली प्रदान करता है।

स्टैक पैनल

स्टैक पैनल एक्सएएमएल में एक सरल और उपयोगी लेआउट पैनल है। मेंStack Panelबच्चे के तत्वों को उनकी अभिविन्यास संपत्ति के आधार पर क्षैतिज या लंबवत रूप से एक पंक्ति में व्यवस्थित किया जा सकता है। जब भी किसी प्रकार की सूची बनाने की आवश्यकता होती है तो इसका उपयोग अक्सर किया जाता है। ItemControls स्टैक पैनल का उपयोग करते हैं।Menu, ListBox तथा ComboBox उनके डिफ़ॉल्ट आंतरिक लेआउट पैनल हैं।

नीचे दिए गए आमतौर पर इस्तेमाल किया जाता है properties का StackPanel।

अनु क्रमांक। संपत्ति विवरण
1

Background

हो जाता है या एक ब्रश सेट करता है जो पैनल सामग्री क्षेत्र को भरता है। (पैनल से निहित)
2

Children

इस पैनल के बाल तत्वों का एक UIElementCollection हो जाता है। (पैनल से निहित)
3

Height

तत्व की सुझाई गई ऊँचाई को प्राप्त या निर्धारित करता है। (फ्रेमवर्क से इंहेरिट किया गया।)
4

ItemHeight

हो जाता है या एक मान सेट करता है जो WrapPanel के भीतर समाहित सभी वस्तुओं की ऊंचाई को निर्दिष्ट करता है।
5

ItemWidth

हो जाता है या एक मान सेट करता है जो WrapPanel के भीतर समाहित सभी वस्तुओं की चौड़ाई को निर्दिष्ट करता है।
6

LogicalChildren

एक गणक हो जाता है जो इस पैनल तत्व के तार्किक बाल तत्वों को पुनरावृत्त कर सकता है। (पैनल से निहित)
7

LogicalOrientation

पैनल का ओरिएंटेशन, यदि पैनल केवल एक ही आयाम में लेआउट का समर्थन करता है। (पैनल से निहित)
8

Margin

किसी तत्व के बाहरी मार्जिन को प्राप्त करना या सेट करना। (फ्रेमवर्क से इंहेरिट किया गया।)
9

Name

तत्व का पहचान नाम हो जाता है या सेट हो जाता है। नाम एक संदर्भ प्रदान करता है ताकि कोड-पीछे, जैसे घटना हैंडलर कोड, एक XAML प्रोसेसर द्वारा प्रसंस्करण के दौरान निर्माण के बाद एक मार्कअप तत्व को संदर्भित कर सके। (फ्रेमवर्क से इंहेरिट किया गया।)
10

Orientation

एक मान प्राप्त करता है या सेट करता है जो उस आयाम को निर्दिष्ट करता है जिसमें बाल सामग्री व्यवस्थित होती है।
1 1

Parent

इस तत्व के तार्किक मूल तत्व को प्राप्त करता है। (फ्रेमवर्क से इंहेरिट किया गया।)
12

Resources

स्थानीय रूप से परिभाषित संसाधन शब्दकोश हो जाता है या सेट हो जाता है। (फ्रेमवर्क से इंहेरिट किया गया।)
13

Style

इस तत्व द्वारा उपयोग की जाने वाली शैली को प्रस्तुत किए जाने पर उसे सेट या सेट किया जाता है। (फ्रेमवर्क से इंहेरिट किया गया।)
14

Width

तत्व की चौड़ाई प्राप्त या निर्धारित करता है। (फ्रेमवर्क से इंहेरिट किया गया।)

निम्न उदाहरण दिखाता है कि बाल तत्वों को एक में कैसे जोड़ा जाए StackPanel। नीचे दिए गए XAML कार्यान्वयन है जिसमेंButtons कुछ गुणों के साथ एक StackPanel के अंदर बनाए जाते हैं।

<UserControl x:Class = "DynamicLayout.MainPage" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   xmlns:d = "http://schemas.microsoft.com/expression/blend/2008" 
   xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006" 
   mc:Ignorable = "d" 
   d:DesignHeight = "300" d:DesignWidth = "400"> 
    
   <Grid x:Name = "LayoutRoot" Background = "White"> 
      <StackPanel>
         <Button x:Name = "button" Content = "Button" Margin = "10" /> 
         <Button x:Name = "button1" Content = "Button" Margin = "10"/> 
         <Button x:Name = "button2" Content = "Button" Margin = "10"/> 
         <Button x:Name = "button3" Content = "Button" Margin = "10"/> 
      </StackPanel>  
   </Grid> 
	
</UserControl>

जब उपरोक्त कोड संकलित और निष्पादित किया जाता है, तो आपको निम्न आउटपुट दिखाई देगा।

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

अब यदि आप ब्राउज़र का आकार बदलते हैं, तो आप देखेंगे कि बटनों की चौड़ाई भी बदल गई है।

ग्रिड

ग्रिड पैनल एक लचीला क्षेत्र प्रदान करता है, जिसमें पंक्तियाँ और स्तंभ होते हैं। मेंGrid, बाल तत्वों को सारणीबद्ध रूप में व्यवस्थित किया जा सकता है। किसी तत्व को किसी विशिष्ट पंक्ति और स्तंभ में जोड़कर उपयोग किया जा सकता हैGrid.Row तथा Grid.Columnगुण। डिफ़ॉल्ट रूप से,Gridपैनल एक पंक्ति और एक कॉलम के साथ बनाया गया है। एकाधिक पंक्तियों और स्तंभों द्वारा बनाई गई हैंRowDefinitions तथा ColumnDefinitionsगुण। पंक्तियों की ऊंचाई और स्तंभों की चौड़ाई को निम्नलिखित तीन तरीकों से परिभाषित किया जा सकता है -

  • Fixed value - तार्किक इकाइयों के एक निश्चित आकार (1/96 इंच) को असाइन करने के लिए।

  • Auto - यह स्पेस लेगा, जो उस विशिष्ट पंक्ति / कॉलम में नियंत्रण के लिए आवश्यक है।

  • Star (*) - यह शेष स्थान ले जाएगा जब Auto तथा fixed sized से भरा हुआ है।

नीचे दिए गए आमतौर पर इस्तेमाल किया जाता है properties का Grid कक्षा।

अनु क्रमांक। संपत्ति विवरण
1

Background

हो जाता है या एक ब्रश सेट करता है जो पैनल सामग्री क्षेत्र को भरता है। (पैनल से निहित)
2

Children

इस पैनल के बाल तत्वों का एक UIElementCollection हो जाता है। (पैनल से निहित)
3

ColumnDefinitions

ग्रिड के इस उदाहरण पर परिभाषित ColumnDefinition ऑब्जेक्ट्स की एक सूची मिलती है।
4

Height

तत्व की सुझाई गई ऊँचाई को प्राप्त या निर्धारित करता है। (फ्रेमवर्क से इंहेरिट किया गया।)
5

ItemHeight

हो जाता है या एक मान सेट करता है जो WrapPanel के भीतर समाहित सभी वस्तुओं की ऊंचाई को निर्दिष्ट करता है।
6

ItemWidth

हो जाता है या एक मान सेट करता है जो WrapPanel के भीतर समाहित सभी वस्तुओं की चौड़ाई को निर्दिष्ट करता है।
7

Margin

किसी तत्व के बाहरी मार्जिन को प्राप्त करना या सेट करना। (फ्रेमवर्क से इंहेरिट किया गया।)
8

Name

तत्व का पहचान नाम हो जाता है या सेट हो जाता है। नाम एक संदर्भ प्रदान करता है ताकि कोड-पीछे, जैसे घटना हैंडलर कोड, एक XAML प्रोसेसर द्वारा प्रसंस्करण के दौरान निर्माण के बाद एक मार्कअप तत्व को संदर्भित कर सके। (फ्रेमवर्क से इंहेरिट किया गया।)
9

Orientation

एक मान प्राप्त करता है या सेट करता है जो उस आयाम को निर्दिष्ट करता है जिसमें बाल सामग्री व्यवस्थित होती है।
10

Parent

इस तत्व के तार्किक मूल तत्व को प्राप्त करता है। (फ्रेमवर्क से इंहेरिट किया गया।)
1 1

Resources

स्थानीय रूप से परिभाषित संसाधन शब्दकोश हो जाता है या सेट हो जाता है। (फ्रेमवर्क से इंहेरिट किया गया।)
12

RowDefinitions

ग्रिड के इस उदाहरण पर परिभाषित पंक्तिबद्धता वस्तुओं की एक सूची मिलती है।
13

Style

इस तत्व द्वारा उपयोग की जाने वाली शैली को प्रस्तुत किए जाने पर उसे सेट या सेट किया जाता है। (फ्रेमवर्क से इंहेरिट किया गया।)
14

Width

तत्व की चौड़ाई प्राप्त या निर्धारित करता है। (फ्रेमवर्क से इंहेरिट किया गया।)

नीचे दिए गए आमतौर पर इस्तेमाल किया जाता है methods का Grid कक्षा।

अनु क्रमांक। विधि और विवरण
1

GetColumn

निर्दिष्ट फ्रेमवर्क से ग्रिड के आकार XAML संलग्न संपत्ति का मूल्य हो जाता है।
2

GetColumnSpan

निर्दिष्ट फ्रेमवर्क से ग्रिड के मूल्य की गणना करता है।
3

GetRow

Grid.Row XAML संलग्न संपत्ति के मूल्य को फ्रेमवर्क से निर्दिष्ट करता है।
4

SetColumn

निर्दिष्ट फ्रेमवर्क पर ग्रिड के आकार XAML संलग्न संपत्ति का मान सेट करता है।
5

SetRow

Grid.Row XAML संलग्न प्रॉपर्टी का मान निर्दिष्ट फ्रेमवर्क पर सेट करता है।
6

SetRowSpan

निर्दिष्ट फ्रेमवर्क पर Grid.RowSpan XAML संलग्न संपत्ति का मान सेट करता है।

निम्न उदाहरण से पता चलता है कि इसे सारणीबद्ध रूप में निर्दिष्ट करने के लिए बच्चे के तत्वों को ग्रिड में कैसे जोड़ा जाए। नीचे दिया गया XAML कार्यान्वयन है जिसमें कुछ UI तत्व जोड़े गए हैं।

<UserControl x:Class = "DynamicLayout.MainPage" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   xmlns:d = "http://schemas.microsoft.com/expression/blend/2008"
   xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006" 
   mc:Ignorable = "d" 
   d:DesignHeight = "300" d:DesignWidth = "400">  
   
   <Grid x:Name = "LayoutRoot" Background = "White"> 
	
      <Grid.ColumnDefinitions> 
         <ColumnDefinition Width = "130" /> 
         <ColumnDefinition Width = "1*" /> 
         <ColumnDefinition Width = "2*" /> 
      </Grid.ColumnDefinitions>
		
      <Grid.RowDefinitions> 
         <RowDefinition Height = "Auto" /> 
         <RowDefinition Height = "50" /> 
      </Grid.RowDefinitions>  
		
      <TextBlock Grid.Column = "0" Grid.Row = "0" 
         Text = "Content that no longer fits, not even close here" 
         TextWrapping = "Wrap" /> 
			
      <Button Grid.Column = "1" Grid.Row = "0" Content = "OK" />  
      <Ellipse Grid.Column = "1" Grid.Row = "1"  Fill = "Aqua" /> 
      <Rectangle Grid.Column = "2" Grid.Row = "1" Fill = "Orchid" RadiusX = "20" RadiusY = "20" />  
		
   </Grid> 
	
</UserControl>

पहला कॉलम एक निश्चित आकार पर सेट है। इस कॉलम के किसी भी तत्व में वह चौड़ाई होगी।Grid.Column तथा Grid.Row गुण निर्दिष्ट करते हैं कि ये आइटम किस पंक्ति और स्तंभ में हैं, और ये 0-आधारित गुण हैं।

दूसरे या तीसरे कॉलम की चौड़ाई है 1* तथा 2*। इसका मतलब यह है कि वे साझा करते हैं कि किसी भी निश्चित और ऑटो चौड़ाई के कॉलम के बाद क्या जगह बची है। का महत्व1 तथा 2 यहाँ वह है 2* स्तंभ को दुगना स्थान मिलता है 1* स्तंभ।

जब उपरोक्त कोड निष्पादित किया जाता है, तो आपको निम्न आउटपुट दिखाई देगा।

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

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

कुछ महत्वपूर्ण विशेषताएं हैं -

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

  • कुछ तत्व खत्म हो जाते हैं Unconstrainedलेआउट, जिसका अर्थ है कि तत्व अपने स्वयं के आकार का चयन करने के लिए स्वतंत्र हैं। उदाहरण के लिए, एक ऊर्ध्वाधर के अंदर के तत्वStackPanel लंबवत रूप से असंवैधानिक हैं।

  • StackPanel उन्हें उतनी ही ऊंचाई देगा, जितनी उन्हें आवश्यकता होगी। वास्तव में, यह पर्याप्त जगह न होने पर भी ऐसा करेगा। यह उन तत्वों को बताएगा जो उनके पास आवश्यक ऊंचाई है, और फिर कुछ भी फसल लेते हैं जो फिट नहीं होते हैं।

  • अधिकांश सिल्वरलाइट उपयोगकर्ता इंटरफ़ेस में इन दो लेआउट शैलियों का मिश्रण होता है। भले ही इसके अभिभावक अड़चनें पैदा करें या नहीं, कStackPanel हमेशा प्रदर्शन करेंगे Unconstrainedस्टैकिंग की दिशा में लेआउट। ग्रिड पंक्ति या स्तंभ के लिए समान है जब ऊंचाई या चौड़ाई सेट की जाती हैAuto।

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

तत्व केवल उस चौड़ाई को लेगा जिसकी उसे जरूरत है। निश्चित रूप से, आप एक निश्चित चौड़ाई या ऊंचाई के साथ एक बाधा का परिचय दे सकते हैं।

  • असंबंधित लेआउट को कभी-कभी कहा जाता है Size to Content, क्योंकि एक अप्रतिबंधित तत्व का आकार आमतौर पर इसकी सामग्री द्वारा निर्धारित किया जाता है।

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

अनु क्रमांक। नियंत्रण और विवरण
1 GridSplitter

बाधाएं आपके डिज़ाइन में युक्त ब्राउज़र, या निश्चित आयामों से आ सकती हैं। हालांकि, कभी-कभी उपयोगकर्ता को बाधाओं को लागू करने देने के लिए यह उपयोगी होता है।
2 ScrollViewer

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

उपयोगकर्ता इंटरफ़ेस को बाहर रखने के लिए एक और उपयोगी तत्व बॉर्डर है।

फ़ुल स्क्रीन मोड

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

पूर्ण स्क्रीन मोड में प्रवेश करने के लिए, आपको एप्लिकेशन ऑब्जेक्ट से Host.Content प्रॉपर्टी को होल्ड करना होगा, और इसकी IsFullScreen प्रॉपर्टी को सही पर सेट करना होगा।

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

<UserControl x:Class = "FullScreenExample.MainPage" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   xmlns:d = "http://schemas.microsoft.com/expression/blend/2008" 
   xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006" 
   mc:Ignorable = "d" 
   d:DesignHeight = "300" d:DesignWidth = "400">
   
   <Border BorderBrush = "Gray" BorderThickness = "4" CornerRadius = "30" Padding = "20"> 
	
      <Border.Background> 
         <LinearGradientBrush StartPoint = "0,0" EndPoint = "0,1"> 
            <GradientStop Offset = "0" Color = "Wheat" /> 
            <GradientStop Offset = "1" Color = "BurlyWood" />
         </LinearGradientBrush> 
      </Border.Background> 
		
      <Grid x:Name = "LayoutRoot"> 
         <Button x:Name = "fullScreenButton" HorizontalAlignment = "Center" 
            VerticalAlignment = "Center" FontSize = "30" Width = "300" 
            Height = "100" Content = "Go Full Screen" Click = "Button_Click" /> 
      </Grid> 
		
   </Border> 
	
</UserControl>

यहां C # में एक कोड है जो पूर्ण स्क्रीन से सामान्य पर लौटने की शुरुआत करता है। आप यह पता लगा सकते हैं कि ऐसा कब होता हैHost.Content वस्तुओं FullScreenChanged प्रतिस्पर्धा।

using System; 
using System.Windows; 
using System.Windows.Controls;  

namespace FullScreenExample { 

   public partial class MainPage : UserControl { 
	
      public MainPage() { 
         InitializeComponent();  
         App.Current.Host.Content.FullScreenChanged += Content_FullScreenChanged; 
      }
	  
      void Content_FullScreenChanged(object sender, EventArgs e) { 
		
         if (Application.Current.Host.Content.IsFullScreen) { 
            fullScreenButton.Content = "Return to Normal"; 
         } else { 
            fullScreenButton.Content = "Go Full Screen";
         } 
      }
	  
      private void Button_Click(object sender, RoutedEventArgs e) { 
         var content = Application.Current.Host.Content; 
         content.IsFullScreen = !content.IsFullScreen; 
      } 
		
   } 
}

जब उपरोक्त कोड संकलित और निष्पादित किया जाता है, तो आपको निम्न आउटपुट दिखाई देगा।

जब उपयोगकर्ता क्लिक करता है Go Full Screen बटन, फिर यह पूर्ण स्क्रीन मोड पर स्विच हो जाएगा।

ध्यान दें कि बटन का पाठ बदल गया है। यह अब कहता हैReturn to Normal। यदि आप इसे फिर से क्लिक करते हैं या हिट एस्केप करते हैं, तो यह फुल स्क्रीन मोड से वापस फ्लिप हो जाएगा।

चूंकि सिल्वरलाइट सामग्री हमेशा एक वेब पेज के अंदर चलती है, ऑब्जेक्ट टैग सामान्य सीएसएस लेआउट नियमों के अधीन है। प्लग-इन के लिए ब्राउज़र में पसंदीदा आकार को पीछे धकेलने का कोई तरीका नहीं है, इसलिए सिल्वरलाइट सामग्री किस आकार की होनी चाहिए, इसका आकार और स्थिति पूर्ण रूप से वेब पेज द्वारा निर्धारित की जाएगी।

  • डिफ़ॉल्ट सिल्वरलाइट प्रोजेक्ट टेम्प्लेट वेब पेज में सीएसएस डालता है जो ऑब्जेक्ट को संपूर्ण ब्राउज़र विंडो में देता है।

  • डिफ़ॉल्ट XAML में एक निश्चित आकार दिखाई देता है, लेकिन यदि आप बारीकी से देखते हैं, तो आप देखेंगे कि टेम्पलेट डिज़ाइन की चौड़ाई, और डिज़ाइन गुणों को सेट करता है।

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

में Solution Explorer तुम देखोगे {project name}TestPage.html फ़ाइल, जो कि डिफ़ॉल्ट एचटीएमएल है जिसे आप नीचे दिखाए गए अनुसार विज़ुअल स्टूडियो में एक नया सिल्वरलाइट प्रोजेक्ट बनाते हैं।

यहां सीएसएस सबसे ऊपर है, HTML और बॉडी स्टाइल को 100% पर सेट करता है, जो थोड़ा अजीब लग सकता है।

यहां संपूर्ण HTML फ़ाइल है, जिसमें विभिन्न सेटिंग्स हैं।

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	
<html xmlns = "http://www.w3.org/1999/xhtml" >  
   <head> 
      <title>FirstExample</title> 
		
      <style type = "text/css"> 
         html, body { 
            height: 100%; 
            overflow: auto; 
         } 
			
         body { 
            padding: 0; 
            margin: 0; 
         } 
			
         #silverlightControlHost { 
            height: 100%; 
            text-align:center; 
         } 
      </style>
		
      <script type = "text/javascript" src = "Silverlight.js"></script> 
		
      <script type = "text/javascript"> 
         function onSilverlightError(sender, args) { 
            var appSource = ""; 
				
            if (sender != null && sender != 0) { 
               appSource = sender.getHost().Source; 
            } 
             
            var errorType = args.ErrorType; 
            var iErrorCode = args.ErrorCode;  
				
            if (errorType == "ImageError" || errorType == "MediaError") { 
               return; 
            } 
				
            var errMsg = "Unhandled Error in Silverlight Application " +  appSource + "\n" ;  
            errMsg += "Code: "+ iErrorCode + "    \n"; 
            errMsg += "Category: " + errorType + "       \n"; 
            errMsg += "Message: " + args.ErrorMessage + "     \n";  
				
            if (errorType == "ParserError") { 
               errMsg += "File: " + args.xamlFile + "     \n"; 
               errMsg += "Line: " + args.lineNumber + "     \n"; 
               errMsg += "Position: " + args.charPosition + "     \n"; 
            } else if (errorType == "RuntimeError") {            
               if (args.lineNumber != 0) { 
                  errMsg += "Line: " + args.lineNumber + "     \n"; 
                  errMsg += "Position: " +  args.charPosition + "     \n"; 
               } 
					
               errMsg += "MethodName: " + args.methodName + "     \n"; 
            } 
				
            throw new Error(errMsg); 
         }
			
      </script> 
		
   </head> 
	
   <body>
	
      <form id = "form1" runat = "server" style = "height:100%"> 
         <div id = "silverlightControlHost"> 
			
            <object data = "data:application/x-silverlight-2," 
               type = "application/xsilverlight-2" width = "100%" height = "100%"> 
					
               <param name = "source" value = "ClientBin/FirstExample.xap"/> 
               <param name = "onError" value = "onSilverlightError" /> 
               <param name = "background" value = "white" /> 
               <param name = "minRuntimeVersion" value = "5.0.61118.0" /> 
               <param name = "autoUpgrade" value = "true" /> 
					
               <a href = "http://go.microsoft.com/fwlink/?LinkID=149156&v=5.0.61118.0" 
                  style = "textdecoration:none"> 
                  <img src = "http://go.microsoft.com/fwlink/?LinkId=161376" 
                     alt = "Get Microsoft Silverlight" style = "border-style:none"/> 
               </a> 
					
            </object>
				
            <iframe id = "_sl_historyFrame" style = "visibility:hidden;height:0px; 
               width:0px;border:0px"></iframe>
					
         </div> 
			
      </form> 
		
   </body> 
	
</html>

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

ओवरलैपिंग सामग्री

डिफ़ॉल्ट रूप से, सिल्वरलाइट और HTML सामग्री स्क्रीन पर समान स्थान साझा नहीं कर सकते हैं। यदि आप दोनों से एक सामग्री बनाते हैं, जैसे कि वे एक ही स्थान पर कब्जा करते हैं तो केवल सिल्वरलाइट सामग्री दिखाई देगी।

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

इसका मुख्य कारण प्रदर्शन है। स्क्रीन पर अपना निजी क्षेत्र प्राप्त करने से, सिल्वरलाइट को वेब ब्राउज़र के साथ अपने प्रतिपादन को समन्वित करने की आवश्यकता नहीं है।

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

  • विंडोलेस मोड में, सिल्वरलाइट प्लग-इन को उसी टारगेट विंडो हैंडलर को रेंडर करता है, जो ब्राउजर को मिंगल करने की अनुमति देता है।

  • जब सामग्री ओवरलैप होती है तो जेड इंडेक्स या जेड इंडेक्स महत्वपूर्ण होता है। जहां तक ​​एचटीएमएल का संबंध है, सिल्वरलाइट सामग्री एक एकल एचटीएमएल तत्व है, इसलिए यह एचटीएमएल जेड क्रम में ठीक एक स्थान पर दिखाई देता है।

  • इससे माउस हैंडलिंग पर प्रभाव पड़ता है। यदि सिल्वरलाइट प्लग-इन HMTL Z ऑर्डर के शीर्ष पर है, तो इसके बाउंडिंग बॉक्स के भीतर कहीं भी कोई भी माउस गतिविधि, प्लग-इन तक पहुंचाई जाएगी।

  • भले ही प्लग-इन के कुछ क्षेत्र पारदर्शी हैं, और आप HTML को पीछे देख सकते हैं, आप इसे क्लिक नहीं कर पाएंगे।

  • हालाँकि, यदि आप शीर्ष पर होने के लिए कुछ HTML सामग्री के साथ जेड इंडेक्स की व्यवस्था करते हैं, तो यह सिल्वर सामग्री के साथ ओवरलैप होने पर भी इंटरेक्टिव होता रहेगा।

उदाहरण

नीचे दिए गए सरल उदाहरण पर एक नज़र डालें, जिसमें हमारे पास एक कंटेनर के साथ एक लेआउट है, जिसमें तीन तलाक सभी को इस युक्त div के अंदर ओवरलैप करने की व्यवस्था की गई है।

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
	
<html xmlns = "http://www.w3.org/1999/xhtml" >  
   <head> 
	
      <title>HtmlOverlap</title> 
		
      <style type = "text/css"> 
         #container { 
            position: relative; 
            height: 300px; 
            font-size: small; 
            text-align:justify; 
         } 
			
         #silverlightControlHost { 
            position: absolute; 
            width: 400px; 
            height: 300px; 
         } 
			
         #underSilverlight { 
            position: absolute; 
            left: 4px; 
            width: 196px; 
         } 
			
         #overSilverlight { 
            position: relative; 
            left: 204px; 
            width: 196px; 
         } 
			
      </style> 
		
      <script type = "text/javascript" src = "Silverlight.js"></script> 
		
      <script type = "text/javascript"> 
         function onSilverlightError(sender, args) { 
            var appSource = ""; 
				
            if (sender != null && sender != 0) { 
               appSource = sender.getHost().Source; 
            } 
             
            var errorType = args.ErrorType; 
            var iErrorCode = args.ErrorCode;
				
            if (errorType == "ImageError" || errorType == "MediaError") { 
               return; 
            }  
				
            var errMsg = "Unhandled Error in Silverlight Application " +  
               appSource + "\n" ;  
					
            errMsg += "Code: "+ iErrorCode + "    \n"; 
            errMsg += "Category: " + errorType + "       \n"; 
            errMsg += "Message: " + args.ErrorMessage + "     \n";  
				
            if (errorType == "ParserError") { 
               errMsg += "File: " + args.xamlFile + "     \n"; 
               errMsg += "Line: " + args.lineNumber + "     \n"; 
               errMsg += "Position: " + args.charPosition + "     \n"; 
            } else if (errorType == "RuntimeError") {            
               if (args.lineNumber != 0) { 
                  errMsg += "Line: " + args.lineNumber + "     \n"; 
                  errMsg += "Position: " +  args.charPosition + "     \n"; 
               } 
					
               errMsg += "MethodName: " + args.methodName + "     \n"; 
            } 
				
            throw new Error(errMsg); 
         } 
      </script>
		
   </head> 
	
   <body> 
      <form id = "form1" runat = "server" style = "height:100%">
		
         <div id = 'container'>
			
            <div id = 'underSilverlight'> 
               This is below. This is below. This is below. This is below. This is below. 
					
               This is below. This is below. This is below. This is below. This is below. 
					
               This is below. This is below. This is below. This is below. This is below. 
					
               This is below. This is below. This is below. This is below. This is below. 
					
               This is below. This is below. This is below. This is below. This is below. 
					
               This is below. This is below. This is below. This is below. This is below. 
					
               This is below. This is below. This is below. This is below. This is below. 
					
               This is below. This is below. This is below. This is below. This is below. 
					
               This is below. This is below. This is below. This is below. This is below. 
					
               This is below. This is below. This is below. This is below. This is below. 
					
               This is below. This is below. This is below. This is below. This is below. 
					
               This is below. This is below. This is below. This is below. This is below. 
            </div> 
				
            <div id = "silverlightControlHost"> 
				
               <object data = "data:application/x-silverlight-2," 
                  type = "application/xsilverlight-2" width = "100%" height = "100%"> 
						
                  <param name = "source" value = "ClientBin/HtmlOverlap.xap"/> 
                  <param name = "onError" value = "onSilverlightError" /> 
                  <param name = "background" value = "transparent" /> 
                  <param name = "windowless" value = "true" /> 
                  <param name = "minRuntimeVersion" value = "4.0.50401.0" /> 
                  <param name = "autoUpgrade" value = "true" /> 
						
                  <a href = "http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50401.0" 
                     style = "text-decoration:none"> 
							
                  <img src = "http://go.microsoft.com/fwlink/?LinkId=161376" 
                     alt = "Get Microsoft Silverlight" style = "border-style:none"/> </a> 
							
               </object>
					
               <iframe id = "_sl_historyFrame" style = "visibility:hidden; height:0px; 
                  width:0px; border:0px"> </iframe>
						
            </div> 
				
            <div id = 'overSilverlight'> 
               This is on top. This is on top. This is on top. This is on top. 
                  This is on top. This is on top.
						
               This is on top. This is on top. This is on top. This is on top. 
                  This is on top. This is on top. 
						
               This is on top. This is on top. This is on top. This is on top. 
                  This is on top. This is on top. 
						
               This is on top. This is on top. This is on top. This is on top. 
                  This is on top. This is on top. 
						
               This is on top. This is on top. This is on top. This is on top. 
                  This is on top. This is on top. 
						
               This is on top. This is on top. This is on top. This is on top. 
                  This is on top. This is on top. 
						
               This is on top. This is on top. This is on top. This is on top. 
                  This is on top. This is on top.
						
               This is on top. This is on top. This is on top. This is on top. 
                  This is on top. This is on top. 
						
               This is on top. This is on top. This is on top. This is on top. 
            </div>
				
         </div>    
			
      </form> 
		
   </body> 
	
</html>

  • यह div बाईं ओर जा रहा है, और यह Z ऑर्डर के पीछे होगा, क्योंकि यह पहले आता है।

  • फिर बीच में, हमारे पास सिल्वरलाइट सामग्री है जो पूरी चौड़ाई को भरने वाली है।

  • फिर इसके शीर्ष पर, दाईं ओर एक पाठ होता है जिसमें पाठ होता है- This is on top।

नीचे दिया गया XAML फ़ाइल है जिसमें कुछ गुणों के साथ एक आयत जोड़ा गया है।

<UserControl x:Class = "HtmlOverlap.MainPage" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   xmlns:d = "http://schemas.microsoft.com/expression/blend/2008" 
   xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006" 
   mc:Ignorable = "d" 
   d:DesignHeight = "300" d:DesignWidth = "400">
	
   <Grid x:Name = "LayoutRoot"> 
      <Rectangle Margin = "0,120" Fill = "Aquamarine" />    
   </Grid> 
	
</UserControl>

जब आप इस एप्लिकेशन को चलाते हैं, तो आपको दो कॉलम दिखाई देंगे, एक बाईं ओर नीचे, और दाईं ओर शीर्ष पर। सिल्वरलाइट प्लग इन दोनों के समान क्षेत्र में बैठता है, और Z क्रम में सिल्वरलाइट सामग्री उन दोनों के बीच में होती है।

आप देख सकते हैं कि यहां अर्ध-पारदर्शी हरे रंग के भराव ने पाठ को बाईं ओर थोड़ा सा रंग दिया है क्योंकि यह उसके शीर्ष पर है, लेकिन इसने पाठ को दाईं ओर नहीं किया है, क्योंकि यह उस पाठ के पीछे है।

आप दाईं ओर पाठ का चयन कर सकते हैं। यदि आप कोशिश करते हैं कि बाईं ओर इस पाठ के साथ, कुछ भी नहीं होता है, और ऐसा इसलिए है, क्योंकि जहां तक ​​ब्राउज़र का संबंध है, यहां इस पूरे स्थान पर सिल्वरलाइट नियंत्रण का कब्जा है। चूंकि यह Z क्रम में पाठ के ऊपर है, सिल्वरलाइट नियंत्रण जो इनपुट को संभालने के लिए मिलता है।

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

कुछ महत्वपूर्ण विशेषताएं हैं -

  • शास्त्रीय UI तत्व या अन्य UI फ्रेमवर्क में नियंत्रण भी सिल्वरलाइट अनुप्रयोगों में बढ़ाया जाता है।

  • लगभग सभी मानक सिल्वरलाइट नियंत्रण टूलबॉक्स में पाए जा सकते हैं, जो इसका एक हिस्सा है System.Windows.Controls।

  • ये नियंत्रण XAML मार्कअप भाषा में भी बनाए जा सकते हैं।

सिल्वरलाइट नियंत्रण की पूरी विरासत पदानुक्रम इस प्रकार है -

Buttonवर्ग बटन नियंत्रण के सबसे बुनियादी प्रकार का प्रतिनिधित्व करता है। सिल्वरलाइट तीन प्रकार के बटन नियंत्रणों को पहचानता है: परिचितButton, को CheckBox, और यह RadioButton। ये सभी नियंत्रण सामग्री नियंत्रण हैं जो कि व्युत्पन्न हैंButtonBase। बटन वर्ग की श्रेणीबद्ध विरासत इस प्रकार है -

नीचे दिए गए सबसे अधिक उपयोग किए जाते हैं Properties एक बटन का।

अनु क्रमांक। संपत्ति विवरण
1

Background

हो जाता है या एक ब्रश सेट करता है जो नियंत्रण की पृष्ठभूमि प्रदान करता है। (नियंत्रण से विरासत में मिला)
2

BorderBrush

एक ब्रश मिलता है या एक नियंत्रण के सीमा भरने का वर्णन करता है। (नियंत्रण से विरासत में मिला)
3

BorderThickness

एक नियंत्रण की सीमा मोटाई हो जाती है या हो जाती है। (नियंत्रण से विरासत में मिला)
4

Content

एक ContentControl की सामग्री प्राप्त या सेट करता है। (ContentControl से अंतर्निहित)
5

ClickMode

डिवाइस मान के संदर्भ में क्लिक इवेंट होने पर इंगित करने वाला मान प्राप्त या सेट करता है। (ButtonBase से निहित)
6

ContentTemplate

उस डेटा टेम्प्लेट को हो जाता है या सेट कर दिया जाता है, जिसका उपयोग ContentControl की सामग्री को प्रदर्शित करने के लिए किया जाता है। (ContentControl से अंतर्निहित)
7

FontFamily

नियंत्रण में पाठ प्रदर्शित करने के लिए उपयोग किए जाने वाले फ़ॉन्ट को प्राप्त या सेट करता है। (नियंत्रण से विरासत में मिला)
8

FontSize

इस नियंत्रण में पाठ का आकार हो जाता है या सेट हो जाता है। (नियंत्रण से विरासत में मिला)
9

FontStyle

उस शैली को प्राप्त या सेट करता है जिसमें पाठ का प्रतिपादन किया गया है। (नियंत्रण से विरासत में मिला)
10

FontWeight

हो जाता है या निर्दिष्ट फ़ॉन्ट की मोटाई निर्धारित करता है। (नियंत्रण से विरासत में मिला)
1 1

Foreground

हो जाता है या एक ब्रश सेट करता है जो अग्रभूमि रंग का वर्णन करता है। (नियंत्रण से विरासत में मिला)
12

Height

फ्रेमवर्क की सुझाई गई ऊँचाई को प्राप्त करता है या सेट करता है। (फ्रेमवर्क से आच्छादित)
13

HorizontalAlignment

हो जाता है या क्षैतिज संरेखण विशेषताओं को सेट करता है जो एक फ्रेमवर्क में लागू होते हैं जब इसे एक लेआउट माता-पिता में बनाया जाता है, जैसे कि पैनल या आइटम नियंत्रण। (फ्रेमवर्क से आच्छादित)
14

IsEnabled

हो जाता है या यह दर्शाता है कि उपयोगकर्ता नियंत्रण के साथ बातचीत कर सकते हैं एक मूल्य निर्धारित करता है। (नियंत्रण से विरासत में मिला)
15

IsPressed

एक मान प्राप्त करता है जो बताता है कि एक बटनबेस वर्तमान में दबाया गया है या नहीं। (ButtonBase से निहित)
16

Margin

फ्रेमवर्क के बाहरी मार्जिन को प्राप्त या सेट करता है। (फ्रेमवर्क से आच्छादित)
17

Name

ऑब्जेक्ट का पहचान नाम हो जाता है या सेट हो जाता है। जब एक XAML प्रोसेसर XAML मार्कअप से ऑब्जेक्ट ट्री बनाता है, तो रन-टाइम कोड इस नाम से XAMLdeclared ऑब्जेक्ट को संदर्भित कर सकता है। (फ्रेमवर्क से आच्छादित)
18

Opacity

वस्तु की अपारदर्शिता की डिग्री प्राप्त या निर्धारित करता है। (UIElement से निहित)
19

Resources

स्थानीय रूप से परिभाषित संसाधन शब्दकोश हो जाता है। XAML में, आप XAML निहित संग्रह सिंटैक्स के माध्यम से, एक FrameworkElement.Resources संपत्ति तत्व के बाल ऑब्जेक्ट तत्वों के रूप में संसाधन आइटम स्थापित कर सकते हैं। (फ्रेमवर्क से आच्छादित)
20

Style

हो जाता है या एक उदाहरण शैली सेट करता है जिसे लेआउट और रेंडरिंग के दौरान इस ऑब्जेक्ट के लिए लागू किया जाता है। (फ्रेमवर्क से आच्छादित)
21

Template

नियंत्रण टेम्पलेट प्राप्त या सेट करता है। नियंत्रण टेम्पलेट UI में नियंत्रण की दृश्य उपस्थिति को परिभाषित करता है, और XAML मार्कअप में परिभाषित किया गया है। (नियंत्रण से विरासत में मिला)
22

VerticalAlignment

वर्टिकल अलाइनमेंट विशेषताओं को हो जाता है या सेट कर दिया जाता है जो कि किसी फ्रेमवर्क पर लागू होती है जब इसे किसी पैनल या आइटम्स कंट्रोल जैसे पैरेंट ऑब्जेक्ट में बनाया जाता है। (फ्रेमवर्क से आच्छादित)
23

Visibility

UIElement की दृश्यता हो जाती है या हो जाती है। एक UIElement जो दिखाई नहीं देता है, उसका प्रतिपादन नहीं किया जाता है और वह अपने इच्छित आकार को लेआउट में संचार नहीं करता है। (UIElement से निहित)
24

Width

फ्रेमवर्क की चौड़ाई हो जाती है या सेट हो जाती है। (फ्रेमवर्क से आच्छादित)

नीचे दिए गए आमतौर पर इस्तेमाल किया जाता है methods बटन का।

अनु क्रमांक। विधि और विवरण
1

ClearValue

एक निर्भरता संपत्ति के स्थानीय मूल्य को साफ करता है। (निर्भरता से बाहर आकर)
2

FindName

उस ऑब्जेक्ट को पुनर्प्राप्त करता है जिसमें निर्दिष्ट पहचानकर्ता नाम होता है। (फ्रेमवर्क से आच्छादित)
3

OnApplyTemplate

जब भी आवेदन कोड या आंतरिक प्रक्रियाओं (जैसे एक पुनर्निर्माण लेआउट पास) को लागू किया जाता है, तो CallTemplate को कॉल करें। सरल शब्दों में, इसका अर्थ है कि आपके ऐप में UI तत्व प्रदर्शित होने से ठीक पहले विधि को कहा जाता है। किसी वर्ग के डिफ़ॉल्ट पोस्ट-टेम्प्लेट लॉजिक को प्रभावित करने के लिए इस विधि को ओवरराइड करें। (फ्रेमवर्क से आच्छादित)
4

OnContentChanged

जब कॉन्टेंट प्रॉपर्टी की वैल्यू बदल जाती है, तब इनवाइट किया जाता है। (ContentControl से अंतर्निहित)
5

OnDragEnter

DragEnter ईवेंट होने से पहले कॉल किया गया। (नियंत्रण से विरासत में मिला)
6

OnDragLeave

DragLeave ईवेंट होने से पहले कॉल किया गया। (नियंत्रण से विरासत में मिला)
7

OnDragOver

DragOver ईवेंट होने से पहले कॉल किया गया। (नियंत्रण से विरासत में मिला)
8

OnDrop

ड्रॉप ईवेंट होने से पहले कॉल किया जाता है। (नियंत्रण से विरासत में मिला)
9

OnGotFocus

GotFocus घटना होने से पहले बुलाया। (नियंत्रण से विरासत में मिला)
10

OnKeyDown

KeyDown इवेंट होने से पहले कॉल किया जाता है। (नियंत्रण से विरासत में मिला)
1 1

OnKeyUp

KeyUp ईवेंट होने से पहले कॉल किया गया। (नियंत्रण से विरासत में मिला)
12

OnLostFocus

लॉस्टफोकस इवेंट होने से पहले कॉल किया जाता है। (नियंत्रण से विरासत में मिला)
13

SetBinding

प्रदान की गई बाध्यकारी वस्तु का उपयोग करके एक फ्रेमवर्क के लिए एक बंधन संलग्न करता है। (फ्रेमवर्क से आच्छादित)

नीचे दिए गए आमतौर पर इस्तेमाल किया जाता है Events बटन का।

अनु क्रमांक। घटना विवरण
1

Click

तब होता है जब एक बटन नियंत्रण क्लिक किया जाता है। (ButtonBase से निहित)
2

DataContextChanged

तब होता है जब FrameworkElement.ataContext की संपत्ति का मान बदलता है। (फ्रेमवर्क से आच्छादित)
3

DragEnter

तब होता है जब इनपुट सिस्टम इस तत्व के साथ एक अंतर्निहित ड्रैग इवेंट को लक्ष्य के रूप में रिपोर्ट करता है। (UIElement से निहित)
4

DragLeave

तब होता है जब इनपुट सिस्टम मूल के रूप में इस तत्व के साथ एक अंतर्निहित खींचें घटना की रिपोर्ट करता है। (UIElement से निहित)
5

DragOver

तब होता है जब इनपुट सिस्टम संभावित ड्रॉप लक्ष्य के रूप में इस तत्व के साथ एक अंतर्निहित ड्रैग घटना की रिपोर्ट करता है। (UIElement से निहित)
6

DragStarting

तब होता है जब एक ड्रैग ऑपरेशन शुरू किया जाता है। (UIElement से निहित)
7

GotFocus

तब होता है जब एक UIElement फोकस प्राप्त करता है। (UIElement से निहित)
8

Holding

तब होता है जब इस तत्व के हिट परीक्षण क्षेत्र पर अन्यथा अखंडित होल्ड इंटरैक्शन होता है। (UIElement से निहित)
9

IsEnabledChanged

तब होता है जब अक्षम संपत्ति बदल जाती है। (नियंत्रण से विरासत में मिला)
10

KeyDown

तब होता है जब एक कीबोर्ड कुंजी दबाया जाता है जबकि UIElement फोकस होता है। (UIElement से निहित)
1 1

KeyUp

तब होता है जब एक कीबोर्ड कुंजी जारी की जाती है जबकि UIElement फोकस होता है। (UIElement से निहित)
12

LostFocus

तब होता है जब एक UIElement फोकस खो देता है। (UIElement से निहित)
13

SizeChanged

तब होता है जब या तो हाइटहाइट या एक्चुअलविदथ प्रॉपर्टी फ्रेमवर्क पर वैल्यू में बदलाव करता है। (फ्रेमवर्क से आच्छादित)
अनु क्रमांक। बटन और विवरण
1 HyperlinkButton

हाइपरलिंकटूटन मानक बटन पृष्ठभूमि नहीं खींचता है। इसके बजाय, यह केवल आपके द्वारा आपूर्ति की जाने वाली सामग्री को प्रस्तुत करता है।
2 टॉगलबटन और रिपीटबटन

जब तक बटन दबाया जाता है, तब तक रिपीट बट्टन नियंत्रण आग की घटनाओं पर क्लिक करें। ToggleButton नियंत्रण एक बटन को दर्शाता है जिसमें दो अवस्थाएँ (क्लिक की गई या अस्पष्ट) हैं।
3 चेक बॉक्स

एक नियंत्रण जो एक उपयोगकर्ता (चेक) या डी-चयन (अनचेक) का चयन कर सकता है। यह उन विकल्पों की एक सूची प्रदान करता है, जो उपयोगकर्ता चुन सकता है, जैसे कि आवेदन करने के लिए सेटिंग्स की सूची।
4 रेडियो बटन

RadioButton एक बटन है जो उपयोगकर्ता को विकल्पों के समूह से एकल विकल्प का चयन करने की अनुमति देता है।

बटन मॉडल सामग्री के लिए सामग्री का एक रूप प्रदान करते हैं। मॉडल नियंत्रण में बहुत फसल लेते हैं। विचार सरल है। यह किसी भी सामग्री को स्वीकार करेगा न कि केवल पाठ को। यदि आप वास्तव में विदेशी बटन बनाना चाहते हैं, तो आप अन्य सामग्री नियंत्रण जैसे कि टेक्स्ट बॉक्स और बटन अंदर (और अंदर अभी भी घोंसले के तत्व) को रख सकते हैं। यह संदिग्ध है कि इस तरह के इंटरफ़ेस से बहुत समझ में आएगा, लेकिन यह संभव है।

आइए हम बटन के साथ एक सरल उदाहरण देखें, अंदर बटन अन्य सामग्री नियंत्रण।

<UserControl x:Class = "ContentModel.MainPage" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   xmlns:d = "http://schemas.microsoft.com/expression/blend/2008" 
   xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006" 
   mc:Ignorable = "d" 
   d:DesignHeight = "300" d:DesignWidth = "400">
   
   <Grid x:Name = "LayoutRoot" Background = "White"> 
	
      <Button Margin = "3" Height = "70" Width = "215"> 
         <Grid Margin = "5"> 
            <Polygon Points = "100,25 125,0 200,25 125,50" Fill = "LightSteelBlue" /> 
            <Polygon Points = "100,25 75,0 0,25 75,50" Fill = "LightGray"/> 
         </Grid> 
      </Button> 
		
   </Grid> 
	
</UserControl>

जब उपरोक्त कोड संकलित और निष्पादित किया जाता है, तो आपको निम्न बटन दिखाई देगा।

RangeControl

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

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

की पदानुक्रमित विरासत Slider वर्ग इस प्रकार है -

नीचे दिए गए आमतौर पर इस्तेमाल किया जाता है properties का Slider।

अनु क्रमांक। संपत्ति विवरण
1

Header

नियंत्रण के हेडर के लिए सामग्री प्राप्त या सेट करता है।
2

HeaderProperty

हैडर निर्भरता संपत्ति की पहचान करता है।
3

HeaderTemplate

नियंत्रण के हेडर की सामग्री को प्रदर्शित करने के लिए उपयोग की जाने वाली DataTemplate को जाता है या सेट करता है।
4

HeaderTemplateProperty

हेडरटेम्पलेट निर्भरता संपत्ति की पहचान करता है।
5

IntermediateValue

उपयोगकर्ता को इसके साथ इंटरैक्ट करते समय, स्लाइडर का मान हो जाता है या सेट हो जाता है, इससे पहले कि मूल्य टिक या स्टेप वैल्यू के लिए तड़क जाए। SnapsTo गुण स्लाइडर का मान निर्दिष्ट करता है।
6

IntermediateValueProperty

इंटरमीडिएट वेल्यू निर्भरता संपत्ति की पहचान करता है।
7

IsDirectionReversed

एक मान प्राप्त करता है या बढ़ता है जो बढ़ते मूल्य की दिशा को इंगित करता है।
8

IsDirectionReversedProperty

IsDirectionReversed निर्भरता गुण की पहचान करता है।
9

IsThumbToolTipEnabled

एक मान प्राप्त करता है या निर्धारित करता है कि स्लाइडर मूल्य अंगूठे के घटक के लिए टूल टिप में दिखाया गया है या नहीं।
10

IsThumbToolTipEnabledProperty

IsThumbToolTipEnabled निर्भरता गुण की पहचान करता है।
1 1

Orientation

एक स्लाइडर के उन्मुखीकरण को प्राप्त करता है या सेट करता है।
12

OrientationProperty

ओरिएंटेशन डिपेंडेंसी प्रॉपर्टी की पहचान करता है।
13

StepFrequency

हो जाता है या मान श्रेणी का मान भाग सेट करता है जिसके लिए चरण बनाए जाने चाहिए।
14

StepFrequencyProperty

StepFrequency निर्भरता संपत्ति की पहचान करता है।
15

ThumbToolTipValueConverter

हो जाता है या कनवर्टर लॉजिक सेट करता है जो स्लाइडर की रेंज वैल्यू को टूल टिप कंटेंट में परिवर्तित करता है।
16

ThumbToolTipValueConverterProperty

ThumbToolTipValueConverter निर्भरता गुण की पहचान करता है।
17

TickFrequency

हो जाता है या मूल्य सीमा की वृद्धि सेट करता है कि टिक के लिए बनाया जाना चाहिए।
18

TickFrequencyProperty

टिकफ्रीक्वेंसी निर्भरता संपत्ति की पहचान करता है।
19

TickPlacement

हो जाता है या एक मान सेट करता है जो इंगित करता है कि ट्रैक के संबंध में टिक के निशान कहाँ खींचना है।
20

TickPlacementProperty

टिकप्लस निर्भरता संपत्ति की पहचान करता है।

नीचे दिए गए आमतौर पर इस्तेमाल किया जाता है events में Slider कक्षा।

अनु क्रमांक। घटना विवरण
1

ManipulationCompleted

तब होता है जब UIElement पर एक हेरफेर पूरा हो गया है। (UIElement से निहित)
2

ManipulationDelta

तब होता है जब इनपुट डिवाइस हेरफेर के दौरान स्थिति बदलता है। (UIElement से निहित)
3

ManipulationInertiaStarting

तब होता है जब इनपुट डिवाइस एक हेरफेर के दौरान UIElement ऑब्जेक्ट के साथ संपर्क खो देता है और जड़ता शुरू होती है। (UIElement से निहित)
4

ManipulationStarted

तब होता है जब एक इनपुट डिवाइस UIElement पर एक हेरफेर शुरू करता है। (UIElement से निहित)
5

ManipulationStarting

तब होता है जब हेरफेर प्रोसेसर पहली बार बनाया जाता है। (UIElement से निहित)
6

ValueChanged

तब होता है जब सीमा मूल्य बदल जाता है। (रेंजबेस से विहित)

नीचे दिए गए आमतौर पर इस्तेमाल किया जाता है methods in स्लाइडर वर्ग।

अनु क्रमांक। विधि और विवरण
1

OnManipulationCompleted

ManipulationCompleted इवेंट होने से पहले कॉल किया गया। (नियंत्रण से विरासत में मिला)
2

OnManipulationDelta

मैनीपुलेशनडेल्टा घटना होने से पहले कॉल किया जाता है। (नियंत्रण से विरासत में मिला)
3

OnManipulationInertiaStarting

ManipulationInertiaStarting ईवेंट होने से पहले कॉल किया जाता है। (नियंत्रण से विरासत में मिला)
4

OnManipulationStarted

मैनीपुलेशनस्टार्टेड ईवेंट होने से पहले कॉल किया जाता है। (नियंत्रण से विरासत में मिला)
5

OnManipulationStarting

मैनीपुलेशनस्टार्टिंग ईवेंट होने से पहले कॉल किया जाता है। (नियंत्रण से विरासत में मिला)
6

OnMaximumChanged

अधिकतम संपत्ति में परिवर्तन होने पर कॉल किया जाता है। (रेंजबेस से विहित)
7

OnMinimumChanged

न्यूनतम संपत्ति में परिवर्तन होने पर कॉल किया जाता है। (रेंजबेस से विहित)
8

OnValueChanged

मान परिवर्तन किए गए रूट किए गए ईवेंट। (रेंजबेस से विहित)
9

SetBinding

प्रदान की गई बाध्यकारी वस्तु का उपयोग करके एक फ्रेमवर्क के लिए एक बंधन संलग्न करता है। (फ्रेमवर्क से आच्छादित)
10

SetValue

डिपेंडेंसीऑब्जेक्ट पर निर्भरता संपत्ति का स्थानीय मान सेट करता है। (निर्भरता से बाहर आकर)

उदाहरण

आइए हम एक सरल उदाहरण देखें जिसमें एक स्लाइडर और एक दीर्घवृत्त जोड़ा जाता है और स्लाइडर ग्रहण की चौड़ाई को नियंत्रित करता है।

<UserControl x:Class = "SliderExample.MainPage" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   xmlns:d = "http://schemas.microsoft.com/expression/blend/2008" xmlns:mc = "
   http://schemas.openxmlformats.org/markup-compatibility/2006"  
   mc:Ignorable = "d" d:DesignWidth = "640" d:DesignHeight = "480"> 
   
   <Grid x:Name = "LayoutRoot">
	
      <Grid.RowDefinitions> 
         <RowDefinition Height = "Auto" /> 
         <RowDefinition /> 
      </Grid.RowDefinitions>  
		
      <Slider Minimum = "1" Maximum = "400" Value = "1" 
         ValueChanged = "Slider_ValueChanged" />  
			
      <Ellipse Grid.Row = "1" Fill = "Aqua" Width = "1" x:Name = "myEllipse" /> 
		
   </Grid> 
	
</UserControl>

नीचे दिया गया है value changed event कार्यान्वयन C # है।

using System.Windows; 
using System.Windows.Controls; 
 
namespace SliderExample { 

   public partial class MainPage : UserControl { 
	
      public MainPage() { 
         InitializeComponent(); 
      }
	  
      private void Slider_ValueChanged(object sender, 
         RoutedPropertyChangedEventArgs<double> e) { 
			
            if (myEllipse != null) { 
               myEllipse.Width = e.NewValue; 
            } 
      } 
   } 
}

जब उपरोक्त कोड संकलित और निष्पादित किया जाता है, तो आपको निम्न आउटपुट दिखाई देगा। जैसा कि आप देख सकते हैं, जब आप स्लाइडर को बाएं से दाएं स्थानांतरित करते हैं, तो दीर्घवृत्त की चौड़ाई बढ़ जाती है।

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

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

ListBox वर्ग की श्रेणीबद्ध विरासत इस प्रकार है -

नीचे दिए गए आमतौर पर इस्तेमाल किया जाता है Properties का ListBox कक्षा।

अनु क्रमांक। संपत्ति विवरण
1

Background

हो जाता है या एक ब्रश सेट करता है जो नियंत्रण की पृष्ठभूमि प्रदान करता है। (नियंत्रण से विरासत में मिला)
2

BorderThickness

एक नियंत्रण की सीमा मोटाई हो जाती है या हो जाती है। (नियंत्रण से विरासत में मिला)
3

FontFamily

नियंत्रण में पाठ प्रदर्शित करने के लिए उपयोग किए जाने वाले फ़ॉन्ट को प्राप्त या सेट करता है। (नियंत्रण से विरासत में मिला)
4

FontSize

इस नियंत्रण में पाठ का आकार हो जाता है या सेट हो जाता है। (नियंत्रण से विरासत में मिला)
5

FontStyle

उस शैली को प्राप्त या सेट करता है जिसमें पाठ का प्रतिपादन किया गया है। (नियंत्रण से विरासत में मिला)
6

FontWeight

हो जाता है या निर्दिष्ट फ़ॉन्ट की मोटाई निर्धारित करता है। (नियंत्रण से विरासत में मिला)
7

Foreground

हो जाता है या एक ब्रश सेट करता है जो अग्रभूमि रंग का वर्णन करता है। (नियंत्रण से विरासत में मिला)
8

GroupStyle

GroupStyle ऑब्जेक्ट का एक संग्रह हो जाता है जो प्रत्येक स्तर के समूहों की उपस्थिति को परिभाषित करता है। (आइटम्सकंट्रोल से निहित)
9

Height

फ्रेमवर्क की सुझाई गई ऊँचाई को प्राप्त करता है या सेट करता है। (फ्रेमवर्क से आच्छादित)
10

HorizontalAlignment

हो जाता है या क्षैतिज संरेखण विशेषताओं को सेट करता है जो एक फ्रेमवर्क में लागू होते हैं जब इसे एक लेआउट माता-पिता में बनाया जाता है, जैसे कि पैनल या आइटम नियंत्रण। (फ्रेमवर्क से आच्छादित)
1 1

IsEnabled

हो जाता है या यह दर्शाता है कि उपयोगकर्ता नियंत्रण के साथ बातचीत कर सकते हैं एक मूल्य निर्धारित करता है। (नियंत्रण से विरासत में मिला)
12

Item

नियंत्रण की सामग्री उत्पन्न करने के लिए उपयोग किए जाने वाले संग्रह को प्राप्त करता है। (आइटम्सकंट्रोल से निहित)
13

ItemsSource

हो जाता है या ItemControl की सामग्री उत्पन्न करने के लिए उपयोग की जाने वाली वस्तु स्रोत सेट करता है। (आइटम्सकंट्रोल से निहित)
14

Margin

फ्रेमवर्क के बाहरी मार्जिन को प्राप्त या सेट करता है। (फ्रेमवर्क से आच्छादित)
15

Name

ऑब्जेक्ट का पहचान नाम हो जाता है या सेट हो जाता है। जब एक XAML प्रोसेसर XAML मार्कअप से ऑब्जेक्ट ट्री बनाता है, तो रन-टाइम कोड इस नाम से XAML- घोषित ऑब्जेक्ट को संदर्भित कर सकता है। (फ्रेमवर्क से आच्छादित)
16

Opacity

वस्तु की अपारदर्शिता की डिग्री प्राप्त या निर्धारित करता है। (UIElement से निहित)
17

SelectedIndex

चयनित आइटम का सूचकांक प्राप्त या सेट करता है। (चयनकर्ता से आबद्ध)
18

SelectedItem

चयनित आइटम को प्राप्त या सेट करता है। (चयनकर्ता से आबद्ध)
19

SelectedValue

हो जाता है या चयनित आइटम का मान सेट कर देता है, जो चयनितवैल्यूपैथ का उपयोग करके प्राप्त किया जाता है। (चयनकर्ता से आबद्ध)
20

Style

हो जाता है या एक उदाहरण शैली सेट करता है जिसे लेआउट और रेंडरिंग के दौरान इस ऑब्जेक्ट के लिए लागू किया जाता है। (फ्रेमवर्क से आच्छादित)
21

VerticalAlignment

वर्टिकल अलाइनमेंट विशेषताओं को हो जाता है या सेट कर दिया जाता है जो कि किसी फ्रेमवर्क पर लागू होती है जब इसे किसी पैनल या आइटम्स कंट्रोल जैसे पैरेंट ऑब्जेक्ट में बनाया जाता है। (फ्रेमवर्क से आच्छादित)
22

Width

फ्रेमवर्क की चौड़ाई हो जाती है या सेट हो जाती है। (फ्रेमवर्क से आच्छादित)

नीचे दिए गए सबसे अधिक उपयोग किए जाते हैं Events का ListBox।

अनु क्रमांक। घटना विवरण
1

DragEnter

तब होता है जब इनपुट सिस्टम इस तत्व के साथ एक अंतर्निहित ड्रैग इवेंट को लक्ष्य के रूप में रिपोर्ट करता है। (UIElement से निहित)
2

DragLeave

तब होता है जब इनपुट सिस्टम मूल के रूप में इस तत्व के साथ एक अंतर्निहित खींचें घटना की रिपोर्ट करता है। (UIElement से निहित)
3

DragOver

तब होता है जब इनपुट सिस्टम संभावित ड्रॉप लक्ष्य के रूप में इस तत्व के साथ एक अंतर्निहित ड्रैग घटना की रिपोर्ट करता है। (UIElement से निहित)
4

DragStarting

तब होता है जब एक ड्रैग ऑपरेशन शुरू किया जाता है। (UIElement से निहित)
5

Drop

तब होता है जब इनपुट प्रणाली ड्रॉप लक्ष्य के रूप में इस तत्व के साथ एक अंतर्निहित ड्रॉप घटना की रिपोर्ट करती है। (UIElement से निहित)
6

DropCompleted

एक ड्रैग-एंड-ड्रॉप ऑपरेशन समाप्त होने पर होता है। (UIElement से निहित)
7

GotFocus

तब होता है जब एक UIElement फोकस प्राप्त करता है। (UIElement से निहित)
8

IsEnabledChanged

तब होता है जब अक्षम संपत्ति बदल जाती है। (नियंत्रण से विरासत में मिला)
9

KeyDown

तब होता है जब एक कीबोर्ड कुंजी दबाया जाता है जबकि UIElement फोकस होता है। (UIElement से निहित)
10

KeyUp

तब होता है जब एक कीबोर्ड कुंजी जारी की जाती है जबकि UIElement फोकस होता है। (UIElement से निहित)
1 1

LostFocus

तब होता है जब एक UIElement फोकस खो देता है। (UIElement से निहित)
12

SelectionChanged

तब होता है जब वर्तमान में चयनित आइटम बदलता है। (चयनकर्ता से आबद्ध)
13

SizeChanged

तब होता है जब या तो हाइटहाइट या एक्चुअलविदथ प्रॉपर्टी फ्रेमवर्क पर वैल्यू में बदलाव करता है। (फ्रेमवर्क से आच्छादित)

नीचे दिए गए सबसे अधिक उपयोग किए जाते हैं Methods का ListBox।

अनु क्रमांक। विधि और विवरण
1

Arrange

बाल वस्तुओं की स्थिति और एक UIElement के लिए एक आकार निर्धारित करता है। अपने बच्चे के तत्वों के लिए कस्टम लेआउट को लागू करने वाली मूल वस्तुओं को अपने लेआउट ओवरराइड कार्यान्वयन से इस विधि को कॉल करना चाहिए ताकि एक पुनरावर्ती लेआउट अपडेट हो सके। (UIElement से निहित)
2

FindName

उस ऑब्जेक्ट को पुनर्प्राप्त करता है जिसमें निर्दिष्ट पहचानकर्ता नाम होता है। (फ्रेमवर्क से आच्छादित)
3

Focus

नियंत्रण पर ध्यान केंद्रित करने का प्रयास। (नियंत्रण से विरासत में मिला)
4

GetValue

डिपेंडेंसीऑबजेक्ट से एक निर्भरता संपत्ति के वर्तमान प्रभावी मूल्य को लौटाता है। (निर्भरता से बाहर आकर)
5

IndexFromContainer

इंडेक्स को उस आइटम पर लौटाता है जिसमें निर्दिष्ट, उत्पन्न कंटेनर है। (आइटम्सकंट्रोल से निहित)
6

OnDragEnter

DragEnter ईवेंट होने से पहले कॉल किया गया। (नियंत्रण से विरासत में मिला)
7

OnDragLeave

DragLeave ईवेंट होने से पहले कॉल किया गया। (नियंत्रण से विरासत में मिला)
8

OnDragOver

DragOver ईवेंट होने से पहले कॉल किया गया। (नियंत्रण से विरासत में मिला)
9

OnDrop

ड्रॉप ईवेंट होने से पहले कॉल किया जाता है। (नियंत्रण से विरासत में मिला)
10

OnKeyDown

KeyDown इवेंट होने से पहले कॉल किया जाता है। (नियंत्रण से विरासत में मिला)
1 1

OnKeyUp

KeyUp ईवेंट होने से पहले कॉल किया गया। (नियंत्रण से विरासत में मिला)
12

OnLostFocus

लॉस्टफोकस इवेंट होने से पहले कॉल किया जाता है। (नियंत्रण से विरासत में मिला)
13

ReadLocalValue

यदि कोई स्थानीय मान सेट है, तो निर्भरता गुण का स्थानीय मान लौटाता है। (निर्भरता से बाहर आकर)
14

SetBinding

प्रदान की गई बाध्यकारी वस्तु का उपयोग करके एक फ्रेमवर्क के लिए एक बंधन संलग्न करता है। (फ्रेमवर्क से आच्छादित)
15

SetValue

डिपेंडेंसीऑब्जेक्ट पर निर्भरता संपत्ति का स्थानीय मान सेट करता है। (निर्भरता से बाहर आकर)

आइए हम एक सरल उदाहरण देखें जिसमें विभिन्न UI तत्व जोड़े जाते हैं ListBox।

<UserControl x:Class = "ListBoxExample.MainPage" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   xmlns:d = "http://schemas.microsoft.com/expression/blend/2008" 
   xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006"  
   mc:Ignorable = "d" d:DesignWidth = "640" d:DesignHeight = "480"> 
   
   <Grid x:Name = "LayoutRoot">
	
      <ListBox x:Name = "myList">
		
         <TextBlock Text = "First item" /> 
         <Button Content = "Second item" /> 
         <Path Fill = "Blue" Data = "M4,0 l-4,10 8,0z M15,0 l-4,10 8,0z M26,0 l4,10 8,0z" 
            Margin = "10" /> 
			
         <StackPanel Orientation = "Horizontal"> 
            <Ellipse Fill = "Red" Height = "30" Width = "100" /> 
            <TextBlock Text = "Name: " /> 
            <TextBox Width = "200" /> 
         </StackPanel>
			
         <TextBlock Text = "More..." /> 
			
      </ListBox> 
		
   </Grid>
	
</UserControl>

नीचे दिए गए C # कार्यान्वयन है।

using System.Windows.Controls; 
 
namespace ListBoxExample { 

   public partial class MainPage : UserControl { 
	
      public MainPage() { 
         InitializeComponent();  
			
         myList.Items.Add("String entry"); 
         myList.Items.Add(new Button { Content = "Content entry" });  
      } 
   } 
}

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

अनु क्रमांक। नियंत्रण और विवरण
1 कैलेंडर और तारीख

कैलेंडर और DatePicker एक नियंत्रण का प्रतिनिधित्व करता है जो उपयोगकर्ता को एक दृश्य कैलेंडर डिस्प्ले का उपयोग करके एक तिथि का चयन करने में सक्षम बनाता है। यह माउस या कीबोर्ड का उपयोग करके कुछ बुनियादी नेविगेशन प्रदान करता है।
2 TabControl

एक कंटेनर जो वस्तुओं को अलग-अलग टैब में रखता है और उपयोगकर्ता को एक बार में सिर्फ एक टैब देखने की अनुमति देता है। यह टैब हेडर पर क्लिक करके उपयोगकर्ता को कई अलग-अलग दृश्यों में से चयन करने की अनुमति देता है।
3 पॉप अप

यह वर्ग एप्लिकेशन विंडो के सीमा के भीतर मौजूदा सामग्री के शीर्ष पर सामग्री को प्रदर्शित करता है। यह अन्य सामग्री पर अस्थायी रूप से प्रदर्शित होता है।
4 टूलटिप

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

ए Templateनियंत्रण के समग्र स्वरूप और दृश्य उपस्थिति का वर्णन करता है। प्रत्येक नियंत्रण के लिए, इसके साथ एक डिफ़ॉल्ट टेम्पलेट जुड़ा होता है, जो उस नियंत्रण को उपस्थिति देता है।

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

कुछ महत्वपूर्ण विशेषताएं हैं -

  • यूआई तत्वों के सभी प्रकार के रूप में अच्छी तरह से व्यवहार की तरह है Button एक उपस्थिति और व्यवहार है।

  • Click घटना या mouse hover ईवेंट व्यवहार हैं, जो एक क्लिक और होवर की प्रतिक्रिया में निकाल दिए जाते हैं और बटन का एक डिफ़ॉल्ट स्वरूप होता है, जिसे द्वारा बदला जा सकता है Control टेम्पलेट।

आइए हम एक सरल उदाहरण को फिर से देखें जिसमें एक बटन को टेम्पलेट के साथ परिभाषित किया गया है।

<UserControl x:Class = "ButtonTemplate.MainPage" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   xmlns:d = "http://schemas.microsoft.com/expression/blend/2008" 
   xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006"  
   mc:Ignorable = "d" d:DesignWidth = "640" d:DesignHeight = "480"> 
   
   <Grid x:Name = "LayoutRoot" HorizontalAlignment = "Center" 
      VerticalAlignment = "Center">
		
      <Button Height = "100" Width = "100" Content = "Click!" 
         HorizontalContentAlignment = "Left" Click = "button_Click">
			
         <Button.Template> 
            <ControlTemplate TargetType = "Button"> 
				
               <Grid> 
					
                  <Ellipse Fill = "Gray" Stroke = "Black" 
                     StrokeThickness = "3" Margin = "-64,0,0,0" /> 
							
                  <ContentPresenter HorizontalAlignment = "{TemplateBinding 
                     HorizontalContentAlignment}" VerticalAlignment = "Center" 
                     Content = "{TemplateBinding Content}" /> 
               </Grid> 
					
            </ControlTemplate>
				
         </Button.Template>
			
      </Button>  
		
   </Grid> 
	
</UserControl>

जब उपरोक्त कोड संकलित और निष्पादित किया जाता है, तो आपको निम्न आउटपुट दिखाई देगा।

टेम्पलेट कनेक्ट करना

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

यह अच्छा है यदि आपका उपयोगकर्ता बता सकता है कि इनपुट के जवाब में कौन सा अनुप्रयोग संभव है। कुछ हद तक, यह सिर्फ बटन की तरह दिखने वाले बटन बनाकर किया जा सकता है। यदि कुछ क्लिक करने योग्य लगता है, तो यह संभवतः है।

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

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

राज्य और राज्य समूह

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

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

इसलिए, हमारे पास यहां चार और राज्य हैं। किसी भी समय, चेकबॉक्स की दृश्य स्थिति या तो होनी चाहिएNormal, Mouse over, Checked या Disabled। इसी समय, यह या तो होना चाहिएchecked, unchecked या indeterminate।

विजुअल स्टेट मैनेजर

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

किसी टेम्पलेट में विज़ुअल स्टेट्स जोड़ने के लिए, आप एक प्रॉपर्टी एलिमेंट जोड़कर शुरू करते हैं।

  • दृश्य स्थिति से निपटने के लिए आप जो सबसे सरल कार्य कर सकते हैं वह है एनीमेशन को परिभाषित करना जो नियंत्रण के किसी विशेष अवस्था में प्रवेश करने पर चलेगा।

  • जब भी वे स्थिति बदलते हैं, तो नियंत्रण दृश्य राज्य प्रबंधक वर्ग को सूचित करता है।

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

  • इसलिए, जब चेकबॉक्स माउस को ओवरस्टेट में प्रवेश करता है, तो यह एनीमेशन चलेगा, जिसमें टेम्पलेट के कुछ हिस्से का रंग बदल जाएगा।

चेकबॉक्स के लिए कस्टम टेम्पलेट बनाने के लिए दृश्य राज्य तंत्र का उपयोग करके एक साधारण उदाहरण पर एक नजर डालते हैं जो राज्य परिवर्तनों को दर्शाता है।

नीचे दिया गया XAML कोड कस्टम बॉक्स के लिए चेक बॉक्स के साथ है visual state।

<UserControl 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   x:Class = "CheckboxVisualState.Page" 
   Width = "640" Height="480" 
   xmlns:vsm = "clrnamespace:System.Windows;assembly = System.Windows" 
   xmlns:d = "http://schemas.microsoft.com/expression/blend/2008" 
   xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006" 
   mc:Ignorable = "d"> 
   
   <UserControl.Resources> 
      <ControlTemplate x:Key = "CheckBoxControlTemplate1" TargetType = "CheckBox"> 
	
         <Grid> 
		
            <vsm:VisualStateManager.VisualStateGroups> 
			
               <vsm:VisualStateGroup x:Name = "FocusStates"> 
                  <vsm:VisualState x:Name = "ContentFocused"/> 
                  <vsm:VisualState x:Name = "Focused"/> 
                  <vsm:VisualState x:Name = "Unfocused"/>
               </vsm:VisualStateGroup> 
				
               <vsm:VisualStateGroup x:Name = "CommonStates"> 
				
                  <vsm:VisualStateGroup.Transitions> 
                     <vsm:VisualTransition GeneratedDuration = "00:00:00.5000000"/> 
                  </vsm:VisualStateGroup.Transitions> 
					
                  <vsm:VisualState x:Name = "MouseOver"> 
					
                     <Storyboard>
						
                        <ColorAnimationUsingKeyFrames BeginTime = "00:00:00" 
                           Duration = "00:00:00.0010000" Storyboard.TargetName = "background" 
                           Storyboard.TargetProperty = "(Shape.Fill).
                           (SolidColorBrush.Color)"> 
									
                              <SplineColorKeyFrame KeyTime = "00:00:00" Value = "#FFFF0000"/> 
                        </ColorAnimationUsingKeyFrames> 
							
                     </Storyboard> 
						
                  </vsm:VisualState>
					
                  <vsm:VisualState x:Name = "Pressed"> 
					
                     <Storyboard>
						
                        <ColorAnimationUsingKeyFrames BeginTime = "00:00:00" 
                           Duration = "00:00:00.0010000" Storyboard.TargetName = "background" 
                           Storyboard.TargetProperty = "(Shape.Fill).
                           (SolidColorBrush.Color)"> 
									
                              <SplineColorKeyFrame KeyTime = "00:00:00" Value = "#FFCEFF00"/> 
                        </ColorAnimationUsingKeyFrames>
							
                     </Storyboard> 
						
                  </vsm:VisualState>
					
                  <vsm:VisualState x:Name = "Disabled"/> 
                  <vsm:VisualState x:Name = "Normal"/> 
					
               </vsm:VisualStateGroup> 
				
               <vsm:VisualStateGroup x:Name = "CheckStates">
				
                  <vsm:VisualStateGroup.Transitions> 
                     <vsm:VisualTransition GeneratedDuration = "00:00:00.5000000"/> 
                  </vsm:VisualStateGroup.Transitions> 
					
                  <vsm:VisualState x:Name = "Checked">
					
                     <Storyboard> 
						
                        <DoubleAnimationUsingKeyFrames BeginTime = "00:00:00" 
                           Duration = "00:00:00.0010000" Storyboard.TargetName = "checkPath" 
                           Storyboard.TargetProperty = "(UIElement.Opacity)"> 
									
                              <SplineDoubleKeyFrame KeyTime = "00:00:00" Value = "1"/> 
                        </DoubleAnimationUsingKeyFrames> 
							
                     </Storyboard> 
						
                  </vsm:VisualState> 
					
                  <vsm:VisualState x:Name = "Unchecked"/> 
                  <vsm:VisualState x:Name = "Indeterminate"/> 
					
               </vsm:VisualStateGroup> 
				
            </vsm:VisualStateManager.VisualStateGroups> 
			
            <Grid.ColumnDefinitions> 
			
               <ColumnDefinition Width = "Auto"/> 
                  <ColumnDefinition Width = "3.61782296696066"/> 
               <ColumnDefinition Width = "Auto"/> 
				
            </Grid.ColumnDefinitions> 
			
            <Canvas Height = "50" HorizontalAlignment = "Left" VerticalAlignment = "Top" 
               Width = "50">
				
               <Rectangle Height = "33.746" x:Name = "background" Width = "33.746" 
                  Canvas.Left = "8.452" Canvas.Top = "7.88" Fill = "#FFFFFFFF" 
                  Stroke = "#FF000000" 
                  RadiusX = "5.507" RadiusY = "5.507"/> 
						
               <Path Height = "40.25" x:Name = "checkPath" Width = "39.75" Opacity = "0" 
                  Canvas.Left = "5.959" Canvas.Top = "7.903" Stretch = "Fill" 
                  Stroke = "#FF1F9300" StrokeThickness = "3" 
                  Data = "M1.5,1.5 C15.495283,8.7014561 27.056604,18.720875 33.75,33.75 
                  M36,3.75 C22.004717,10.951456 10.443395,20.970875 3.7499986,36"/> 
						
            </Canvas> 
				
            <ContentPresenter HorizontalAlignment = "Left" 
               Margin = "{TemplateBinding Padding}" 
               VerticalAlignment = "{TemplateBinding VerticalContentAlignment}" 
               Grid.Column = "2" Grid.ColumnSpan = "1" d:LayoutOverrides = "Height"/>
					
         </Grid> 
		
      </ControlTemplate> 
	
   </UserControl.Resources> 
 
   <Grid x:Name = "LayoutRoot" Background = "White" > 
      <CheckBox HorizontalAlignment = "Left" 
         Margin = "52.5410003662109,53.5970001220703,0,0" VerticalAlignment = "Top" 
         Template = "{StaticResource CheckBoxControlTemplate1}" 
         Content = "CheckBox"/> 
   </Grid>
	
</UserControl>

जब उपरोक्त कोड संकलित और निष्पादित किया जाता है, तो आपको निम्न वेब पेज दिखाई देगा, जिसमें एक है checkbox।

जब curser चेकबॉक्स क्षेत्र में प्रवेश करता है, तो यह राज्य को बदल देगा।

जब आप क्लिक करें checkbox, आप निम्नलिखित राज्य देखेंगे।

हम आपको बेहतर समझ के लिए उपरोक्त उदाहरण को निष्पादित करने की सलाह देते हैं।

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

डेटा बाइंडिंग निम्न दो प्रकार की होती है -

  • एकतरफा डेटा बाइंडिंग
  • दो-तरफ़ा डेटा बाइंडिंग

वन-वे डेटा बाइंडिंग

एकतरफा डेटा बाइंडिंग में, डेटा अपने स्रोत (जो कि डेटा को धारण करने वाली वस्तु है) से उसके लक्ष्य से जुड़ा होता है (वह ऑब्जेक्ट जो डेटा प्रदर्शित करता है)।

आइए हम एक-तरफ़ा डेटा बाइंडिंग के सरल उदाहरण पर नज़र डालते हैं।

नीचे दिया गया XAML कोड है जिसमें दो लेबल, दो टेक्स्ट बॉक्स और एक बटन कुछ गुणों के साथ बनाए गए हैं।

<UserControl x:Class = "DataBinding.MainPage" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   xmlns:d = "http://schemas.microsoft.com/expression/blend/2008" 
   xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006" 
   mc:Ignorable = "d" 
   d:DesignHeight = "300" d:DesignWidth = "400">
   
   <Grid x:Name = "LayoutRoot" Background = "White"> 
	
      <Grid.RowDefinitions> 
         <RowDefinition Height = "Auto" /> 
         <RowDefinition Height = "Auto" /> 
         <RowDefinition Height = "*" /> 
      </Grid.RowDefinitions> 
		
      <Grid.ColumnDefinitions> 
         <ColumnDefinition Width = "Auto" /> 
         <ColumnDefinition Width = "200" />
      </Grid.ColumnDefinitions> 
		
      <TextBlock Name = "nameLabel" Margin = "2">Name:</TextBlock> 
      <TextBox Name = "nameText" Grid.Column = "1" Margin = "2" 
         Text = "{Binding Name, Mode=OneWay}"/>  
			
      <TextBlock Name = "ageLabel" Margin = "2" Grid.Row = "1">Age:</TextBlock> 
		
      <TextBox Name = "ageText" Grid.Column = "1" Grid.Row = "1" Margin="2" 
         Text = "{Binding Age, Mode = OneWay}"/>
			
      <StackPanel Grid.Row = "2" Grid.ColumnSpan = "2"> 
         <Button Content = "_Show..." Click = "Button_Click" /> 
      </StackPanel> 
		
   </Grid> 
	
</UserControl>

हम निम्नलिखित बातों का पालन करते हैं -

  • दोनों टेक्स्ट बॉक्स के टेक्स्ट गुण "Name" तथा "Age”, जो कि वर्ग चर हैं Person नीचे दिखाया गया है।

  • में Person वर्ग, हमारे पास सिर्फ दो चर हैं Name तथा Age, और इसके ऑब्जेक्ट को इनिशियलाइज़ किया जाता है MainPage कक्षा।

  • XAML कोड में, हम एक संपत्ति के लिए बाध्य कर रहे हैं Name और आयु, लेकिन हमने यह नहीं चुना कि संपत्ति किस वस्तु की है।

  • एक आसान तरीका यह है कि किसी वस्तु को कैसे निर्दिष्ट किया जाए DataContext जिनके गुण हम C # कोड में बांध रहे हैं MainPage निर्माता जैसा कि नीचे दिखाया गया है।

using System.Windows; 
using System.Windows.Controls;
 
namespace DataBinding {
 
   public partial class MainPage : UserControl { 
      Person person = new Person { Name = "Salman", Age = 26 }; 
		
      public MainPage() { 
         InitializeComponent(); 
         this.DataContext = person;
      }
	  
      private void Button_Click(object sender, RoutedEventArgs e) {
         string message = person.Name + " is " + person.Age; 
         MessageBox.Show(message); 
      } 
   } 
	
   public class Person { 
      private string nameValue; 
		
      public string Name { 
         get { return nameValue; } 
         set { nameValue = value; } 
      }
	  
      private double ageValue; 
		
      public double Age { 
         get { return ageValue; } 
			
         set { 
            if (value != ageValue) { 
               ageValue = value; 
            } 
         } 
      } 
   } 
}

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

जब तुम दबाओगे Show बटन, यह संदेश बॉक्स में नाम और आयु प्रदर्शित करेगा।

हमें बदलने दो Name तथा Age उपरोक्त संवाद बॉक्स में।

अब, यदि आप क्लिक करते हैं Show बटन, यह फिर से एक ही संदेश प्रदर्शित करेगा।

इसकी वजह है data-bindingमोड XAML कोड में चालू करने के लिए सेट है। अद्यतन संदेश दिखाने के लिए, आपको दो-तरफ़ा डेटा बाइंडिंग को समझना होगा।

दो-तरफ़ा डेटा बाइंडिंग

में two-way bindingउपयोगकर्ता इंटरफ़ेस के माध्यम से डेटा को संशोधित करने में सक्षम है और उस डेटा को स्रोत में अपडेट किया गया है। यदि उपयोगकर्ता देखने के दौरान स्रोत बदलता है, तो आप चाहते हैं कि दृश्य अपडेट किया जाए।

आइए हम एक ही उदाहरण पर एक नज़र डालते हैं, लेकिन केवल XAML कोड में बाइंडिंग मोड को दो तरफ़ा बाइंडिंग में बदलते हैं जैसा कि नीचे दिखाया गया है।

<UserControl x:Class = "DataBinding.MainPage" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   xmlns:d = "http://schemas.microsoft.com/expression/blend/2008" 
   xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006" 
   mc:Ignorable = "d" 
   d:DesignHeight = "300" d:DesignWidth = "400"> 
	
   <Grid x:Name = "LayoutRoot" Background = "White"> 
	
      <Grid.RowDefinitions> 
         <RowDefinition Height = "Auto" /> 
         <RowDefinition Height = "Auto" /> 
         <RowDefinition Height = "*" /> 
      </Grid.RowDefinitions>
		
      <Grid.ColumnDefinitions> 
         <ColumnDefinition Width = "Auto" /> 
         <ColumnDefinition Width = "200" /> 
      </Grid.ColumnDefinitions>
		
      <TextBlock Name = "nameLabel" Margin = "2">_Name:</TextBlock> 
		
      <TextBox Name = "nameText" Grid.Column = "1" Margin = "2" 
         Text = "{Binding Name, Mode=TwoWay}"/> 
			
      <TextBlock Name = "ageLabel" Margin = "2" Grid.Row = "1">_Age:</TextBlock>
		
      <TextBox Name = "ageText" Grid.Column = "1" Grid.Row = "1" Margin = "2" 
         Text = "{Binding Age, Mode = TwoWay}"/> 
					
      <StackPanel Grid.Row = "2" Grid.ColumnSpan = "2"> 
         <Button Content = "_Show..." Click = "Button_Click" /> 
      </StackPanel>  
		
   </Grid> 
	 
</UserControl>

चलिए हम इस एप्लिकेशन को फिर से चलाते हैं और आप उसी आउटपुट को देख सकते हैं।

हमें बदलने दो Name तथा Age उपरोक्त संवाद बॉक्स में।

अब, यदि आप क्लिक करते हैं Show बटन यह अद्यतन संदेश प्रदर्शित करेगा।

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

हम निम्नलिखित दो तरीकों से ब्राउज़र के साथ सिल्वरलाइट एकीकरण का पता लगा सकते हैं -

  • ब्राउज़र में चल रहा जावास्क्रिप्ट कोड आपके सिल्वरलाइट एप्लिकेशन के भीतर सुविधाओं तक पहुंच सकता है।

  • सिल्वरलाइट में वस्तुओं के लिए जावास्क्रिप्ट रैपर प्रदान करने की क्षमता होती है। तुम्हारी.NET सिल्वरलाइट प्लग-इन के अंदर चल रहे कोड की वजह से HTML DOM और सिल्वरलाइट की अन्य ब्राउज़र स्क्रिप्टिंग सुविधाओं तक पहुँच होती है .NET जावास्क्रिप्ट वस्तुओं के लिए रैपर।

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

सिल्वरलाइट और एचटीएमएल

जहां तक ​​HTML की दुनिया का संबंध है, सिल्वरलाइट सामग्री सिर्फ एक तत्व है। यह लेआउट के लिए सही है। संपूर्ण सिल्वरलाइट प्लग-इन और इसकी सारी सामग्री सिर्फ एक एकल तत्व की तरह दिखती है।

आपको यह ध्यान रखना होगा कि -

  • सिल्वरलाइट HTML के लिए एक प्रतिस्थापन नहीं था, इसे इसे पूरक करने के लिए डिज़ाइन किया गया था। इसलिए, DOM में सिर्फ दूसरे तत्व तक पहुंचने की क्षमता महत्वपूर्ण है।

  • यह आपको जहां उपयुक्त हो सिल्वरलाइट का उपयोग करने में सक्षम बनाता है।

  • एक पृष्ठ पर, जो मुख्य रूप से HTML का उपयोग करता है, ब्राउज़र की दुनिया के साथ सिल्वरलाइट एकीकरण सामान्य HTML लेआउट के अधीन, केवल एक DOM तत्व के रूप में विद्यमान है।

DOM तक पहुँचना

सिल्वरलाइट सामग्री को वेब पेज में पूरी तरह से भाग लेने में सक्षम होना चाहिए। इसके अलावा, यह HTML DOM तक पहुंचने में सक्षम होना चाहिए। सिल्वरलाइट ब्रिज ऑब्जेक्ट्स प्रदान करता है जो ब्राउज़र स्क्रिप्ट ऑब्जेक्ट्स को डॉट नेट ऑब्जेक्ट्स, के रूप में लपेटता हैScript objectसिस्टम में क्लास। ब्राउज़र नेमस्पेस ऐसी विधियाँ प्रदान करता है, जो आपको ब्राउज़र स्क्रिप्ट ऑब्जेक्ट पर गुण पढ़ने और लिखने और कार्य करने देती हैं।

आपको किसी स्क्रिप्ट ऑब्जेक्ट को पहले स्थान पर रखने का एक तरीका चाहिए। सिल्वरलाइट एक HTML पेज क्लास प्रदान करता है जो आपको स्क्रिप्ट ऑब्जेक्ट्स जैसी सुविधाओं के विभिन्न पृष्ठों तक पहुंच प्रदान करता है।

आइए हम एक सरल उदाहरण देखें जिसमें हमारे पास एक सरल स्क्रिप्ट है जो कुछ विशेषताओं के साथ एक वस्तु बनाता है। उनमें से कुछ सिर्फ मूल्य हैं और उनमें से कुछ कार्य हैं।

<script type = "text/javascript">  
   myJsObject = { 
      answer: 42, 
      message: "Hello, world", 
      modifyHeading: function(title) 
         { document.getElementById('heading').innerHTML = title; }, 
      performReallyComplexCalculation: function(x, y) { return x + y; } 
   }; 
     
</script>

नीचे दिया गया XAML कोड है जिसमें एक बटन जोड़ा गया है।

<UserControl x:Class = "DomAccess.Page" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"  
   Width = "400" Height = "300"> 
   
   <Grid x:Name = "LayoutRoot" Background = "White"> 
      <Button x:Name = "useDomButton" Content = "Use DOM" Width = "75" Height = "30" 
         Click = "useDomButton_Click" /> 
   </Grid>
	
</UserControl>

यहां बटन क्लिक कार्यान्वयन है जिसमें एक स्क्रिप्ट कहा जाता है जो HTML फ़ाइल में बनाई गई है।

using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Net; 

using System.Windows; 
using System.Windows.Controls; 
using System.Windows.Documents; 
using System.Windows.Input; 
using System.Windows.Media; 
using System.Windows.Media.Animation; 
using System.Windows.Shapes;
using System.Windows.Browser; 

using System.Diagnostics; 
 
namespace DomAccess { 

   public partial class Page : UserControl { 
	
      public Page() { 
         InitializeComponent(); 
      } 
   
      private void useDomButton_Click(object sender, RoutedEventArgs e) { 
         ScriptObject myJsObject = HtmlPage.Window.GetProperty("myJsObject") as ScriptObject;  
         string[] propertyNames = { "answer", "message", "modifyHeading", 
            "performReallyComplexCalculation" }; 
				
         foreach (string propertyName in propertyNames) { 
            object value = myJsObject.GetProperty(propertyName); 
            Debug.WriteLine("{0}: {1} ({2})", propertyName, value, value.GetType()); 
         }
			
         object result = myJsObject.Invoke("performReallyComplexCalculation", 11, 31);  
         HtmlElement h1 = HtmlPage.Document.GetElementById("heading"); 
         h1.SetProperty("innerHTML", "Text from C# (without JavaScript's help)"); 
         h1.SetStyleAttribute("height", "200px"); 
      } 
   } 
}

नीचे दिए गए पूर्ण HTML फ़ाइल है।

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
   http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	
<html xmlns = "http://www.w3.org/1999/xhtml" > 
   <!-- saved from url = (0014)about:internet --> 
	
   <head> 
      <title>DomAccess</title>  
		
      <script type = "text/javascript">  
		
         myJsObject = { 
            answer: 42, 
            message: "Hello, world", 
            modifyHeading: function(title) { 
               document.getElementById('heading').innerHTML = title; }, 
            performReallyComplexCalculation: function(x, y) { return x + y; } 
         }; 
     
      </script> 
     
      <style type = "text/css"> 
		
         html, body { 
            height: 100%; 
            overflow: auto; 
         } 
			
         body { 
            padding: 0; 
            margin: 0; 
         } 
			
         #silverlightControlHost { 
            height: 100%; 
         }
			
      </style>
		
      <script type = "text/javascript" src = "Silverlight.js"></script> 
		
      <script type = "text/javascript"> 
		
         function onSilverlightError(sender, args) { 
            var appSource = ""; 
				
            if (sender != null && sender != 0) { 
               appSource = sender.getHost().Source; 
            }  
				
            var errorType = args.ErrorType; 
            var iErrorCode = args.ErrorCode; 
             
            var errMsg = "Unhandled Error in Silverlight 2 Application " +  
               appSource + "\n" ; 
					
            errMsg += "Code: "+ iErrorCode + "    \n"; 
            errMsg += "Category: " + errorType + "       \n"; 
            errMsg += "Message: " + args.ErrorMessage + "     \n";
				
            if (errorType == "ParserError") { 
               errMsg += "File: " + args.xamlFile + "     \n"; 
               errMsg += "Line: " + args.lineNumber + "     \n"; 
               errMsg += "Position: " + args.charPosition + "     \n"; 
            } else if (errorType == "RuntimeError") {  
				
               if (args.lineNumber != 0) { 
                  errMsg += "Line: " + args.lineNumber + "     \n"; 
                  errMsg += "Position: " +  args.charPosition + "     \n"; 
               } 
					
               errMsg += "MethodName: " + args.methodName + "     \n"; 
            }
				
            throw new Error(errMsg); 
         }
		  
      </script> 
		
   </head>  
	
   <body> 
	
      <!-- Runtime errors from Silverlight will be displayed here. 
         This will contain debugging information and should be removed or hidden when 
         debugging is completed -->
			
      <div id = 'errorLocation' style = "font-size: small;color: Gray;"></div> 
		
      <h1 id = 'heading'></h1>
		
      <div id = "silverlightControlHost"> 
		
         <object data = "data:application/x-silverlight-2," 
            type = "application/x-silverlight-2" width = "100%" height = "100%"> 
				
            <param name = "source" value = "ClientBin/DomAccess.xap"/> 
            <param name = "onerror" value = "onSilverlightError" /> 
            <param name = "background" value = "white" /> 
            <param name = "minRuntimeVersion" value = "2.0.30923.0" /> 
            <param name = "autoUpgrade" value = "true" /> 
				
            <a href = "http://go.microsoft.com/fwlink/?LinkID=124807" 
               style = "text-decoration: none;"> 
               <img src = "http://go.microsoft.com/fwlink/?LinkId=108181" 
               alt = "Get Microsoft Silverlight" style = "border-style: none"/> 
            </a> 
				
         </object>
			
         <iframe style = 'visibility:hidden;height:0;width:0;border:0px'></iframe> 
			
      </div> 
		
   </body> 
	
</html>

जब उपरोक्त कोड संकलित और निष्पादित किया जाता है, तो आपको आउटपुट विंडो में सभी मान दिखाई देंगे, जो HTML फ़ाइल से प्राप्त किए गए हैं।

अब हम उन अनुप्रयोगों के लिए सिल्वरलाइट समर्थन का पता लगाने जा रहे हैं जो सामान्य विंडोज एप्लिकेशन की तरह वेब ब्राउज़र के बाहर चलाने के लिए एंड-यूज़र मशीन पर इंस्टॉल किए जा सकते हैं। तीन मुख्य कारण हैं जो आप चाहते हैं कि आपका एप्लिकेशन ब्राउज़र से बाहर निकल सके -

  • Interaction
  • Offline
  • एलिवेटेड ट्रस्ट

इंटरेक्शन

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

सिल्वरलाइट का महत्व यहाँ नीचे दिया गया है -

  • वेब एप्लिकेशन क्लाइंट-साइड तकनीकों का उपयोग कर सकते हैं, जैसे सिल्वरलाइट, फ्लैश, या AJAX एक पृष्ठ पर निरंतर अपडेट प्रदान करने के लिए, शायद किसी भी अन्य पेज पर नेविगेट करने की आवश्यकता को हटा दें।

  • कुछ अनुप्रयोगों में, एक उपयोगकर्ता कई मिनट या घंटों तक खर्च कर सकता है, जो ब्राउज़र एकल पृष्ठ मानता है।

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

  • आमतौर पर, गैर-वेब-जैसे एप्लिकेशन आमतौर पर ब्राउज़र से बाहर चलाकर बेहतर तरीके से परोसे जाते हैं, क्योंकि यह ब्राउज़र क्रोम से छुटकारा दिलाता है। आमतौर पर, ब्राउज़र से बाहर निकलने के लिए प्रयोज्य एकमात्र कारण नहीं है।

ऑफलाइन

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

  • एप्लिकेशन तब भी उपलब्ध होगा, भले ही उपयोगकर्ता के पास इंटरनेट कनेक्टिविटी न हो।

  • जाहिर है, यह केवल उन अनुप्रयोगों के लिए सहायक है जो सर्वर-साइड जानकारी पर पूरी तरह से निर्भर नहीं हैं।

  • उदाहरण के लिए, पार्सल वितरण सेवा के लिए एक ऑटो-ट्रैकिंग एप्लिकेशन नेटवर्क कनेक्टिविटी के बिना बहुत अधिक उपयोग नहीं होगा।

  • कुछ अनुप्रयोगों के लिए, सामयिक कनेक्टिविटी विफलताओं के दौरान काम जारी रखने की क्षमता बहुत मददगार है।

एलिवेटेड ट्रस्ट

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

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

ब्राउज़र के अंदर चलने वाले एप्लिकेशन पर कभी भरोसा नहीं किया जाता है, इसलिए यदि आप इन सुविधाओं का उपयोग करना चाहते हैं, तो आपको एक आउट-ब्राउज़र एप्लिकेशन लिखना होगा।

OOB को सक्षम करना

हम एक आउट-ऑफ-ब्राउज़र एप्लिकेशन कैसे लिखते हैं? यह बहुत आसान है। हमें सिल्वरलाइट के प्रोजेक्ट गुणों में एक एकल सेटिंग को बदलना होगा और यह सिर्फ एक उपयुक्त सेटिंग को जोड़ता हैAppManifest.xaml।

आइए देखें कि यह कैसे काम करता है।

  • जब आपका प्रकट होना बताता है कि आउट-ऑफ-ब्राउज़र निष्पादन समर्थित है, तो इसका कोई प्रारंभिक प्रभाव नहीं है। एप्लिकेशन हमेशा की तरह ब्राउज़र में चलेगा।

  • हालांकि, यदि उपयोगकर्ता सही क्लिक करता है, तो मानक सिल्वरलाइट ContextMenu कंप्यूटर पर एप्लिकेशन इंस्टॉल करने के लिए एक अतिरिक्त आइटम प्रदान करता है।

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

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

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

एक सिल्वरलाइट एप्लीकेशन

यहाँ एक बहुत ही सरल सिल्वरलाइट एप्लीकेशन है। नीचे दिया गया इसका XAML कोड है।

<UserControl x:Class = "SimpleOob.MainPage" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   xmlns:d = "http://schemas.microsoft.com/expression/blend/2008" 
   xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006" 
   mc:Ignorable = "d" 
   d:DesignHeight = "300" d:DesignWidth = "400">
   
   <Grid x:Name = "LayoutRoot" Background = "White"> 
	
      <Border BorderBrush = "Blue" BorderThickness = "4" CornerRadius = "20" >
		
         <Border.Background>
			
            <LinearGradientBrush StartPoint = "0,0" EndPoint = "0,1"> 
               <GradientStop Offset = "0.0" Color = "White" /> 
               <GradientStop Offset = "0.15" Color = "#cef" /> 
               <GradientStop Offset = "1.0" Color = "White" /> 
            </LinearGradientBrush> 
				
         </Border.Background> 
			
         <TextBlock HorizontalAlignment = "Center" VerticalAlignment = "Center" 
            Text = "Silverlight Application" TextOptions.TextHintingMode = "Animated" 
            TextAlignment = "Center" TextWrapping = "Wrap" 
            FontSize = "72" FontFamily = "Trebuchet MS" > 
					 
               <TextBlock.Effect> 
                  <DropShadowEffect Color = "#888" /> 
               </TextBlock.Effect> 
				
         </TextBlock>
			
      </Border> 
		
   </Grid>
	
</UserControl>

Step 1 - ब्राउज़र निष्पादन को सक्षम करने के लिए, प्रोजेक्ट पर जाएं Properties, और सिल्वरलाइट टैब पर क्लिक करें। हमें बस इतना करना है - जाँच करेंEnable running application out of the browser चेकबॉक्स।

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

वास्तव में, विजुअल स्टूडियो ने आपकी ओर से निर्णय लिया है। जब आपने सक्षम कियाout-of-browser निष्पादन, इसने आपकी डिबग सेटिंग को गलत तरीके से बदल दिया।

Step 2 - तो, ​​यहाँ में Solution Explorer, ध्यान दें कि सिल्वरलाइट प्रोजेक्ट अब बोल्ड है, यह दर्शाता है कि यह एक स्टार्टअप प्रोजेक्ट है।

पहले ऐसा नहीं था। यह वेब प्रोजेक्ट था। अभी, हम ऐसा नहीं चाहते हैं, क्योंकि हम यह दिखाना चाहते हैं कि कैसे चेकबॉक्स अंतिम उपयोगकर्ता के लिए चीजों को बदलता है।

Step 3 - हम वेब प्रोजेक्ट को स्टार्टअप प्रोजेक्ट होने के लिए सेट करेंगे।

Step 4 - एप्लिकेशन को फिर से चलाएँ, और आप देखेंगे कि एप्लिकेशन अब ब्राउज़र में वापस आ गया है।

Step 5- वेबपेज को राइट-क्लिक करें। आप संदर्भ मेनू में सामान्य सिल्वरलाइट प्रविष्टि, और स्थापित करने के लिए एक अतिरिक्त आइटम देखेंगे।

Step 6 - जब आप दूसरा विकल्प चुनते हैं, तो एप्लिकेशन डायलॉग बॉक्स स्थापित करें जैसा कि नीचे दिखाया गया है।

ध्यान दें कि यह वेबसाइट का मूल URL दिखाता है, यह एप्लिकेशन से आया है। हम Visual Studio द्वारा प्रदान किए गए स्थानीय डिबग वेब सर्वर का उपयोग कर रहे हैं, यही कारण है कि इसे लोकलहोस्ट कहते हैं।

Step 7 - क्लिक करें OK, और अनुप्रयोग ब्राउज़र से अलग अपनी खिड़की में चलता है।

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

Step 8 - यदि आप खोलते हैं Search में संवाद बॉक्स Start मेनू और एप्लिकेशन का नाम टाइप करना शुरू करें, यह किसी सामान्य विंडोज एप्लिकेशन की तरह ही दिखाई देता है।

Step 9 - आप इसे बिना किसी ब्राउजर में देखे कहीं भी चला सकते हैं।

आवेदन की स्थापना रद्द करने के लिए

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

आप वेब पेज पर राइट-क्लिक करके और चयन करके भी निकाल सकते हैं Remove this application…।

OOB सेटिंग्स

हालाँकि, हमें केवल एक ही सेटिंग को आउट ऑफ़ ब्राउज़र ऑपरेशन को सक्षम करने के लिए बदलना था, व्यवहार में, आप सामान्य रूप से इससे कुछ अधिक करना चाहेंगे। AppManifest.xaml फ़ाइल में से संबंधित कई सेटिंग्स हो सकती हैं out-of-browser ऑपरेशन, जिसे हम आमतौर पर विज़ुअल स्टूडियो के माध्यम से कॉन्फ़िगर करते हैं।

जैसा कि आपने देखा होगा, जब आपने सक्षम करने के लिए चेकबॉक्स चेक किया था running out-ofbrowser, विजुअल स्टूडियो ने एक बटन लेबल सक्षम किया Out-of-Browser Settings।

आइए बटन पर क्लिक करके इसे देखें। यह निम्नलिखित संवाद बॉक्स का उत्पादन करेगा।

  • पहली चीज जिसे हम कॉन्फ़िगर कर सकते हैं वह है पाठ जो कि दिखाई देता है Window Title।

  • हमारे पास खिड़की के आयाम और स्थानों को ठीक करने का विकल्प भी है, लेकिन हम अभी के लिए उन पर छोड़ देंगे।

  • यह शॉर्टकट नाम में दिखाई देता है Start एक बार इंस्टॉल होने के बाद मेनू, और ऐप के लिए डेस्कटॉप लिंक।

  • यह पाठ भी है जो संदर्भ मेनू में दिखाई देता है, और एप्लिकेशन इंस्टॉल इंस्टॉल करें।

  • यह एप्लिकेशन विवरण टूल टिप में प्रकट होता है जब मैं शॉर्टकट पर होवर करता हूं।

  • हम विभिन्न आकारों में आइकन प्रदान करते हैं। इन्हें आपके प्रोजेक्ट में बनाया जाना है।

इस अध्याय में, हम अनुप्रयोगों और उन संसाधनों को बनाने और तैनात करने के आसपास के सामान्य मुद्दों को देखने जा रहे हैं जिनकी उन्हें आवश्यकता है।

प्लग-इन लोड हो रहा है

सिल्वरलाइट एप्लिकेशन को चलाने के लिए न्यूनतम आवश्यकताएं सिल्वरलाइट प्लग-इन लोड करने के लिए ऑब्जेक्ट टैग वाले वेब पेज की मेजबानी कर रही हैं, और सिल्वरलाइट सामग्री को स्वयं संकलित करना।

जैसा आपने देखा, हमने प्रयोग किया param में टैग object सामग्री को इंगित करने के लिए टैग।

  • HTML <Object> tag

ऐसे अन्य पैरामीटर हैं जिन्हें हम सुविधाओं को नियंत्रित करने के लिए पास कर सकते हैं जैसे कि उपयोगकर्ता इंटरफ़ेस दिखाया जा सकता है जबकि सामग्री डाउनलोड की जाती है, त्रुटि की स्थिति में चलाने के लिए जावास्क्रिप्ट कोड, और सिल्वरलाइट स्थापित नहीं होने पर सामग्री को दिखाना।

HTML में <Object>

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

टाइप करें विशेषता

प्रकार विशेषता में एक MIME प्रकार होता है जो इसे सिल्वरलाइट तत्व के रूप में पहचानता है। यह है कि ब्राउज़र जानता है कि हम किस प्रकार की एम्बेडेड सामग्री का उपयोग कर रहे हैं। ऑब्जेक्ट टैग आश्चर्यजनक रूप से लचीला है। यह सिर्फ प्लग-इन के लिए नहीं है। आप इसका उपयोग एम्बेडेड इमेज या HTML को होस्ट करने के लिए कर सकते हैं, साथ ही प्लग-इन-आधारित सामग्री, जैसे सिल्वरलाइट, या फ्लैश।

यदि सिल्वरलाइट प्लग-इन स्थापित है, तो यह इसे लोड करेगा। यदि नहीं, तो मानक प्रारूप व्यवहार ब्राउज़र के लिए ऑब्जेक्ट टैग के अंदर किसी भी HTML सामग्री को प्रस्तुत करने के लिए है, हालांकि ऑब्जेक्ट और परम टैग वहां नहीं थे।

<object data = "data:application/x-silverlight-2," type =  "application/x-silverlight-2"  
   width = "100%" height = "100%"> 
	
   <param name = "source" value = "ClientBin/DataBinding.xap"/> 
   <param name = "onError" value = "onSilverlightError" /> 
   <param name = "background" value = "white" /> 
   <param name = "minRuntimeVersion" value = "5.0.61118.0" /> 
   <param name = "autoUpgrade" value = "true" />
	
   <a href = "http://go.microsoft.com/fwlink/?LinkID=149156&v=5.0.61118.0" 
      style = "textdecoration:none"> 
		
      <img src = "http://go.microsoft.com/fwlink/?LinkId=161376" 
         alt = "Get Microsoft Silverlight" style = "border-style:none"/> 
   </a> 
	
</object>

डेटा विशेषता

अगली विशेषता, डेटा, थोड़ा कम स्पष्ट है। अंत में अल्पविराम वहाँ होने का मतलब है। कुछ महत्वपूर्ण विशेषताएं हैं -

  • यह विशेषता तकनीकी रूप से आवश्यक नहीं है, लेकिन Microsoft आपको इसे जोड़ने की सलाह देता है क्योंकि प्लगइन्स को लोड करते समय कुछ वेब ब्राउज़रों में बहुत ही आश्चर्यजनक व्यवहार होता है।

  • object tag एम्बेडेड सामग्री को होस्ट करने के लिए डिज़ाइन किया गया है, इसलिए ब्राउज़र बाइनरी स्ट्रिंग को शामिल करने की उम्मीद करते हैं, एक बिटमैप फ़ाइल, या वीडियो, या ऑडियो स्ट्रीम, या कुछ और।

  • आप सामान्य रूप से डेटा विशेषता में URL और उस डेटा को डाउनलोड करने के लिए ब्राउज़र, और प्लग-इन में इसे पास करने की अपेक्षा करेंगे।

  • डेटा विशेषता एक URI लेता है, और आमतौर पर इसे कुछ डेटा पर इंगित किया जाएगा, जैसे JPEG फ़ाइल, लेकिन यहाँ, हम थोड़ी असामान्य URI योजना का उपयोग कर रहे हैं।

<परम> टैग

हमारे पास विभिन्न हैं param स्रोत के साथ शुरू करते हुए ऑब्जेक्ट के अंदर टैग param।

<param name = "source" value = "ClientBin/DataBinding.xap"/>

यह सिल्वरलाइट सामग्री को डाउनलोड करने के लिए प्लग-इन देता है।

आपको एक जावास्क्रिप्ट त्रुटि हैंडलर प्रदान करना चाहिए। डाउनलोड प्रक्रिया विफल होने पर इसे कॉल किया जाएगा। यह भी कहा जाएगा कि अगर सिल्वरलाइट कोड ऊपर है और चल रहा है, तो एक अखंडित अपवाद को फेंक दिया जाता है।

<param name = "onError" value = "onSilverlightError" />

तो यह सिर्फ लोड विफलताओं के लिए नहीं है। आपको अपने कोड द्वारा आवश्यक सिल्वरलाइट का न्यूनतम संस्करण भी निर्दिष्ट करना चाहिए।

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

<param name = "minRuntimeVersion" value = "5.0.61118.0" /> 
<param name = "autoUpgrade" value = "true" />

यह minRuntimeVersionपैरामीटर आपको यह बताने देता है कि आपको किस संस्करण की आवश्यकता है। यदि स्थापित संस्करण अधिक पुराना है, तो ऑनर्रर हैंडलर को आमंत्रित किया जाएगा।

सिल्वरलाइट जावास्क्रिप्ट फ़ंक्शन को हैंडल करने में त्रुटि के लिए संख्यात्मक त्रुटि कोड पास करता है, और एक अलग त्रुटि कोड होता है, '8001'जैसा कि होता है, यह इंगित करने के लिए कि प्लग-इन पुराना है।

आप समस्या का जवाब देने के लिए जावास्क्रिप्ट कोड लिख सकते हैं, या आप प्लग-इन को आपके लिए अपग्रेड करने का प्रयास करने के लिए कह सकते हैं।

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

फ़ॉलबैक HTML सामग्री

परम टैग के बाद, आता है fallback HTML content यदि सिल्वरलाइट स्थापित नहीं है, तो इसका उपयोग किया जाए।

ऑब्जेक्ट टैग के लिए मानक ब्राउज़र व्यवहार जिसका MIMEप्रकार अज्ञात है क्योंकि यह कार्य करने के लिए है क्योंकि ऑब्जेक्ट और परम टैग बिल्कुल नहीं थे। तो, यह एक टैग और इसकी सामग्री उन प्रणालियों में दिखाई जाएगी जिनके पास सिल्वरलाइट प्लग-इन नहीं है।

<a href = "http://go.microsoft.com/fwlink/?LinkID=149156&v=5.0.61118.0"  
   style = "text-decoration:none"> 
   <img src = "http://go.microsoft.com/fwlink/?LinkId=161376"  
      alt = "Get Microsoft Silverlight" style = "border-style:none"/> 
</a>

दो URL को नोटिस करें go.microsoft.com साइट, एक हाइपरलिंक, और एक छवि।

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

यह सिल्वरलाइट इंस्‍टॉल करने योग्य को वापस सेवा दे सकता है, या यदि उपयोगकर्ता असमर्थित प्‍लेटफार्म पर है, तो यह ब्राउजर को सिल्वरलाइट की जानकारी वाले पेज पर निर्देशित करेगा।

Silverlight.js

सिल्वरलाइट सामग्री लोड करने के लिए HTML ऑब्जेक्ट टैग का एक विकल्प है। Microsoft नामक एक जावास्क्रिप्ट फ़ाइल प्रदान करता हैSilverlight.js यह लोडिंग प्रक्रिया को ब्राउज़र स्क्रिप्ट से प्रबंधित करने की अनुमति देता है।

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

का मुख्य लाभ Silverlight.js यह है कि यह सिल्वरलाइट स्थापित नहीं होने पर अधिक लचीलापन देता है।

XAML संसाधन

सिल्वरलाइट बनाने के लिए एक तंत्र भी प्रदान करता है object resourcesXAML में। कुछ प्रकार के ऑब्जेक्ट्स को आमतौर पर XAML के माध्यम से ठीक किया जाता है जिसे आप अपने आवेदन में कई स्थानों पर उपयोग करने में सक्षम होना चाहते हैं। एक से अधिक स्थानों पर टेम्प्लेट का उपयोग करना बहुत आम है।

यदि आपने एक बटन के लिए एक कस्टम लुक परिभाषित किया है, तो आप इसे कई बटन पर लागू करना चाह सकते हैं, या शायद आपके आवेदन के सभी बटन भी। XAML संसाधन प्रणाली ऐसा करने का एक तरीका प्रदान करती है। आप एक परिभाषित कर सकते हैंnamed resource, और फिर इसे एक्सएएमएल में कहीं और उपयोग करें।

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

यहाँ के लिए एक सरल अनुप्रयोग है SolidColorBrush संसाधन।

<UserControl x:Class = "XAMLResources.MainPage" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   xmlns:d = "http://schemas.microsoft.com/expression/blend/2008" 
   xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006" 
   mc:Ignorable = "d" 
   d:DesignHeight = "300" d:DesignWidth = "400">
   
   <UserControl.Resources> 
      <SolidColorBrush x:Key = "brushResource" Color = "AliceBlue" /> 
   </UserControl.Resources> 
	
   <Grid x:Name = "LayoutRoot" Background = "White"> 
      <StackPanel> 
         <Rectangle Height = "50" Margin = "20" Fill = "{StaticResource brushResource}" /> 
         <Rectangle Height = "50" Margin = "20" Fill = "{StaticResource brushResource}"/> 
      </StackPanel> 
   </Grid> 
	
</UserControl>

उपरोक्त XAML कोड में, आप देख सकते हैं कि दोनों आयतें हैं StaticResource का रंग brushResource है AliceBlue।

जब उपरोक्त कोड संकलित और निष्पादित किया जाता है, तो आपको निम्न आउटपुट दिखाई देगा।

App.xaml

सभी सिल्वरलाइट एप्लीकेशन में एक फाइल होती है, जिसे कहा जाता है App.xaml। इसमें एप्लिकेशन-वाइड जानकारी शामिल है। उदाहरण के लिए, इसमें उपयोगकर्ता इंटरफ़ेस तत्वों की तरह एक संसाधन गुण है।

संसाधन जो आप में परिभाषित करते हैं App.xamlफ़ाइल परियोजना में सभी XAML फ़ाइल में उपलब्ध हैं। तो बजाय इसके कि मेरे खड़खड़ानाMainPage.xaml संसाधनों के इन प्रकार के साथ, हम उन्हें आवेदन के दायरे में ले जा सकते हैं।

<Application 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"  
   x:Class = "XAMLResources.App" > 
	
   <Application.Resources> 
      <SolidColorBrush x:Key = "brushResource" Color = "AliceBlue" /> 
   </Application.Resources>
	
</Application>

आवेदन कक्षा

अधिकांश XAML फ़ाइलों की तरह, App.xaml फ़ाइल और इसके अनुरूप code behindफ़ाइल एक वर्ग को परिभाषित करती है। यह एप्लिकेशन क्लास सिल्वरलाइट एप्लिकेशन का प्रवेश बिंदु है। App.xamlआमतौर पर आवेदन गुंजाइश संसाधनों के साथ संबंधित है; फ़ाइल के पीछे इसके कोड में स्टार्टअप और शटडाउन हैंडलिंग कोड है।

  • आपके एप्लिकेशन वर्ग का एक उदाहरण बनाने के कुछ समय बाद, Silverlight इसे बढ़ाता है Application.Startup प्रतिस्पर्धा।

  • यहां हम यूजर इंटरफेस बनाते हैं। हमसे एक उपयोगकर्ता इंटरफ़ेस तत्व बनाने और इसे एप्लिकेशन ऑब्जेक्ट्स में रूट करने के लिए अपेक्षा की जाती हैStartup ईवेंट, और वह सिल्वरलाइट प्लग-इन द्वारा प्रदर्शित यूजर इंटरफेस बन जाएगा।

public partial class App : Application { 
 
   public App() { 
      this.Startup += this.Application_Startup; 
      this.Exit += this.Application_Exit; 
      this.UnhandledException += this.Application_UnhandledException;  
      InitializeComponent(); 
   }  
	
   private void Application_Startup(object sender, StartupEventArgs e) { 
      this.RootVisual = new MainPage(); 
   } 
	
   private void Application_Exit(object sender, EventArgs e) {}  
	
   private void Application_UnhandledException(object sender, 
      ApplicationUnhandledExceptionEventArgs e) { 
		
      if (!System.Diagnostics.Debugger.IsAttached) { 
         e.Handled = true; 
         Deployment.Current.Dispatcher.BeginInvoke(delegate { ReportErrorToDOM(e); }); 
      } 
		
   }  
	
   private void ReportErrorToDOM(ApplicationUnhandledExceptionEventArgs e) { 
      try { 
         string errorMsg = e.ExceptionObject.Message + e.ExceptionObject.StackTrace; 
         errorMsg = errorMsg.Replace('"', '\'').Replace("\r\n", @"\n");  
         System.Windows.Browser.HtmlPage.Window.Eval("throw new Error
            (\"Unhandled Error in Silverlight Application " + errorMsg + "\");"); 
      } catch (Exception) {} 
   } 
}

नोट करने के लिए अंक

ध्यान दें कि आप बदल नहीं सकते RootVisual। आपको इसे एक बार बिल्कुल सेट करना होगा। यदि आप अपने एप्लिकेशन को चलाने के दौरान उपयोगकर्ता इंटरफ़ेस बदलना चाहते हैं, तो आपको इसे अपनी सामग्री बदलकर करना होगाMainPageके बजाय को बदलने की कोशिश कर रहा है MainPage एक अलग के साथ।

अन्य अनुप्रयोग इवेंट हैं Exit, जो आपके अंतिम समय में दौड़ने का मौका है shutdown कोड जब उपयोगकर्ता इंटरफ़ेस दूर जाने वाला है, और UnhandledException, यदि आपका कोड एक अनहेल्दी अपवाद फेंकता है, तो उठाया जाता है।

यदि आप के लिए एक हैंडलर प्रदान नहीं करते हैं UnhandledException ईवेंट, या यदि वह हैंडलर ईवेंट को संभाले जाने के रूप में चिह्नित नहीं करता है, UnhandledExceptions प्रभावी रूप से आपके Silverlight एप्लिकेशन को बंद कर देगा।

स्क्रीन पर प्लग-इन क्षेत्र रिक्त हो जाएगा, और एक स्क्रिप्टिंग त्रुटि ब्राउज़र को सूचित की जाएगी।

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

  • सबसे लचीला विकल्प का उपयोग करना है file dialogकक्षाएं। उसके साथOpen तथा Saveफ़ाइल संवाद, आप किसी भी फ़ाइल तक पहुँच प्राप्त कर सकते हैं जिसे अंतिम उपयोगकर्ता चुनता है, जब तक कि उपयोगकर्ता के पास उपयुक्त अनुमति हो। उपयोगकर्ता की सहमति इस दृष्टिकोण के लिए केंद्रीय है। उपयोगकर्ता को यह चुनना है कि किस फ़ाइल को पढ़ना है, या बचत करते समय, वे आपके लिए एक स्थान और एक फ़ाइल नाम को अधिलेखित करने या चुनने के लिए एक फ़ाइल चुनते हैं।

  • दूसरा विकल्प विभिन्न वर्गों का उपयोग करना है System.IOनाम स्थान। सिल्वरलाइट जैसी कक्षाएं प्रदान करता हैFileStream, StreamWriter, FileInfo, Directory, तथा DirectoryInfo, जिनमें से उपयोगकर्ता को शामिल करने की आवश्यकता के बिना फ़ाइलों को खोलने और एक्सेस करने वाले कोड को लिखना संभव है। यह डेवलपर के लिए अधिक सुविधाजनक हो सकता है, लेकिन निश्चित रूप से, अधिकांश उपयोगकर्ता नहीं चाहेंगे कि कोई भी पुराना कोड वेब पेज के हिस्से के रूप में डाउनलोड किया जाए जो उनकी फाइलों में खोज करने में सक्षम हो।

  • तीसरा विकल्प है Isolated Storage, जो हम बाद में चर्चा करेंगे।

फ़ाइल संवाद खोलें और सहेजें

SaveFileDialog

SaveFileDialog कक्षा मानक ऑपरेटिंग सिस्टम को दिखाती है कि किसी फाइल को सेव करने के लिए यूजर इंटरफेस की आपूर्ति की गई है।

कुछ महत्वपूर्ण विशेषताएं हैं -

  • इसका उपयोग करने के लिए, हम एक उदाहरण बनाते हैं SaveFileDialog कक्षा।

  • कॉलिंग ShowDialog, यह प्रकट होने का कारण बनता है, और रिटर्न कोड हमें बताता है कि क्या उपयोगकर्ता ने फ़ाइल को सहेजने के लिए कोई स्थान चुना है, या संवाद रद्द कर दिया है।

  • आप के साथ तुलना बेमानी लग रही हो सकता है Trueवहाँ। अगरShowDialog रिटर्न Trueमूल्य, जिसका अर्थ है कि उपयोगकर्ता ने एक फ़ाइल का चयन किया है। तो हम कॉल करने के लिए पर जा सकते हैंOpenFile विधि, जो हमें लौटाती है a Stream।

  • यदि हम चाहते हैं, तो हम उस उपयोगकर्ता की खोज कर सकते हैं जिसका नाम उपयोगकर्ता ने चुना है। संवाद नामक एक संपत्ति प्रदान करता हैSafeFileName, लेकिन इसमें वह रास्ता शामिल नहीं है। किसी भी स्थिति में, डेटा लिखने का एकमात्र तरीका उपयोग करना हैStreamसंवाद द्वारा लौटाया गया। एक डेवलपर के दृष्टिकोण से, यह सिर्फ एक साधारण है.NET stream, इसलिए हम इसे एक में लपेट सकते हैं StreamWriter, इसमें पाठ लिखने के लिए।

OpenFileDialog

OpenFileDialog उपयोग के समान है SaveFileDialog। जाहिर है, आप हमेशा एक नई के बजाय एक मौजूदा फ़ाइल उठा रहे हैं, लेकिन एक और महत्वपूर्ण अंतर है।

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

  • SaveFileDialog केवल एक समय में एक फ़ाइल से संबंधित है, लेकिन OpenFileDialog अधिक के साथ सामना करने में सक्षम है, इसलिए यह एक प्रस्ताव नहीं देता है OpenFileतरीका। हमें कोड का विस्तार करने की आवश्यकता है। इस पर निर्भर करता है कि संवाद अंदर है या नहींsingle file मोड, या MultiSelect मोड, आप या तो इसका उपयोग करते हैं File, या Files संपत्ति।

  • यहां, नीचे दिए गए उदाहरण में, हम सिंगल फाइल मोड में हैं। इसलिए, हम उपयोग करते हैंFile, और हम बुलाते हैं OpenRead पर FileInfo वस्तु जो लौटती है।

  • में multiselect मोड, हम उपयोग करेंगे Files इसके बजाय, जो का एक संग्रह देता है FileInfo वस्तुओं।

फ़ाइल धारा

दूसरा तरीका file access जैसा कि ऊपर उल्लेख किया गया है FileStream वर्ग, या संबंधित प्रकार में System.IOसीधे नामस्थान। इस बारे में कहने के लिए बहुत कुछ नहीं है, क्योंकि अधिकांश भाग के लिए, यह पूर्ण के साथ फ़ाइल एक्सेस के समान है.NET Framework।

हालांकि, सिल्वरलाइट-विशिष्ट ट्विस्ट के कुछ जोड़े हैं।

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

  • दूसरा मुद्दा यह है कि कुछ विशिष्ट फ़ोल्डरों में केवल फाइलें उपलब्ध हैं। आप केवल उन्हीं फ़ाइलों को पढ़ और लिख सकते हैं जो इसके अंतर्गत हैंUser's Documents, Music, Pictures, or Video files। इसका एक कारण यह है कि सिल्वरलाइट कई प्लेटफार्मों पर चलता है, और एक Apple मैक के लिए फ़ाइल सिस्टम संरचना, विंडोज से बहुत अलग है। इसलिए, क्रॉस-प्लेटफ़ॉर्म फ़ाइल एक्सेस को उन फ़ोल्डरों के सीमित सेट के संदर्भ में काम करना पड़ता है जो सभी सिस्टमों पर उपलब्ध होते हैं सिल्वरलाइट सपोर्ट करता है।

  • चूंकि ये फ़ोल्डर अलग-अलग ऑपरेटिंग सिस्टम पर अलग-अलग स्थानों में होंगे, और उनका स्थान आम तौर पर एक उपयोगकर्ता से दूसरे उपयोगकर्ता में भिन्न होगा, आपको इसका उपयोग करने की आवश्यकता है Environment.GetFolderPath रनटाइम पर वास्तविक स्थान की खोज करने की विधि।

  • आप शुरुआती बिंदुओं के नीचे निर्देशिका संरचना का निरीक्षण कर सकते हैं। Directory तथा DirectoryInfo में कक्षाएं System.IO नाम स्थान आपको फ़ाइलों और निर्देशिकाओं की गणना करने देता है।

एक सरल उदाहरण पर विचार करें जिसमें फ़ाइल के माध्यम से खुल सकता है OpenFileDialog और फ़ाइल के माध्यम से कुछ पाठ को बचाने के लिए SaveFileDialog।

नीचे दिया गया XAML कोड है जिसमें दो बटन और a text box बनाया है।

<UserControl x:Class = "FileDialogs.MainPage" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   xmlns:d = "http://schemas.microsoft.com/expression/blend/2008" 
   xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006" 
   mc:Ignorable = "d" 
   d:DesignHeight = "300" d:DesignWidth = "400"> 
   
   <Grid x:Name = "LayoutRoot" Background = "White">
	
      <Grid.RowDefinitions> 
         <RowDefinition Height = "Auto" /> 
         <RowDefinition Height = "265*" /> 
      </Grid.RowDefinitions>
		
      <Button 
         x:Name = "saveFileButton" 
         Content = "Save" 
         Width = "75" FontSize = "20" 
         HorizontalAlignment = "Left" VerticalAlignment = "Top" 
         Margin = "12,12" Click = "saveFileButton_Click" /> 
				
      <Button 
         x:Name = "openFileButton" 
         Content = "Open" 
         Width = "75" FontSize = "20" 
         HorizontalAlignment = "Left" VerticalAlignment = "Top" 
         Margin = "101,12,0,0" Click = "openFileButton_Click" /> 
				
      <TextBox 
         x:Name = "contentTextBox" 
         Grid.Row = "1" 
         Margin = "12" FontSize = "20" /> 
				
   </Grid> 
	
</UserControl>

नीचे दिए गए क्लिक कार्यान्वयन के लिए C # कोड है जिसमें फ़ाइल को खोला और सहेजा गया है।

using System; 
using System.Diagnostics; 
using System.IO; 

using System.Windows; 
using System.Windows.Controls; 
 
namespace FileDialogs {

   public partial class MainPage : UserControl { 
	
      public MainPage() { 
         InitializeComponent(); 
      }
	  
      private void saveFileButton_Click(object sender, RoutedEventArgs e) { 
         var save = new SaveFileDialog(); 
         save.Filter = "Text Files (*.txt)|*.txt|All Files (*.*)|*.*"; 
         save.DefaultExt = ".txt"; 
			
         if (save.ShowDialog() == true) { 
            Debug.WriteLine(save.SafeFileName); 
            using (Stream saveStream = save.OpenFile()) 
            using (var w = new StreamWriter(saveStream)) { 
               var fs = saveStream as FileStream; 
					
               if (fs != null) { 
                  w.Write(contentTextBox.Text); 
               } 
            } 
         } 
      }
	  
      private void openFileButton_Click(object sender, RoutedEventArgs e) { 
         var open = new OpenFileDialog(); 
			
         if (open.ShowDialog() == true) { 
            using (Stream openStream = open.File.OpenRead()) { 
               using (var read = new StreamReader(openStream)) { 
                  contentTextBox.Text = read.ReadToEnd(); 
               } 
            } 
         }  
      } 
   } 
}

जब उपरोक्त कोड संकलित और निष्पादित किया जाता है, तो आपको निम्न वेबपृष्ठ दिखाई देगा, जिसमें दो बटन हैं।

दबाएं Open बटन, जो खुल जाएगा OpenFileDialog एक पाठ फ़ाइल का चयन करने के लिए।

एक टेक्स्ट फ़ाइल चुनें और क्लिक करें Open, आप टेक्स्ट बॉक्स पर टेक्स्ट देखेंगे।

पाठ को फ़ाइल में सहेजने के लिए, पाठ को अपडेट करें।

दबाएं Save नई टेक्स्ट फ़ाइल या मौजूदा फ़ाइल में परिवर्तनों को सहेजने के लिए बटन।

मौजूदा पाठ फ़ाइल में परिवर्तन सहेजने के लिए, पाठ फ़ाइल का चयन करें SaveFileDialog, लेकिन अगर आप नई फ़ाइल में परिवर्तन सहेजना चाहते हैं, तो फ़ाइल नाम लिखें और क्लिक करें Save बटन।

इस अध्याय में, हम सिल्वरलाइट के सॉफ्टवेयर विकास, इसके उपयोग की एक महत्वपूर्ण तकनीक को देख रहे हैं View Models।

  • view model एक महत्वपूर्ण टुकड़ा है, जो दृश्य से मॉडल को अलग रखकर अलग प्रस्तुति नामक एक तकनीक का परिचय देता है।

  • View Models अलग-अलग प्रस्तुति प्राप्त करने का एक तरीका प्रदान करें, और हम देखेंगे कि वे आपके उपयोगकर्ता इंटरफ़ेस में आवश्यक कोड की मात्रा को कम करने के लिए सिल्वरलाइट के डेटा बाइंडिंग का शोषण कैसे करते हैं।

यूआई विकास चुनौतियां

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

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

  • यह देखने के लिए बहुत आम है कि बड़ी मात्रा में एप्लिकेशन की कार्यक्षमता पीछे के कोड में जोड़ी जाती है।

  • कुछ डेवलपर्स वास्तव में उपयोगकर्ता तर्क वर्ग में व्यावसायिक तर्क रखने की योजना बनाते हैं, लेकिन क्योंकि विज़ुअल स्टूडियो आपके ईवेंट हैंडलर को रखता है, यह चीजों को प्राप्त करने के लिए एक बहुत ही सुविधाजनक स्थान बन जाता है।

  • यह व्यापक रूप से स्वीकार किया जाता है कि यदि कक्षाओं में अच्छी तरह से परिभाषित, और यथोचित संकीर्ण जिम्मेदारियां हैं, तो सॉफ्टवेयर को विकसित करना और बनाए रखना आसान है।

  • कोड के पीछे का काम उन वस्तुओं के साथ सीधे संपर्क करना है जो उपयोगकर्ता इंटरफ़ेस बनाते हैं जहां यह आवश्यक है।

  • जैसे ही आप कोड डालना शुरू करते हैं जो इस बारे में निर्णय लेता है कि आपका आवेदन वहां कैसे व्यवहार करता है जिससे समस्याएं पैदा होती हैं।

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

  • मॉडल केवल डेटा रखता है, दृश्य केवल स्वरूपित दिनांक रखता है, और नियंत्रक (ViewModel) दोनों के बीच संपर्क का कार्य करता है। नियंत्रक दृश्य से इनपुट ले सकता है और इसे मॉडल पर रख सकता है और इसके विपरीत।

अलग से प्रस्तुतिकरण

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

अलग प्रस्तुति की महत्वपूर्ण विशेषताएं -

  • अलग प्रस्तुति के साथ, उपयोगकर्ता इंटरफ़ेस वर्ग बहुत सरल है। इसमें XAML जरूर है, लेकिन पीछे कोड उतना ही व्यावहारिक है।

  • एप्लिकेशन लॉजिक एक अलग वर्ग में है, जिसे अक्सर कहा जाता है model।

  • कई डेवलपर्स मॉडल में गुणों के लिए सीधे XAML में तत्वों को जोड़ने के लिए डेटा बाइंडिंग का उपयोग करने का प्रयास करते हैं।

  • समस्या यह है model यह पूरी तरह से इस बात से संबंधित है कि एप्लिकेशन क्या करता है, और यह नहीं कि उपयोगकर्ता एप्लिकेशन के साथ कैसे इंटरैक्ट करता है।

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

  • इस तरह की स्थिति आश्चर्यजनक रूप से जटिल हो सकती है, और इसे पूरी तरह से जांचने की आवश्यकता है।

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

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

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

मॉडल / दृश्य / दृश्यमॉडल

View Modelअलग प्रस्तुति दृष्टिकोण का एक उदाहरण है, लेकिन हमें स्पष्ट करना चाहिए कि प्रत्येक परत में हमारे पास किस प्रकार की चीज है। तीन परतें हैं -

  • Model
  • View
  • ViewModel

नमूना

यह है एक classic ऑब्जेक्ट मॉडल जिसमें साधारण सी # कक्षाएं शामिल हैं जिनका उपयोगकर्ता इंटरफ़ेस के साथ कोई सीधा संबंध नहीं है।

आप आमतौर पर अपने मॉडल कोड को किसी भी उपयोगकर्ता इंटरफ़ेस पुस्तकालयों के संदर्भ के बिना संकलन करने में सक्षम होने की उम्मीद करेंगे। वास्तव में, आप संभवतः ठीक उसी स्रोत कोड को लेने में सक्षम होंगे और इसे सिल्वरलाइट एप्लिकेशन, एक साधारण .NET कंसोल एप्लिकेशन, या यहां तक ​​कि सर्वर-साइड वेब कोड में संकलित कर पाएंगे।

मॉडल के प्रकार उन अवधारणाओं का प्रतिनिधित्व करते हैं, जिनके साथ आपका एप्लिकेशन काम करता है।

राय

आम तौर पर एक दृश्य एक UserControl है, यह आपका MainPage हो सकता है, या यह आपके पृष्ठ का कुछ हिस्सा हो सकता है।

अधिकांश सिल्वरलाइट अनुप्रयोगों में, अपने उपयोगकर्ता इंटरफ़ेस को छोटे टुकड़ों में विभाजित करने के लिए एक उपयोगकर्ता को विभाजित करना एक अच्छा विचार है।

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

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

ViewModel

अंत में, प्रत्येक के लिए View, आप लिखें ViewModel। तो, यह एक की महत्वपूर्ण विशेषताओं में से एक हैViewModel कक्षा।

यह एक विशेष दृश्य की सेवा के लिए मौजूद है। ViewModel चीजों को प्रस्तुत करने के एक विशेष तरीके के लिए विशिष्ट है, जैसे कि किसी विशेष डेटा आइटम के रूप में यह सूची में दिखाई देता है।

यही कारण है कि इसे ए कहा जाता है ViewModel; यह विशेष रूप से किसी विशेष दृश्य के लिए अंतर्निहित मॉडल को लागू करता है। जैसे मॉडल, दViewModelएक साधारण C # वर्ग भी है। इसे किसी विशेष प्रकार से प्राप्त करने की आवश्यकता नहीं है।

जैसा कि ऐसा होता है, कुछ डेवलपर्स को आधार व्यू व्यूमॉडल वर्ग में कुछ सामान्य कार्यक्षमता रखने के लिए सुविधाजनक लगता है, लेकिन पैटर्न इसकी मांग नहीं करता है। विशेष रूप से, आपकाViewModelकिसी भी सिल्वरलाइट विशिष्ट प्रकार से प्राप्त नहीं होता है। हालांकि, मॉडल के विपरीत, यह अपने गुणों में सिल्वरलाइट प्रकार का उपयोग कर सकता है।

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

उदाहरण

आइए हम एक सरल उदाहरण देखें जिसमें हम उपयोग करेंगे Model-View-ViewModel (MVVM) दृष्टिकोण।

Step 1 - एक नया सिल्वरलाइट एप्लिकेशन प्रोजेक्ट बनाएं SilverlightMVVMDemo।

Step 2 - नीचे दिखाए गए अनुसार अपनी परियोजना में तीन फ़ोल्डर (मॉडल, व्यूमॉडल, और दृश्य) जोड़ें।

Step 3 - मॉडल फ़ोल्डर में एक StudentModel क्लास जोड़ें और उस क्लास में नीचे का कोड पेस्ट करें।

using System.ComponentModel; 
 
namespace SilverlightMVVMDemo.Model { 

   public class StudentModel {} 
	
   public class Student : INotifyPropertyChanged { 
      private string firstName; 
      private string lastName;  
		
      public string FirstName { 
         get { return firstName; } 
			
         set {
            if (firstName != value) { 
               firstName = value; 
               RaisePropertyChanged("FirstName"); 
               RaisePropertyChanged("FullName"); 
            } 
         } 
      }
		
      public string LastName { 
         get { return lastName; } 
			
         set { 
            if (lastName != value) { 
               lastName = value; 
               RaisePropertyChanged("LastName"); 
               RaisePropertyChanged("FullName"); 
            } 
         } 
      }  
		
      public string FullName { 
         get { 
            return firstName + " " + lastName; 
         } 
      } 
		
      public event PropertyChangedEventHandler PropertyChanged; 
		
      private void RaisePropertyChanged(string property) { 
         if (PropertyChanged != null) { 
            PropertyChanged(this, new PropertyChangedEventArgs(property)); 
         } 
      } 
   } 
}

Step 4 - ViewModel फ़ोल्डर में एक और StudentViewModel वर्ग जोड़ें और निम्नलिखित कोड पेस्ट करें।

using SilverlightMVVMDemo.Model; 
using System.Collections.ObjectModel;
  
namespace SilverlightMVVMDemo.ViewModel { 

   public class StudentViewModel { 
	
      public ObservableCollection<Student> Students {  
         get;  
         set;  
      }  
		
      public void LoadStudents() { 
         ObservableCollection<Student> students = new ObservableCollection<Student>(); 
				
         students.Add(new Student { FirstName = "Mark", LastName = "Allain" }); 
         students.Add(new Student { FirstName = "Allen", LastName = "Brown" }); 
         students.Add(new Student { FirstName = "Linda", LastName = "Hamerski" });
			
         Students = students; 
      } 
   } 
}

Step 5 - जोड़ें Silverlight User Control पर राइट क्लिक करके Views फ़ोल्डर और चयन करें Add New Item…।

Step 6- जोड़ें। अब आपको XAML फाइल दिखाई देगी। निम्नलिखित कोड जोड़ेंStudentView.xaml फ़ाइल, जिसमें विभिन्न UI तत्व हैं।

<UserControl x:Class = "SilverlightMVVMDemo.Views.StudentView" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   xmlns:d = "http://schemas.microsoft.com/expression/blend/2008" 
   xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006" 
   mc:Ignorable = "d" 
   d:DesignHeight = "300" d:DesignWidth = "400">
   
   <Grid x:Name = "LayoutRoot" Background = "White">
	
      <StackPanel HorizontalAlignment = "Left">
		
         <ItemsControl ItemsSource = "{Binding Path=Students}">
			
            <ItemsControl.ItemTemplate>
				
               <DataTemplate> 
					
                  <StackPanel Orientation = "Horizontal"> 
                     <TextBox Text = "{Binding Path = FirstName, Mode = TwoWay}" 
                        Width = "100" Margin = "3 5 3 5"/> 
								
                     <TextBox Text = "{Binding Path = LastName, Mode = TwoWay}"  
                        Width = "100" Margin = "0 5 3 5"/> 
								
                     <TextBlock  Text = "{Binding Path = FullName, Mode=OneWay}" 
                        Margin = "0 5 3 5"/> 
								
                  </StackPanel>
						
               </DataTemplate> 
					
            </ItemsControl.ItemTemplate>
				
         </ItemsControl> 
			
      </StackPanel> 
		
   </Grid> 
	
</UserControl>

Step 7 - अब जोड़ें StudentView तुम्हारे अंदर MainPage.xaml फ़ाइल के रूप में नीचे दिखाया गया है।

<UserControl x:Class = "SilverlightMVVMDemo.MainPage" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   xmlns:d = "http://schemas.microsoft.com/expression/blend/2008" 
   xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006" 
   xmlns:views = "clr-namespace:SilverlightMVVMDemo.Views" 
   mc:Ignorable = "d" 
   d:DesignHeight = "576.316" d:DesignWidth = "863.158"> 
   
   <Grid x:Name = "LayoutRoot" Background = "White"> 
      <views:StudentView x:Name = "StudentViewControl" Loaded = "StudentViewControl_Loaded"/> 
   </Grid> 
	
</UserControl>

Step 8 - यहाँ का कार्यान्वयन है Loaded में घटना MainPage.xaml.cs फ़ाइल, जो अद्यतन करेगा View वहाँ से ViewModel।

using System.Windows; 
using System.Windows.Controls; 
 
namespace SilverlightMVVMDemo { 

   public partial class MainPage : UserControl { 
	
      public MainPage() { 
         InitializeComponent();
      }
   } 
	
   private void StudentViewControl_Loaded(object sender, RoutedEventArgs e) { 
      SilverlightMVVMDemo.ViewModel.StudentViewModel 
      studentViewModelObject = new SilverlightMVVMDemo.ViewModel.
      StudentViewModel(); 
      studentViewModelObject.LoadStudents();  
      StudentViewControl.DataContext = studentViewModelObject;  
   } 
}

Step 9 - जब उपरोक्त कोड संकलित और निष्पादित किया जाता है, तो आप वेबपेज पर निम्न आउटपुट देखेंगे।

यूआई बनाम व्यूमॉडल

एमवीवीएम दृष्टिकोण के सबसे कठिन हिस्सों में से एक काम कर रहा है जहां विभाजन रेखा आनी चाहिए। यह हमेशा स्पष्ट नहीं होता है कि कौन सी चीजें कहां से हैं।

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

  • सामान्य तौर पर, सभी व्यवहार लागू नहीं होते हैं View ऐसे हैं ViewModel अनुकूल।

  • इसका कारण यह है कि पुन: उपयोग के लिए ViewModel व्यवहार को पैकेज करने का कोई मानक तरीका नहीं है, खासकर यदि आप डिज़ाइन वातावरण का उपयोग नहीं करना चाहते हैं, जैसे कि विज़ुअल स्टूडियो, या ब्लेंड।

MVVM के लाभ

MVVM निम्नलिखित लाभ प्रदान करता है -

  • प्रस्तुतीकरण की चिंता (देखें, दृश्यमॉडल, मॉडल)

  • स्वच्छ परीक्षण योग्य और प्रबंधनीय कोड। इकाई परीक्षण में प्रस्तुति स्तरीय तर्क शामिल कर सकते हैं।

  • कोड के पीछे कोई कोड नहीं है, इसलिए प्रस्तुति परत और तर्क शिथिल युग्मित है।

  • डेटाबाइंडिंग का बेहतर तरीका।

एमवीवीएम के नुकसान

साधारण UI के लिए, MVVM ओवरकिल हो सकता है। जब हम जटिल डेटा बाइंडिंग करते हैं, तो डीबग करना थोड़ा मुश्किल होगा।

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

इनपुट प्रकार

कई अलग-अलग तरीके हैं, एक उपयोगकर्ता आपके आवेदन के साथ बातचीत कर सकता है। एक माउस के साथ सबसे स्पष्ट तरीका है। ट्रैकिंग के लिए सिल्वरलाइट ने दिया इवेंट -

  • मूषक की चाल
  • बटन क्लिक, और
  • पहिया गतिविधि

बेशक, कीबोर्ड भी है, और सिल्वरलाइट टच स्क्रीन इनपुट का भी समर्थन करता है। यदि आप विंडोज में टच सपोर्ट से परिचित हैं, तो आप जानते हैं कि टच इनपुट को निम्न स्तर की घटनाओं के रूप में प्रस्तुत किया जा सकता है, जो विस्तृत जानकारी प्रदान करता है, या इसे इशारों नामक उच्च-स्तरीय घटनाओं में संक्षेपित किया जा सकता है।

माउस घटनाएँ

हमें माउस इनपुट ईवेंट्स सिल्वरलाइट ऑफ़र को देखकर शुरू करें। कुछ घटनाएँ माउस पॉइंटर की गति से संबंधित हैं।

  • MouseMove ईवेंट पॉइंटर को कभी भी उठाया जाता है जबकि यह उन तत्वों के ऊपर होता है जिनसे आपने हैंडलर को जोड़ा है।

  • आप भी प्राप्त करें MouseEnter तथा MouseLeave जब माउस तत्व के अंदर और बाहर जाता है, तो आपको सूचित करने की घटनाएं।

नीचे दिया गया XAML कोड है जिसमें दीर्घवृत्त और TextBlock जोड़ा गया है।

<UserControl x:Class="MouseInput.MainPage" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   xmlns:d = "http://schemas.microsoft.com/expression/blend/2008" 
   xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006" 
   mc:Ignorable = "d" 
   d:DesignHeight = "300" d:DesignWidth = "400">  
   
   <Grid x:Name = "LayoutRoot" Background = "White">
	
      <TextBlock x:Name = "mouseText" FontSize = "40" 
         VerticalAlignment = "Top" Height = "76" Margin = "0,10,0,0" />
			 
      <Ellipse
         Name = "myEllipse"  
         Width = "320" Height = "150" HorizontalAlignment = "Left" 
         VerticalAlignment = "Top" Margin = "27,103,0,0" 
         Stroke = "Black" StrokeThickness = "10" Fill = "#00FF0000" 
         MouseEnter = "myEllipse_MouseEnter" 
         MouseLeave = "myEllipse_MouseLeave" 
         MouseMove = "myEllipse_MouseMove" /> 
			
   </Grid> 
	
</UserControl>

नीचे दिए गए विभिन्न के लिए कार्यान्वयन है mouse input आयोजन।

using System.Windows.Controls; 
using System.Windows.Input; 
using System.Windows.Media; 
 
namespace MouseInput { 

   public partial class MainPage : UserControl { 
	
      public MainPage() { 
         InitializeComponent(); 
      } 
     
      private void myEllipse_MouseEnter(object sender, MouseEventArgs e) { 
         mouseText.Text = "Mouse Enter"; 
         myEllipse.Stroke = new SolidColorBrush(Colors.Blue); 
      }  
      
      private void myEllipse_MouseLeave(object sender, MouseEventArgs e) { 
         mouseText.Text = "Mouse Leave"; 
         myEllipse.Stroke = new SolidColorBrush(Colors.Black);  
      }  
      
      private void myEllipse_MouseMove(object sender, MouseEventArgs e) { 
         mouseText.Text = "Mouse Move: " + e.GetPosition(myEllipse);  
      }  
   } 
}

जब उपरोक्त कोड संकलित और निष्पादित किया जाता है, तो आपको निम्न आउटपुट दिखाई देगा।

जब माउस दीर्घवृत्त में प्रवेश करता है, तो आप रंग और निर्देशांक में परिवर्तन देखेंगे।

जब माउस दीर्घवृत्त छोड़ता है, तो यह एक संदेश दिखाएगा 'mouse leave'और डिफ़ॉल्ट रंग में बदल जाएगा।

कीबोर्ड

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

  • सिल्वरलाइट कीबोर्ड इनपुट के लिए दो सीधी घटनाएं प्रदान करता है, KeyUp तथा KeyDown।

  • ये दोनों एक पास हैं KeyEventArgs हैंडलर के लिए, और कुंजी गुण इंगित करता है कि किस कुंजी को दबाया गया था।

  • नीचे दिए गए उदाहरण में कुछ कीबोर्ड इनपुट को संभाला गया है।

  • निम्न उदाहरण क्लिक इवेंट के लिए एक हैंडलर और के लिए एक हैंडलर को परिभाषित करता है KeyDown प्रतिस्पर्धा।

नीचे दिया गया XAML कोड है जिसमें विभिन्न UI तत्व जोड़े गए हैं।

<UserControl x:Class = "KeyboardInput.MainPage" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   xmlns:d = "http://schemas.microsoft.com/expression/blend/2008" 
   xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006" 
   mc:Ignorable = "d" 
   d:DesignHeight = "300" d:DesignWidth = "400">
	
   <Grid x:Name = "LayoutRoot" Background = "White">
	
      <StackPanel Orientation = "Horizontal" KeyDown = "OnTextInputKeyDown"> 
         <TextBox Width = "400" Height = "30" Margin = "10"/> 
			
         <Button Click = "OnTextInputButtonClick" 
            Content = "Open" Margin = "10" Width = "50" Height = "30"/> 
				
      </StackPanel>
		
   </Grid> 
	
</UserControl>

नीचे दिया गया C # कोड है जिसमें विभिन्न कीबोर्ड और क्लिक ईवेंट्स को संभाला गया है।

using System.Windows; 
using System.Windows.Controls; 
using System.Windows.Input;
  
namespace KeyboardInput {

   public partial class MainPage : UserControl { 
	
      public MainPage() { 
         InitializeComponent(); 
      } 
		
      private void OnTextInputKeyDown(object sender, KeyEventArgs e) { 
         if (e.Key == Key.O) { 
            handle(); 
            e.Handled = true; 
         } 
      } 
		
      private void OnTextInputButtonClick(object sender, RoutedEventArgs e) { 
         handle(); 
         //e.Handled = true; 
      } 
		
      public void handle() { 
         MessageBox.Show("Do you want to open a file?"); 
      }  
   } 
}

जब उपरोक्त कोड संकलित और निष्पादित किया जाता है, तो आप निम्नलिखित देखेंगे -

अगर आप क्लिक करें Open बटन या टेक्स्टबॉक्स में क्लिक करें और क्लिक करें OK, तो यह एक ही संदेश प्रदर्शित करेगा।

हम आपको बेहतर समझ के लिए उपरोक्त उदाहरण को निष्पादित करने की सलाह देते हैं।

तीसरी फ़ाइल पहुंच तंत्र है Isolated Storageतंत्र, जो उपयोगकर्ता में लॉग इन के साथ जुड़े भंडारण प्रदान करता है। एपीआई डेटा के माध्यम से प्रस्तुत करता हैStream से कक्षा .NET System.IOनाम स्थान। इसलिए, हमने अभी तक जिन अन्य तंत्रों को देखा है, आप अन्य प्रकारों का उपयोग कर सकते हैंSystem.IO स्ट्रीम के साथ काम करने के लिए, आपको टेक्स्ट या बाइनरी डेटा स्टोर करने में सक्षम बनाता है।

कुछ महत्वपूर्ण विशेषताएं हैं -

  • इस भंडारण तंत्र को कहा जाता है Isolated Storage क्योंकि स्टोर का विभाजन हो गया है, और एक सिल्वरलाइट एप्लिकेशन का उपयोग केवल कुछ भागों तक ही होता है।

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

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

पृथक भंडारण का उपयोग करना

पृथक भंडारण सिल्वरलाइट के लिए अद्वितीय नहीं है। एपीआई मूल रूप से के लिए पेश किया गया थाWindows Formsआंशिक विश्वास परिदृश्यों में स्थानीय रूप से डेटा संग्रहीत करने के लिए वेब से लॉन्च किए गए एप्लिकेशन को सक्षम करने के लिए। कार्यान्वयन अलग है, और पूर्ण तक पहुंचने का कोई तरीका नहीं है.NET सिल्वरलाइट के फ्रेमवर्क का पृथक भंडारण, या इसके विपरीत।

हालांकि, यदि आपने इसका उपयोग किया है, तो यहां कदम बहुत परिचित दिखेंगे।

  • आप उपयोगकर्ता विशिष्ट स्टोर के लिए पूछकर शुरू करते हैं। इस मामले में, हम आवेदन के लिए एक के लिए पूछ रहे हैं। यदि हम साइट पर सभी XAPs द्वारा साझा प्रति-साइट स्टोर चाहते थे, तो हम कॉल करेंगेGetUserStoreForSite बजाय।

  • या तो विधि एक रिटर्न IsolatedStorageFile ऑब्जेक्ट, जो एक बहुत ही बेकार नाम है क्योंकि यह एक निर्देशिका का प्रतिनिधित्व करता है, एक फाइल का नहीं।

  • किसी फ़ाइल तक पहुँचने के लिए, आपको यह पूछने की आवश्यकता है IsolatedStorageFile के लिए Stream।

  • हम उपयोग करते हैं IsolatedStorageFileStream वर्ग, और इसके निर्माता को आपको पास करने की आवश्यकता होती है IsolatedStorageFile एक तर्क के रूप में वस्तु।

  • इसलिए हम स्टोर में एक नई फ़ाइल बना रहे हैं। डिस्क पर फ़ाइल का सटीक स्थान अज्ञात है।

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

  • इसके बिना, दुर्भावनापूर्ण वेबसाइटों के लिए उपयोगकर्ता के कंप्यूटर पर एक फ़ाइल रखना संभव हो सकता है, और फिर इसे खोलने के लिए उपयोगकर्ता को बेवकूफ बनाने की उम्मीद में एक लिंक पर क्लिक करें, जो किसी प्रोग्राम को स्थानीय रूप से निष्पादित करता है।

  • विंडोज में निर्मित विभिन्न अन्य सुरक्षा उपाय हैं जो इसे होने से रोकने की कोशिश करते हैं, लेकिन यह रक्षा की एक और परत है जब अन्य को किसी तरह से अक्षम किया गया है, या बाईपास किया गया है।

  • फ़ाइल को उपयोगकर्ता के प्रोफ़ाइल के अंदर कहीं संग्रहीत किया जाएगा, लेकिन यह उतना ही है जितना आप इसके बारे में जान सकते हैं। तुम्हारीIsolatedStorageFileStream इसके वास्तविक स्थान की रिपोर्ट नहीं करेगा।

आइए हम एक सरल उदाहरण पर नजर डालते हैं जो यह बताता है कि आवेदन कितनी बार चलाया गया है। नीचे XAML कोड दिया गया है।

<UserControl x:Class = "StoreRunCount.MainPage" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   xmlns:d = "http://schemas.microsoft.com/expression/blend/2008" 
   xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006" 
   mc:Ignorable = "d" 
   d:DesignHeight = "300" d:DesignWidth = "400"> 
   
   <Grid x:Name = "LayoutRoot" Background = "White"> 
      <TextBlock x:Name = "runCountText" FontSize = "20" /> 
   </Grid> 
	
</UserControl>

यहाँ C # कोड दिया गया है जिसमें Isolated storage उपयोग किया जाता है।

using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Net; 

using System.Windows; 
using System.Windows.Controls; 
using System.Windows.Documents; 
using System.Windows.Input; 
using System.Windows.Media; 
using System.Windows.Media.Animation; 
using System.Windows.Shapes; 

using System.IO.IsolatedStorage; 
using System.IO;

namespace StoreRunCount { 

   public partial class MainPage : UserControl {
	
      const string RunCountFileName = "RunCount.bin"; 
		
      public MainPage() { 
         InitializeComponent();  
         int runCount = 0;  
			
         using (var store = IsolatedStorageFile.GetUserStoreForApplication()) { 
			
            if (store.FileExists(RunCountFileName)) { 
               using (var stm = store.OpenFile(RunCountFileName, 
                  FileMode.Open, FileAccess.Read)) 
               using (var r = new BinaryReader(stm)) { 
                  runCount = r.ReadInt32(); 
               }  
            } 
			
            runCount += 1;  
            using (var stm = store.OpenFile(RunCountFileName, 
               FileMode.Create, FileAccess.Write)) 
					
            using (var w = new BinaryWriter(stm)) { 
               w.Write(runCount); 
            } 
         }  
			
         runCountText.Text = "You have run this application " + runCount.ToString() + " time(s)"; 
      } 
   }
}

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

आपका कोटा बढ़ रहा है

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

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

IsolatedStorageFile ऑब्जेक्ट कोटा को प्रबंधित करने के लिए तीन सदस्य प्रदान करता है -

  • AvailableFreeSpace
  • IncreaseQuotaTo
  • Quota

AvailableFreeSpace

उपलब्ध फ़्रीस्पेस स्पेस संपत्ति आपको बताती है कि आपका कोटा कितना मुक्त है।

ध्यान दें कि यहां तक ​​कि एक खाली उपनिर्देशिका आपके कुछ कोटा का उपभोग करती है क्योंकि ऑपरेटिंग सिस्टम को निर्देशिका का प्रतिनिधित्व करने के लिए डिस्क पर जगह आवंटित करने की आवश्यकता होती है। तो, उपलब्ध स्थान कुल कोटा से कम हो सकता है, आपकी सभी फ़ाइलों का कुल आकार घटा सकता है।

IncreaseQuotaTo

यदि आपके पास आगे बढ़ने के लिए पर्याप्त जगह नहीं है, तो आप कॉल करके अधिक मांगते हैं IncreaseQuotaTo तरीका।

कोटा

यहां हम तीसरी संपत्ति का उपयोग कर रहे हैं, Quota, वर्तमान कोटा आकार की खोज करने के लिए, और फिर हम अपने नए अनुरोधित कोटा को प्राप्त करने के लिए आवश्यक अतिरिक्त राशि जोड़ रहे हैं।

विधि या तो लौटती है True या Falseयह इंगित करने के लिए कि क्या हमें आवंटित किया गया है जो हमने मांगा ध्यान दें कि सिल्वरलाइट आपके द्वारा मांगे गए से अधिक स्थान आवंटित करने का निर्णय ले सकती है।

यहाँ एक सरल उदाहरण है कि वृद्धि हुई है quota, जब बटन पर क्लिक किया जाता है। नीचे XAML कोड दिया गया है।

<UserControl x:Class = "ChangeQuota.MainPage" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   xmlns:d = "http://schemas.microsoft.com/expression/blend/2008" 
   xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006" 
   mc:Ignorable = "d" 
   d:DesignHeight = "300" d:DesignWidth = "400"> 
   
   <Grid x:Name = "LayoutRoot" Background = "White"> 
      <TextBlock x:Name = "infoText" FontSize = "20" TextWrapping = "Wrap" />  
      <Button x:Name = "increaseQuota" Content = "Increase" HorizontalAlignment = "Center" 
         FontSize = "20" 
         VerticalAlignment = "Center" Click = "increaseQuota_Click" /> 
   </Grid>
	
</UserControl>

यहाँ का कार्यान्वयन है click घटना जिसमें कोटा बढ़ा है।

using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Net; 

using System.Windows; 
using System.Windows.Controls; 
using System.Windows.Documents; 
using System.Windows.Input;
using System.Windows.Media; 
using System.Windows.Media.Animation; 
using System.Windows.Shapes; 

using System.IO.IsolatedStorage;
  
namespace ChangeQuota { 

   public partial class MainPage : UserControl { 
	
      public MainPage() { 
         InitializeComponent(); 
      } 
	  
      private void increaseQuota_Click(object sender, RoutedEventArgs e) { 
         using (IsolatedStorageFile isoStore = 
            IsolatedStorageFile.GetUserStoreForApplication()) { 
               long newQuota = isoStore.Quota + 10240; 
					
               if (isoStore.IncreaseQuotaTo(newQuota)) { 
                  infoText.Text = "Quota is " + isoStore.Quota + ", free space: " + 
                  isoStore.AvailableFreeSpace; 
               } else { 
                  infoText.Text = "Meanie!"; 
               } 
         } 
      } 
   } 
}

जब उपरोक्त कोड संकलित और निष्पादित किया जाता है, तो आपको निम्न आउटपुट दिखाई देगा।

जब आप क्लिक करेंगे Increaseशीघ्र प्रकट होता है। इसे बढ़ाने के लिए कहता हैQuota जो भी पहले से है उससे 10KB बड़ा होना।

जब आप क्लिक करेंगे Yes, यह तब उपलब्ध कोटा की मात्रा को प्रिंट करता है।

हम आपको बेहतर समझ के लिए उपरोक्त उदाहरणों को निष्पादित करने की सलाह देते हैं।

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

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

TextBlock

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

<TextBlock Text = "Print Testing" HorizontalAlignment Center" FontFamily = "Georgia"/>

टेक्स्टब्लॉक श्रेणी का पदानुक्रम विरासत इस प्रकार है,

नीचे दिए गए आमतौर पर इस्तेमाल किया जाता है properties का TextBlock कक्षा।

अनु क्रमांक। संपत्ति विवरण
1

ContentEnd

TextBlock में पाठ सामग्री के अंत के लिए एक TextPointer ऑब्जेक्ट हो जाता है।
2

ContentStart

TextBlock में पाठ सामग्री की शुरुआत के लिए एक TextPointer ऑब्जेक्ट हो जाता है।
3

IsTextSelectionEnabled

एक मान प्राप्त करता है या सेट करता है जो यह बताता है कि पाठ चयन टेक्स्टब्लॉक में सक्षम है, या तो उपयोगकर्ता कार्रवाई या कॉलिंग से संबंधित एपीआई के माध्यम से।
4

IsTextSelectionEnabledProperty

IsTextSelectionEnabled निर्भरता गुण की पहचान करता है।
5

LineHeight

हो जाता है या सामग्री की प्रत्येक पंक्ति की ऊंचाई निर्धारित करता है।
6

MaxLines

TextBlock में दिखाए गए पाठ की अधिकतम पंक्तियों को प्राप्त या सेट करता है।
7

SelectedText

चयनित पाठ की एक पाठ सीमा प्राप्त करता है।
8

SelectionEnd

TextBlock में चयनित पाठ की अंतिम स्थिति प्राप्त करता है।
9

SelectionHighlightColor

चयनित पाठ को हाइलाइट करने के लिए उपयोग किए गए ब्रश को हो जाता है या सेट करता है।
10

SelectionStart

टेक्स्टब्लॉक में चयनित पाठ की प्रारंभिक स्थिति प्राप्त करता है।
1 1

Text

एक टेक्स्टब्लॉक की पाठ्य सामग्री को प्राप्त या सेट करता है।
12

TextAlignment

हो जाता है या एक मूल्य निर्धारित करता है जो पाठ सामग्री के क्षैतिज संरेखण को इंगित करता है।
13

TextTrimming

जब सामग्री कंटेंट क्षेत्र को ओवरफ्लो कर देती है, तो टेक्स्ट ट्रिमिंग व्यवहार को नियोजित या निर्धारित करता है।
14

TextWrapping

हो जाता है या सेट कैसे TextBlock पाठ लपेटता है।

नीचे दिए गए आमतौर पर उपयोग किया जाता है events का TextBlock कक्षा।

अनु क्रमांक। घटना विवरण
1

ContextMenuOpening

तब होता है जब सिस्टम एक इंटरैक्शन प्रक्रिया करता है जो एक संदर्भ मेनू प्रदर्शित करता है।
2

SelectionChanged

तब होता है जब पाठ चयन बदल गया है।

नीचे दिए गए आमतौर पर इस्तेमाल किया जाता है methods में TextBlock कक्षा।

अनु क्रमांक। विधि और विवरण
1

Focus

टेक्स्टब्लॉक पर ध्यान केंद्रित करता है, जैसे कि यह एक पारंपरिक रूप से फ़ोकस करने योग्य नियंत्रण था।
2

Select

TextBlock में पाठ की एक श्रृंखला का चयन करता है।
3

SelectAll

TextBlock में संपूर्ण सामग्री का चयन करता है।

Daud

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

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

आइए हम एक सरल उदाहरण देखें, जिसमें कई शामिल हैं Run तत्व अंदर TextBlock। नीचे XAML कोड दिया गया है।

<UserControl x:Class = "SilverlightRunDemo.MainPage" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   xmlns:d = "http://schemas.microsoft.com/expression/blend/2008" 
   xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006" 
   mc:Ignorable = "d" 
   d:DesignHeight = "300" d:DesignWidth = "400">
	
   <Grid x:Name = "LayoutRoot" Background = "White"> 
	
      <TextBlock Width = "192" TextWrapping = "Wrap" FontFamily = "Verdana"> 
         <Run Text = "Hello, " /> 
         <Run FontWeight = "Bold" Text = "world!" /> 
         <Run Text = "You" /> 
         <Run FontStyle = "Italic" Text = " are  " /> 
         <Run Text = "learning" FontSize = "40" FontFamily = "01d English Text MT" /> 
         <Run Text = "   the " /> 
         <Run Text = "basics of " Foreground = "Blue" /> 
         <Run Text = " Silverlight." FontSize = "30" /> 
      </TextBlock> 
		
   </Grid> 
	
</UserControl>

जब उपरोक्त कोड संकलित और निष्पादित किया जाता है, तो आपको निम्न आउटपुट दिखाई देगा।

जैसा कि आप देख सकते हैं, इस टेक्स्ट ब्लॉक को अलग-अलग प्रारूपण शैलियों के साथ उपयोग करके व्यवस्थित किया गया है Run तत्व।

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

<TextBlock> Hello,  
   <Run FontWeight = "Bold" Text =" world!"/> 
</TextBlock>

रेखा अवरोध

सिल्वरलाइट आमतौर पर एक्सएएमएल में लाइन ब्रेक की अनदेखी करता है। यह मानता है कि अधिकांश सफेद स्थान उन्हें पढ़ने में आसान बनाने के लिए हैं क्योंकि आप वास्तव में उस स्थान को प्रकट करना चाहते हैं।

आइए इस XAML कोड पर एक नजर डालते हैं, जिसमें पाठ की तीन अलग-अलग लाइनें हैं।

<TextBlock>  
   This is not the end. 
   It is not even the beginning of the end. 
   But it is, perhaps, the end of the beginning 
</TextBlock>

जब उपरोक्त कोड संकलित और निष्पादित किया जाता है, तो आपको निम्न आउटपुट दिखाई देगा।

जैसा कि आप देख सकते हैं कि इसने लाइन ब्रेक को अनदेखा कर दिया है और सभी टेक्स्ट को एक साथ निष्पादित किया है।

  • यदि आप सक्षम हैं text wrapping, यह जहां पाठ को फिट बनाने के लिए होना चाहिए, वहां लाइन ब्रेक लगाएगा लेकिन यह आपके उदाहरण में लाइन ब्रेक को अनदेखा करेगा।

  • यदि आप केवल स्पष्ट रेखा विराम जोड़ना चाहते हैं, तो आपको अपने पाठ खंड के अंदर एक पंक्ति विराम टैग जोड़ना होगा। पाठ इस प्रकार है यह एक नई लाइन पर शुरू होगा।

आइए हम एक ही उदाहरण को फिर से जोड़कर देखें LineBreak टैग।

<TextBlock FontSize = "16">  
   This is not the end. 
   <LineBreak/> 
	
   It is not even the beginning of the end. 
   <LineBreak/> 
	
   But it is, perhaps, the end of the beginning
</TextBlock>

जब उपरोक्त कोड निष्पादित किया जाता है, तो आप देखेंगे कि यह अब XAML में निर्दिष्ट जैसा दिखता है।

निर्मित फ़ॉन्ट्स

सिल्वरलाइट में बिल्ट-इन फॉन्ट परिवारों का एक निश्चित सेट है। फोंट वास्तव में ऐतिहासिक कारणों के लिए अलग-अलग पारिवारिक नाम हैं। डिफ़ॉल्ट परिवार मैक ओएस पर तकनीकी रूप से अलग है और मैक ओएस पर विंडोज़ जैसे कि यह लुसिडा ग्रांडे है, जबकि विंडोज पर यह लगभग समान है लेकिन नाम लुसिडा सैंस यूनिकोड है।

सबसे अधिक इस्तेमाल किए जाने वाले कुछ फोंट नीचे दिए गए हैं।

फोंट्स
एरियल
एरियल ब्लैक
कॉमिक संस एमएस
नया संदेशवाहक
जॉर्जिया
ल्यूसिडा ग्रांडे (मैक) या ल्यूसिडा सैंस यूनिकोड (विंडोज)
टाइम्स न्यू रोमन
ट्रेबुचेट एमएस
Verdana

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

कभी-कभी, ये प्रभाव अत्यधिक ग्लिट्ज़ की तरह लगते हैं। यदि ठीक से उपयोग किया जाता है, तो एनिमेशन कई तरीकों से एप्लिकेशन को बढ़ा सकता है। वे कर सकते हैं एक आवेदन अधिक संवेदनशील, प्राकृतिक, और सहज ज्ञान युक्त लग रहा है।

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

फ्रेम के एनिमेशन के दृश्यों पर ध्यान देने के बजाय एनिमेशन के लिए सिल्वरलाइट का दृष्टिकोण घोषित है।

एनिमेशन को परिभाषित करना

एनिमेशन आमतौर पर संसाधन अनुभागों में परिभाषित किए जाते हैं। वास्तव में, वे आमतौर पर एक कहानी बोर्ड तत्व में लिपटे होते हैं, जिसे हम जल्द ही विस्तार से देखेंगे।

  • यह एक शुरुआत () विधि प्रदान करता है, इसलिए एनीमेशन को कोड से लागू किया जा सकता है।

  • एनिमेशन को एक नियंत्रण टेम्पलेट में दृश्य राज्य तत्वों के अंदर भी रखा जा सकता है।

घोषणात्मक एनीमेशन

सिल्वरलाइट में एनिमेशन घोषणात्मक हैं। वे बताते हैं कि क्या होना चाहते हैं। इसे बनाने के लिए सिल्वरलाइट तक छोड़ दें कि यह कैसे हो सकता है। इसलिए एनिमेशन आम तौर पर उस पैटर्न का अनुसरण करते हैं जो हम सिल्वरलाइट को बताते हैं कि हम क्या बदलना चाहते हैं।

यह हमेशा कुछ नामित तत्वों पर कुछ संपत्ति है TargetName तथा TargetProperty।

<DoubleAnimation 
   Storyboard.TargetName = "myRectangle" 
   Storyboard.TargetProperty = "Opacity" 
   From = "0" To = "1" 
   Duration = "0:0:5"  
/>

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

  • अंत में, हम कहते हैं कि हम इसे कब तक लेना चाहते हैं, इस मामले में पांच सेकंड लगेंगे।

  • इस डबल एनीमेशन में डबल का महत्व यह है कि यह एक संपत्ति को लक्षित करता है जिसमें डबल टाइप होता है, इसलिए एक फ्लोटिंग पॉइंट वैल्यू।

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

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

<UserControl x:Class = "DoubleAnimationExample.MainPage" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   xmlns:d = "http://schemas.microsoft.com/expression/blend/2008"  
   xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006"  
   mc:Ignorable = "d" d:DesignWidth = "640" d:DesignHeight = "480">
   
   <UserControl.Resources> 
	
      <Storyboard x:Name = "fadeDown"> 
         <DoubleAnimation  
            Storyboard.TargetName = "myRectangle" 
            Storyboard.TargetProperty = "Opacity" 
            From = "1" To = "0" 
            Duration = "0:0:5" /> 
      </Storyboard> 
		
      <Storyboard x:Name = "fadeUp"> 
         <DoubleAnimation 
            Storyboard.TargetName = "myRectangle" 
            Storyboard.TargetProperty = "Opacity" 
            From = "0" To = "1" 
            Duration = "0:0:5" /> 
      </Storyboard> 
		
   </UserControl.Resources> 
	
   <Grid x:Name = "LayoutRoot"> 
      <Rectangle x:Name = "myRectangle" 
         Fill = "Blue" Width = "300" Height = "100"  
         HorizontalAlignment = "Center" 
         VerticalAlignment = "Top" Margin = "0,30" /> 
			
      <Button x:Name = "fadeUpButton" Content = "Up" Width = "80"  
         Height = "30" HorizontalAlignment = "Left" 
         VerticalAlignment = "Top" Margin = "50,140,0,0"  
         Click = "fadeUpButton_Click" /> 
			
      <Button x:Name = "fadeDownButton" Content = "Down"  
         Width = "80" Height = "30" HorizontalAlignment = "Left" 
         VerticalAlignment = "Top" Margin = "50,180,0,0"  
         Click = "fadeDownButton_Click" />
			
   </Grid>
	
</UserControl>

यहाँ C # में विभिन्न घटनाओं के लिए कार्यान्वयन है।

using System.Windows; 
using System.Windows.Controls;  

namespace DoubleAnimationExample { 

   public partial class MainPage : UserControl { 
	
      public MainPage() { 
         InitializeComponent(); 
      } 
	  
      private void fadeUpButton_Click(object sender, RoutedEventArgs e) { 
         fadeUp.Begin(); 
      }
	  
      private void fadeDownButton_Click(object sender, RoutedEventArgs e) { 
         fadeDown.Begin(); 
      } 
   } 
}

जब उपरोक्त कोड संकलित और निष्पादित किया जाता है, तो आपको निम्न आउटपुट दिखाई देगा।

दोहराते और उलटते

एनिमेशन स्वचालित रूप से दोहराने और सभी रिवर्स एनिमेशन के लिए कुछ गुण प्रदान करते हैं।

  • यदि आप दोहराए जाने वाले व्यवहार की संपत्ति को एक समय स्पैम पर सेट करते हैं, तो एनीमेशन दोहराए जाने तक चारों ओर लूप करेगा जब तक कि निर्दिष्ट समय समाप्त नहीं हो जाता है या आप बस यह बता सकते हैं कि आप इसे कितनी बार दोहराना चाहेंगे।

  • यह दशमलव बिंदुओं का समर्थन करता है ताकि आप साढ़े चार बार दोहरा सकें।

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

कुंजी फ़्रेम एनीमेशन

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

आइए हम एक सरल उदाहरण देखें Key Frame animation।

नीचे दिया गया XAML कोड है, जिसमें मुख्य फ्रेम के साथ एक दीर्घवृत्त और डबल एनीमेशन है।

<UserControl x:Class = "LinearKeyFrames.MainPage" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   xmlns:d = "http://schemas.microsoft.com/expression/blend/2008" 
   xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006"  
   mc:Ignorable = "d" 
   Width = "400" Height = "300">
   
   <UserControl.Resources> 
	
      <Storyboard x:Name = "ballAnim" SpeedRatio = "0.2"> 
         <DoubleAnimation From = "0" Duration = "00:00:03" To = "96" 
            Storyboard.TargetName = "ellipse" 
            Storyboard.TargetProperty = "(Canvas.Left)" />
				
         <DoubleAnimationUsingKeyFrames  
            Storyboard.TargetName = "ellipse" 
            Storyboard.TargetProperty = "(Canvas.Top)"> 

            <LinearDoubleKeyFrame KeyTime = "00:00:00"   Value = "0"/> 
            <LinearDoubleKeyFrame KeyTime = "00:00:00.5" Value = "16" /> 
            <LinearDoubleKeyFrame KeyTime = "00:00:01"   Value = "48"/> 
            <LinearDoubleKeyFrame KeyTime = "00:00:01.5" Value = "112"/> 
            <LinearDoubleKeyFrame KeyTime = "00:00:02"   Value = "48"/> 
            <LinearDoubleKeyFrame KeyTime = "00:00:02.5" Value = "16"/> 
            <LinearDoubleKeyFrame KeyTime = "00:00:03"   Value = "0"/> 
				
         </DoubleAnimationUsingKeyFrames> 
			
      </Storyboard>
		
   </UserControl.Resources>
	
   <Grid x:Name = "LayoutRoot" Background = "White"> 
      <Canvas> 
         <Ellipse x:Name = "ellipse" Fill = "Aqua" Width = "50" Height = "50" /> 
      </Canvas> 
   </Grid> 
	
</UserControl>

यहाँ के लिए कार्यान्वयन है mouse left बटन डाउन ईवेंट, जो वेब पेज पर उपयोगकर्ता के बाईं ओर माउस बटन दबाने पर एनीमेशन शुरू हो जाएगा।

using System.Windows.Controls; 
using System.Windows.Input; 
 
namespace LinearKeyFrames { 

   public partial class MainPage : UserControl {
	
      public MainPage() { 
         InitializeComponent();  
         this.MouseLeftButtonDown += new MouseButtonEventHandler(Page_MouseLeftButtonDown); 
      } 
	  
      void Page_MouseLeftButtonDown(object sender, MouseButtonEventArgs e) { 
         ballAnim.Begin(); 
      } 
   } 
}

जब उपरोक्त कोड संकलित और निष्पादित किया जाता है, तो आपको निम्न आउटपुट दिखाई देगा।

जब आप वेब पेज पर क्लिक करते हैं, तो आप देखेंगे कि गेंद हिलने लगती है।

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

मुख्य अंतर यह है कि यह एक चलती छवि होगी, लेकिन यदि आप इसे उस फ़ाइल की ओर इंगित करते हैं जिसमें केवल ऑडियो और कोई वीडियो नहीं है जैसे कि एमपी 3, तो यह स्क्रीन पर कुछ भी दिखाए बिना इसे चलाएगा।

UI तत्व के रूप में MediaElement

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

आइए हम एक सरल उदाहरण देखें MediaElement।

Visual Studio के लिए Microsoft Blend खोलें और एक नया Silverlight अनुप्रयोग प्रोजेक्ट बनाएँ।

अब ब्लेंड डिज़ाइन की सतह में वीडियो और ऑडियो फ़ाइल को ड्रैग करें।

यह सतह पर एक MediaElement जोड़ देगा और आपके प्रोजेक्ट में वीडियो फ़ाइल की एक प्रति भी जोड़ देगा। आप इसे सॉल्यूशन एक्सप्लोरर में देख सकते हैं।

आप इसे इधर-उधर कर सकते हैं, इसका आकार बदल सकते हैं, आप घूमने आदि का काम कर सकते हैं।

अब, यह आपके लिए संबंधित XAML उत्पन्न करेगा MainPage.xaml नीचे दिखाए गए की तरह फ़ाइल।

<UserControl x:Class = "MediaElementDemo.MainPage" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   xmlns:d = "http://schemas.microsoft.com/expression/blend/2008" 
   xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006" 
   mc:Ignorable = "d" 
   d:DesignHeight = "300" d:DesignWidth = "400">
   
   <Grid x:Name = "LayoutRoot" Background = "White">
	
      <MediaElement x:Name = "Microsoft_Silverlight_DEMO_mp4"  
         Margin = "51,49,53,53"  
         Source = "/Microsoft Silverlight DEMO.mp4"  
         Stretch = "Fill" RenderTransformOrigin = "0.5,0.5">
			
         <MediaElement.RenderTransform> 
            <CompositeTransform Rotation = "-18.384"/>
         </MediaElement.RenderTransform> 
			
      </MediaElement>  
		
   </Grid> 
	
</UserControl>

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

को नियंत्रित करना

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

आप सेटिंग करके स्वचालित प्लेबैक को अक्षम कर सकते हैं AutoPlay सेवा False। इसका मतलब है कि मीडिया प्लेयर तब तक कुछ नहीं खेलेगा जब तक आप उसे नहीं पूछते।

<MediaElement x:Name = "Microsoft_Silverlight_DEMO_mp4" 
   AutoPlay = "False" 
   Margin = "51,49,53,53"  
   Source = "/Microsoft Silverlight DEMO.mp4"  
   Stretch = "Fill" RenderTransformOrigin = "0.5,0.5">

इसलिए जब आप वीडियो चलाना चाहते हैं, तो आप बस कॉल कर सकते हैं MediaElement Play() method। यह स्टॉप और पॉज़ विधियाँ भी प्रदान करता है।

आइए हम फिर से उसी उदाहरण पर एक नज़र डालें और थोड़ा नियंत्रण संशोधित करने के लिए इसे थोड़ा संशोधित करें। संलग्न करेंMouseLeftButtonDown में हैंडलर MediaElement जैसा कि नीचे XAML कोड में दिखाया गया है।

<UserControl x:Class = "MediaElementDemo.MainPage" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   xmlns:d = "http://schemas.microsoft.com/expression/blend/2008" 
   xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006" 
   mc:Ignorable = "d" 
   d:DesignHeight = "300" d:DesignWidth = "400">
   
   <Grid x:Name = "LayoutRoot" Background = "White"> 
	
      <MediaElement x:Name = "Microsoft_Silverlight_DEMO_mp4" 
         AutoPlay = "False" 
         MouseLeftButtonDown = "Microsoft_Silverlight_DEMO_mp4_MouseLeftButtonDown" 
         Margin = "51,49,53,53"  
         Source = "/Microsoft Silverlight DEMO.mp4"  
         Stretch = "Fill" RenderTransformOrigin = "0.5,0.5"> 
      </MediaElement>  
		
   </Grid> 
	
</UserControl>

यहाँ पर कार्यान्वयन है MouseLeftButtonDown ईवेंट हैंडलर जिसमें यह जांच करेगा कि यदि मीडिया तत्व की वर्तमान स्थिति चढ़ाना है, तो यह वीडियो को रोक देगा अन्यथा यह वीडियो खेलना शुरू कर देगा।

using System.Windows.Controls; 
using System.Windows.Input; 
using System.Windows.Media;

namespace MediaElementDemo { 

   public partial class MainPage : UserControl {
	
      public MainPage() { 
         InitializeComponent(); 
      }  
		
      private void Microsoft_Silverlight_DEMO_mp4_MouseLeftButtonDown
         (object sender, MouseButtonEventArgs e) {
		
         if (Microsoft_Silverlight_DEMO_mp4.CurrentState == MediaElementState.Playing) { 
            Microsoft_Silverlight_DEMO_mp4.Pause(); 
         } else { 
            Microsoft_Silverlight_DEMO_mp4.Play(); 
         } 
      } 
   } 
}

जब उपरोक्त कोड संकलित और निष्पादित किया जाता है, तो आप रिक्त वेब पेज देखेंगे क्योंकि हमने सेट किया है AutoPlay के लिए संपत्ति False। जब आप वेब पेज पर क्लिक करेंगे, तो यह वीडियो शुरू कर देगा।

जब आप वेब पेज पर फिर से क्लिक करेंगे, तो यह वीडियो को रोक देगा।

कुछ प्रकार के अनुप्रयोगों के लिए मुद्रण एक महत्वपूर्ण क्षमता है। इस अध्याय में, हम सिल्वरलाइट में संबंधित सुविधाओं को देखेंगे।

  • मुद्रण एपीआई, और मूल कदम है कि सभी Silverlight अनुप्रयोगों प्रदर्शन करना चाहिए अगर वे मुद्रित करना चाहते हैं। वाटर प्रिंट चुनने के लिए विभिन्न विकल्प।

  • सबसे सरल उपयोगकर्ता इंटरफ़ेस तत्वों की एक प्रति प्रिंट करना है जो पहले से ही स्क्रीन पर हैं।

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

मुद्रण के लिए कदम

चाहे आप स्नैपशॉट को प्रिंट कर रहे हों या स्क्रीन पर कुछ पहले से ही, या पूरी तरह से अनुकूलित मल्टी-पेज प्रिंट आउटपुट के लिए जा रहे हों, वही बुनियादी चरणों की आवश्यकता है।

  • मुद्रण एपीआई के दिल में PrintDocument वर्ग है।

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

  • उपयोगकर्ता एक प्रिंटर का चयन कर सकता है और हमेशा की तरह सेटिंग्स को कॉन्फ़िगर कर सकता है। अगर उपयोगकर्ता क्लिक करके आगे बढ़ने का फैसला करता हैPrint, को PrintDocument तुरंत उसका पालन-पोषण करेंगे PrintPage घटना, और उस घटना के लिए आपका हैंडलर मुद्रित होने वाली सामग्री की आपूर्ति करता है।

  • घटना तर्क एक प्रदान करता है PageVisual इस उद्देश्य के लिए संपत्ति।

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

मौजूदा तत्वों की छपाई

तत्व सबसे आसान विकल्प उस सामग्री को प्रिंट करना है जो आपके सिल्वरलाइट एप्लिकेशन में स्क्रीन पर पहले से मौजूद है। के बाद सेPrintPage घटना के तर्क PageVisualकिसी भी उपयोगकर्ता इंटरफ़ेस तत्वों को स्वीकार करता है, आप अपने उपयोगकर्ता इंटरफ़ेस में कुछ भी चुन सकते हैं, और इसे प्रिंट कर सकते हैं।

  • यह स्क्रीनशॉट को हथियाने के लिए PrintScreen कुंजी का उपयोग करने से केवल एक छोटा कदम है। यह उससे थोड़ा बेहतर है क्योंकि उपयोगकर्ता को इसे क्रॉप करने और प्रिंट करने के लिए किसी अन्य प्रोग्राम में स्क्रीनशॉट को मैन्युअल रूप से पेस्ट करने की आवश्यकता नहीं है। यह अभी भी केवल एक मामूली सुधार है।

  • मुद्रण सामग्री जो पहले से ही स्क्रीन पर है वह समस्याग्रस्त है।

  • सबसे पहले, कोई गारंटी नहीं है कि स्क्रीन पर काम करने वाला एक लेआउट कागज के लिए अच्छी तरह से काम करेगा।

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

नीचे XAML कोड दिया गया है।

<UserControl 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   xmlns:d = "http://schemas.microsoft.com/expression/blend/2008" 
   xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006" 
   xmlns:sdk = "http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk" 
   x:Class = "SilverlightPrinting.MainPage" 
   mc:Ignorable = "d" 
   d:DesignHeight = "300" d:DesignWidth = "500">
	
   <Grid x:Name = "LayoutRoot" Background = "White">
	
      <Button x:Name = "print" Content = "Print" Click = "print_Click" Width = "60" 
         Height = "20" Margin = "10,10,430,270"/>
			
      <ScrollViewer x:Name = "myScrollViewer" 
         HorizontalScrollBarVisibility = "Auto" 
         VerticalScrollBarVisibility = "Auto" 
         Width = "400" Margin = "90,0,10,0">
			
         <StackPanel>
            <Rectangle Fill = "Gray" Width = "100" Height = "100" /> 
            <Button x:Name = "button" Content = "Button" Width = "75"/> 
            <sdk:Calendar Height = "169" Width = "230"/> 
            <Rectangle Fill = "AliceBlue" Width = "475" Height = "100" /> 
         </StackPanel> 
				
      </ScrollViewer> 
		
   </Grid> 
	
</UserControl>

यहाँ है Print button क्लिक-इवेंट कार्यान्वयन, जो प्रिंट करेगा ScrollViewer और इसके दृश्यमान डेटा।

using System; 
using System.Windows; 
using System.Windows.Controls; 
using System.Windows.Printing; 
 
namespace SilverlightPrinting { 

   public partial class MainPage : UserControl { 
	
      public MainPage() { 
         InitializeComponent(); 
      }
	  
      private void print_Click(object sender, RoutedEventArgs e) { 
         PrintDocument pd = new PrintDocument(); 
         pd.PrintPage += new System.EventHandler<PrintPageEventArgs>(pd_PrintPage);  
         pd.Print("Print Screen Content"); 
      }
	  
      private void pd_PrintPage(object sender, PrintPageEventArgs e) { 
         e.PageVisual = myScrollViewer; 
      } 
   } 
}

  • जैसा कि आप देख सकते हैं, में Print button click event उस PrintDocument ऑब्जेक्ट बनाया गया है, हम एक हैंडलर को इसके PrintPage इवेंट में संलग्न करते हैं।

  • आप सेट कर सकते हैं PageVisual संपत्ति को संदर्भित करने के लिए ScrollViewer।

  • फिर Print methodकहा जाता है। यह एक स्ट्रिंग लेता है, जो प्रिंट कतार में काम के नाम के रूप में दिखाई देगा।

जब उपरोक्त कोड संकलित और निष्पादित किया जाता है, तो आपको निम्न आउटपुट दिखाई देगा।

जब आप क्लिक करें Print बटन, आपको मानक प्रिंट संवाद दिखाई देगा।

अब, डिफ़ॉल्ट प्रिंटर का चयन करें। प्रदर्शन के उद्देश्य के लिए, हमें चुनेंOneNote और क्लिक करें Printबटन। आप देखेंगे किScrollViewer छपा है।

ध्यान दें कि स्क्रॉल बार अभी भी दिखाई दे रहे हैं ScrollViewer।

कस्टम यूआई ट्री

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

चलिए सिल्वरलाइट प्रोजेक्ट बनाकर एक सरल उदाहरण देखते हैं UserControl बुलाया PrintLayout।

लगभग समय के आकार का होने के लिए डिज़ाइन समय की चौड़ाई और ऊंचाई निर्धारित करें। नीचे XAML कोड दिया गया हैPrintLayout.xaml फ़ाइल।

<UserControl x:Class = "PrintCustomUI.PrintLayout" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   xmlns:d = "http://schemas.microsoft.com/expression/blend/2008" 
   xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006" 
   mc:Ignorable = "d" 
   d:DesignHeight = "768" d:DesignWidth = "960">
   
   <Grid x:Name = "LayoutRoot" Background = "White"> 
	
      <Grid.RowDefinitions> 
         <RowDefinition Height = "Auto" /> 
         <RowDefinition /> 
         <RowDefinition Height = "Auto" /> 
      </Grid.RowDefinitions> 
		
      <TextBlock Text = "Silverlight" HorizontalAlignment = "Center"
         FontSize = "60" FontWeight = "Bold" FontFamily = "Georgia" />
				
      <TextBlock Grid.Row = "2" Text = "Print Testing" 
         HorizontalAlignment = "Center" FontFamily = "Georgia" 
         FontSize = "24" Margin = "0,10"/> 
				
      <Rectangle Grid.Row = "2" Height = "1" Fill = "Black" 
         VerticalAlignment = "Top"/> 
				
      <Ellipse Grid.Row = "1" Stroke = "Black" StrokeThickness = "10" Margin = "10">
				
         <Ellipse.Fill>
			
            <RadialGradientBrush 
               GradientOrigin = "0.2,0.2" 
               Center = "0.4,0.4"> 
               <GradientStop Color = "Aqua" Offset = "0.006" /> 
               <GradientStop Color = "AntiqueWhite" Offset = "1" /> 
            </RadialGradientBrush>
				
         </Ellipse.Fill>
			
      </Ellipse> 
		
   </Grid> 
	
</UserControl>

नीचे दिए गए कोड में है MainPage.xaml फ़ाइल, जिसमें एक है Print केवल बटन।

<UserControl x:Class = "PrintCustomUI.MainPage" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   xmlns:d = "http://schemas.microsoft.com/expression/blend/2008" 
   xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006" 
   mc:Ignorable = "d" 
   d:DesignHeight = "300" d:DesignWidth = "400">
   
   <Grid x:Name = "LayoutRoot" Background = "White"> 
	
      <Button Content = "Print..." Height = "23" HorizontalAlignment = "Left"  
         Margin = "12,28,0,0" Name = "printButton"  
         VerticalAlignment = "Top" Width = "75"  
         Click = "printButton_Click" />
			
   </Grid> 
	
</UserControl>

यहाँ है Click event प्रिंट बटन के लिए कार्यान्वयन।

using System; 
using System.Collections.Generic; 
using System; 

using System.Windows; 
using System.Windows.Controls; 
using System.Windows.Printing;
  
namespace PrintCustomUI { 

   public partial class MainPage : UserControl { 
	
      public MainPage() { 
         InitializeComponent(); 
      }
	  
      private void printButton_Click(object sender, RoutedEventArgs e) { 
         PrintDocument pd = new PrintDocument(); 
         pd.PrintPage += new EventHandler<PrintPageEventArgs>(pd_PrintPage);
         pd.Print("Custom"); 
      }
	  
      void pd_PrintPage(object sender, PrintPageEventArgs e) { 
         var pl = new PrintLayout(); 
         pl.Width = e.PrintableArea.Width; 
         pl.Height = e.PrintableArea.Height; 
         e.PageVisual = pl; 
      } 
   } 
}

जब उपरोक्त कोड संकलित और निष्पादित किया जाता है, तो आप वेब पेज पर निम्न आउटपुट देखेंगे।

क्लिक Print और चुनें OneNoteलेआउट मुद्रित करने के लिए। आप देखेंगे कि लेआउट मुद्रित है।

आप देख सकते हैं कि इसने उपलब्ध स्थान को भर दिया है। हम आपको बेहतर समझ के लिए उपरोक्त उदाहरणों को निष्पादित करने की सलाह देते हैं।

ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved