सिल्वरलाइट - फिक्स्ड लेआउट

अनुप्रयोग प्रयोज्य के लिए नियंत्रण का लेआउट बहुत महत्वपूर्ण और महत्वपूर्ण है। इसका उपयोग आपके एप्लिकेशन में 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>

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