xaml
लेआउट नियंत्रण

कैनवास

Canvas पैनलों का सबसे सरल है। यह निर्दिष्ट Top/Left निर्देशांक पर आइटम रखता है।

<Canvas>
  <TextBlock 
    Canvas.Top="50" 
    Canvas.Left="50" 
    Text="This is located at 50, 50"/>
  <TextBlock 
    Canvas.Top="100"
    Canvas.Left="50"
    Width="150"
    Height="23"
    Text="This is located at 50, 100 with height 23 and width 150"/>
</Canvas>

DockPanel

DockPanel डॉक संपत्ति के अनुसार नियंत्रण को संरेखित करता है, इस क्रम में इसे नियंत्रण में रखा जाता है।

नोट: DockPanel WPF फ्रेमवर्क का हिस्सा है, लेकिन सिल्वरलाइट / WinRT / UWP के साथ नहीं आता है। ओपन-सोर्स कार्यान्वयन हालांकि खोजना आसान है।

<DockPanel LastChildFill="False">
  <!-- This will strech along the top of the panel -->
  <Button DockPanel.Dock="Top" Content="Top"/>
  <!-- This will strech along the bottom of the panel -->
  <Button DockPanel.Dock="Bottom" Content="Bottom"/>
  <!-- This will strech along the remaining space in the left of the panel -->
  <Button DockPanel.Dock="Left" Content="Left"/>
  <!-- This will strech along the remaining space in the right of the panel -->
  <Button DockPanel.Dock="Right" Content="Right"/>
  <!-- Since LastChildFill is false, this will be placed at the panel's right, to the left of the last button-->
  <Button DockPanel.Dock="Right" Content="Right"/>
</DockPanel>

<!-- When lastChildFill is true, the last control in the panel will fill the remaining space, no matter what Dock was set to it -->
<DockPanel LastChildFill="True">
  <!-- This will strech along the top of the panel -->
  <Button DockPanel.Dock="Top" Content="Top"/>
  <!-- This will strech along the bottom of the panel -->
  <Button DockPanel.Dock="Bottom" Content="Bottom"/>
  <!-- This will strech along the remaining space in the left of the panel -->
  <Button DockPanel.Dock="Left" Content="Left"/>
  <!-- This will strech along the remaining space in the right of the panel -->
  <Button DockPanel.Dock="Right" Content="Right"/>
  <!-- Since LastChildFill is true, this will fill the remaining space-->
  <Button DockPanel.Dock="Right" Content="Fill"/>
</DockPanel>

StackPanel

StackPanel एक के बाद एक अपने नियंत्रण रखता है। यह एक डॉक पैनल की तरह काम करता है जिसके सभी नियंत्रण डॉक समान मूल्य पर सेट होते हैं।

<!-- The default StackPanel is oriented vertically, so the controls will be presented in order from top to bottom -->
<StackPanel>
  <Button Content="First"/>
  <Button Content="Second"/>
  <Button Content="Third"/>
  <Button Content="Fourth"/>
</StackPanel>

<!-- Setting the Orientation property to Horizontal will display the control in order from left to right (or right to left, according to the FlowDirection property) -->
<StackPanel Orientation="Horizontal">
  <Button Content="First"/>
  <Button Content="Second"/>
  <Button Content="Third"/>
  <Button Content="Fourth"/>
</StackPanel>

नीचे से आइटम को ढेर करने के लिए, डॉक पैनल का उपयोग करें।

ग्रिड

Grid का उपयोग टेबल लेआउट बनाने के लिए किया जाता है।

मूल पंक्तियाँ और स्तंभ परिभाषाएँ

<Grid>
  <!-- Define 3 columns with width of 100 -->
  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="100"/>
    <ColumnDefinition Width="100"/>
    <ColumnDefinition Width="100"/>
  </Grid.ColumnDefinitions>
  <!-- Define 3 rows with height of 50 -->
  <Grid.RowDefinitions>
    <RowDefinition Height="50"/>
    <RowDefinition Height="50"/>
    <RowDefinition Height="50"/>
  </Grid.RowDefinitions>
  <!-- This is placed at the top left (first row, first column) -->
  <Button 
      Grid.Column="0"
      Grid.Row="0"
      Content="Top Left"/>
  <!-- This is placed at the top left (first row, second column) -->
  <Button 
      Grid.Column="1"
      Grid.Row="0"
      Content="Top Center"/>
  <!-- This is placed at the center (second row, second column) -->
  <Button 
      Grid.Column="1"
      Grid.Row="1"
      Content="Center"/>
  <!-- This is placed at the bottom right (third row, third column) -->
  <Button 
      Grid.Column="2"
      Grid.Row="2"
      Content="Bottom Right"/>
</Grid>

नोट: सभी निम्नलिखित उदाहरण केवल कॉलम का उपयोग करेंगे, लेकिन पंक्तियों पर भी लागू होते हैं ।

ऑटो आकार की परिभाषाएँ

कॉलम और पंक्तियों को "ऑटो" के साथ उनकी चौड़ाई / ऊंचाई के रूप में परिभाषित किया जा सकता है। ऑटो का आकार उतना ही स्थान लेगा , जितना उसे अपनी सामग्री को प्रदर्शित करने की आवश्यकता है, और अधिक नहीं।
ऑटो आकार की परिभाषाओं का उपयोग निश्चित आकार की परिभाषाओं के साथ किया जा सकता है।

<Grid>
  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="Auto"/>
    <ColumnDefinition Width="Auto"/>
    <ColumnDefinition Width="50"/>
  </Grid.ColumnDefinitions>
  <!-- This column won't take much space -->
  <Button Grid.Column="0" Content="Small"/>
  <!-- This column will take much more space -->
  <Button Grid.Column="1" Content="This text will be very long."/>
  <!-- This column will take exactly 50 px -->
  <Button Grid.Column="2" Content="This text will be cut"/>
</Grid>

साधारण तारा आकार की परिभाषाएँ

कॉलम और पंक्तियों को उनकी चौड़ाई / ऊंचाई के रूप में * साथ परिभाषित किया जा सकता है। स्टार आकार की पंक्तियों / स्तंभों में उतना ही स्थान होगा, जितना इसकी सामग्री के बावजूद।
स्टार आकार की परिभाषाओं का उपयोग निश्चित और ऑटो आकार की परिभाषाओं के साथ किया जा सकता है। स्टार का आकार डिफ़ॉल्ट है और इस प्रकार स्तंभ की चौड़ाई या पंक्ति की ऊंचाई को छोड़ा जा सकता है।

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="50"/>
    </Grid.ColumnDefinitions>
    <!-- This column will be as wide as it can -->
    <Button Grid.Column="0" Content="Small"/>
    <!-- This column will take exactly 50 px -->
    <Button Grid.Column="2" Content="This text will be cut"/>
</Grid>

आनुपातिक तारा आकार की परिभाषाएँ

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

हालाँकि, विभिन्न परिभाषाओं के आकार के बीच अनुपात को परिभाषित करने के लिए केवल एक गुणक को जोड़ना संभव है। तो एक स्तंभ के रूप में परिभाषित 2* एक स्तंभ के रूप में परिभाषित के रूप में दो बार के रूप में व्यापक हो जाएगा * । एकल इकाई की चौड़ाई गुणकों के योग द्वारा उपलब्ध स्थान को विभाजित करके गणना की जाती है (यदि गैर है तो इसे 1 के रूप में गिना जाता है)।
तो * , 2* , * रूप में परिभाषित 3 कॉलम के साथ एक ग्रिड 1/4, 1/2, 1/4 के रूप में प्रस्तुत किया जाएगा।
और 2* , 3* रूप में परिभाषित 2 स्तंभों में से एक 2/5, 3/5 प्रस्तुत किया जाएगा।

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

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="2*"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <!-- This column will be as wide as the third column -->
    <Button Grid.Column="0" Content="Small"/>
    <!-- This column will be twice as wide as the rest -->
    <Button Grid.Column="1" Content="This text will be very long."/>
    <!-- This column will be as wide as the first column -->
    <Button Grid.Column="2" Content="This text will may be cut"/>
</Grid>

कॉलम / रो स्पैन

यह पंक्ति / स्तंभकार सेट करके सेल से परे एक नियंत्रण खिंचाव बनाना संभव है। मान सेट पंक्तियों / स्तंभों की संख्या है

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="2*"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <!-- This control will streach across most of the grid -->
    <Button Grid.Column="0" Grid.ColumnSpan="2" Content="Small"/>
    <Button Grid.Column="2" Content="This text will may be cut"/>
</Grid>

WrapPanel

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

क्षैतिज अभिविन्यास

<WrapPanel Width="100">
    <Button Content="Button"/>
    <Button Content="Button"/>
    <Button Content="Button"/>
    <Button Content="Button"/>
    <Button Content="Button"/>
    <Button Content="Button"/>
    <Button Content="Button"/>
</WrapPanel>

वर्टिकल रैप पैनल

<WrapPanel Height="70" Orientation="Vertical">
    <Button Content="Button"/>
    <Button Content="Button"/>
    <Button Content="Button"/>
    <Button Content="Button"/>
    <Button Content="Button"/>
    <Button Content="Button"/>
    <Button Content="Button"/>
</WrapPanel>

UniformGrid

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

डिफ़ॉल्ट पंक्तियाँ और स्तंभ

डिफ़ॉल्ट रूप से यूनिफ़ॉर्मग्रिड समान पंक्तियों और स्तंभों को बनाने की कोशिश करेगा। जब एक पंक्ति लंबी हो जाएगी, तो यह एक नया कॉलम जोड़ देगा।

यह कोड भरी हुई पहली 2 पंक्तियों के साथ 3x3 का ग्रिड उत्पन्न करेगा और अंतिम एक बटन के साथ होगा:

<UniformGrid>
    <Button Content="Button"/>
    <Button Content="Button"/>
    <Button Content="Button"/>
    <Button Content="Button"/>
    <Button Content="Button"/>
    <Button Content="Button"/>
    <Button Content="Button"/>
</UniformGrid>

निर्दिष्ट पंक्तियाँ / कॉलम

आप यूनिफ़ॉर्मग्रिड को वास्तव में बता सकते हैं कि आपके पास कितनी पंक्तियाँ और / या स्तंभ हैं।

<UniformGrid Columns="2" >
    <Button Content="Button"/>
    <Button Content="Button"/>
    <Button Content="Button"/>
    <Button Content="Button"/>
    <Button Content="Button"/>
    <Button Content="Button"/>
    <Button Content="Button"/>
</UniformGrid>

नोट: यदि दोनों पंक्तियों और स्तंभों को सेट किया गया है, और कोशिकाओं की तुलना में अधिक बच्चे हैं, तो ग्रिड में अंतिम बच्चों को प्रदर्शित नहीं किया जाएगा

FirstColumn गुण

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

इस उदाहरण में पहला बटन पहली पंक्ति के दूसरे कॉलम में प्रदर्शित होगा:

<UniformGrid Columns="2" FirstColumn="1">
    <Button Content="Button"/>
    <Button Content="Button"/>
    <Button Content="Button"/>
    <Button Content="Button"/>
    <Button Content="Button"/>
    <Button Content="Button"/>
    <Button Content="Button"/>
</UniformGrid>

RelativePanel

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

<RelativePanel
    VerticalAlignment="Stretch"
    HorizontalAlignment="Stretch">
    <Rectangle
        x:Name="rectangle1"
        RelativePanel.AlignLeftWithPanel="True"
        Width="360"
        Height="50"
        Fill="Red"/>
    <Rectangle
        x:Name="rectangle2"
        RelativePanel.Below="rectangle1"
        Width="360"
        Height="50"
        Fill="Green" />
</RelativePanel>
<VisualStateManager.VisualStateGroups>
    <VisualStateGroup>
        <VisualState>
            <VisualState.StateTriggers>
                <!--VisualState to be triggered when window width is >=720 effective pixels.-->
                <AdaptiveTrigger
                    MinWindowWidth="720" />
            </VisualState.StateTriggers>
            <VisualState.Setters>
                <Setter
                    Target="rectangle2.(RelativePanel.Below)"
                    Value="{x:Null}" />
                <Setter
                    Target="rectangle2.(RelativePanel.RightOf)"
                    Value="rectangle1" />
                <Setter
                    Target="rectangle1.(RelativePanel.AlignLeftWithPanel)"
                    Value="False" />
                <Setter
                    Target="rectangle1.(RelativePanel.AlignVerticalCenterWithPanel)"
                    Value="True" />
                <Setter
                    Target="rectangle2.(RelativePanel.AlignVerticalCenterWithPanel)"
                    Value="True" />
            </VisualState.Setters>
        </VisualState>
    </VisualStateGroup>
</VisualStateManager.VisualStateGroups>