Layout in XAML
page 4 of 8
by Keyvan Nayyeri
Feedback
Average Rating: 
Views (Total / Last 10 Days): 47957/ 61

DockPanel

DockPanel, as another Panel element, can be compared with StackPanel.  They are similar in manner except that DockPanel tries to dock elements to Top, Bottom, Left and Right.

What DockPanel does depends on the order of its children elements when you declare them in XAML.  Let us take a look at how this element lays out other elements.

DockPanel has some Attached Properties in its children.  Each of its children has a DockPanel.Dock which represents the position of that element in DockPanel.

Your elements will be positioned in the order you declare them in XAML.  So the first element docks before the other elements and then the second element docks and so on.  Each element will wrap horizontally or vertically based on its DockPanel.Dock attribute to fill any available space.  Elements that are docked to top or bottom will wrap horizontally (extend their width) and elements that are docked to right or left will wrap vertically (extend their height).  If you do not provide a size for last element, it will wrap to fill the space.  This manner can create several combinations of layouts based on the order of declarations and best way to learn them is to see some examples and explain them.

Listing 5 and Figure 5 represent five TextBoxes that are declared in a DockPanel.  We will call these TextBoxes by their background color names.

·         Coral TextBox, as the first declared element, docks to the top then gets the default height, but wraps horizontally by extending its width to fill all horizontal available space.

·         Plum, as the second element, docks to the bottom and fills all available horizontal space just the same as Coral TextBox.

·         Aquamarine docks to the left and wants to extend its height to fill all vertical space, but Coral and Plum TextBoxes have filled some space so it tries to fill any remaining space.

·         Teal docks to the right similar to Aquamarine.

·         Finally, LawnGreen does not have a DockPanel.Dock attribute so it fills all available space in DockPanel.

Listing 5

<Window x:Class="LayoutinXAML.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Layout in XAML" Height="150" Width="300"
    >
  <DockPanel>
    <TextBox Background="Coral" DockPanel.Dock="Top">
      ASP Alliance 1
    </TextBox>
    <TextBox Background="Plum" DockPanel.Dock="Bottom">
      ASP Alliance 2
    </TextBox>
    <TextBox Background="Aquamarine" DockPanel.Dock="Left">
      ASP Alliance 3
    </TextBox>
    <TextBox Background="Teal" DockPanel.Dock="Right">
      ASP Alliance 4
    </TextBox>
    <TextBox Background="LawnGreen">
      ASP Alliance 5
    </TextBox>
  </DockPanel>
</Window>

Figure 5

Now let us remove the last TextBox, LawnGreen, to see what will happen for Listing 6 in Figure 6.  Everything is the same as the previous output except that Teal wraps to fill all available space and does not get the default width.

Listing 6

<Window x:Class="LayoutinXAML.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Layout in XAML" Height="150" Width="300"
    >
  <DockPanel>
    <TextBox Background="Coral" DockPanel.Dock="Top">
      ASP Alliance 1
    </TextBox>
    <TextBox Background="Plum" DockPanel.Dock="Bottom">
      ASP Alliance 2
    </TextBox>
    <TextBox Background="Aquamarine" DockPanel.Dock="Left">
      ASP Alliance 3
    </TextBox>
    <TextBox Background="Teal" DockPanel.Dock="Right">
      ASP Alliance 4
    </TextBox>
  </DockPanel>
</Window>

Figure 6

In Listing 7 I reorder elements in Listing 5 and put the Aquamarine and Teal TextBoxes before Coral and Plum.  The output is shown in Figure 7.  As Aquamarine is declared first, docks to left then wraps vertically; Teal does the same on the right.  Coral and Plum are declared after these two so you do not have the same space as before to wrap horizontally.

Listing 7

<Window x:Class="LayoutinXAML.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Layout in XAML" Height="150" Width="300"
    >
  <DockPanel>
    <TextBox Background="Aquamarine" DockPanel.Dock="Left">
      ASP Alliance 3
    </TextBox>
    <TextBox Background="Teal" DockPanel.Dock="Right">
      ASP Alliance 4
    </TextBox>
    <TextBox Background="Coral" DockPanel.Dock="Top">
      ASP Alliance 1
    </TextBox>
    <TextBox Background="Plum" DockPanel.Dock="Bottom">
      ASP Alliance 2
    </TextBox>
    <TextBox Background="LawnGreen">
      ASP Alliance 5
    </TextBox>
  </DockPanel>
</Window>

Figure 7

Note that if you set the Width or Height of an element, it will get these values and will not wrap horizontally or vertically, but other elements cannot fill the remaining space.


View Entire Article

User Comments

Title: Good One....   
Name: Satish
Date: 2011-01-31 5:57:16 AM
Comment:
Thanks for the article
Title: Margins and Canvas.Top/Left   
Name: Amir
Date: 2010-04-17 8:50:03 PM
Comment:
Hi,

What is the difference between margins and Canvas.Left/Top/Right/Bottom? They both seem to define left, top, right and bottom distances. If that's the case then I don't understand what they mean when they say Canvas uses absolute positioning and grid uses relative positioning.

Thanks
Title: Complement   
Name: Mehta Chandni K.
Date: 2009-02-09 4:08:59 AM
Comment:
A very good article. I got to learn many basic and important things on XAML. Thank you very much. Keep uploading such articles for students like us..
Title: XAML Layout   
Name: Anjan
Date: 2007-05-15 6:53:25 AM
Comment:
It is fine with windows.I want to Layout the Page with WINDOWS VISTA based.
Title: Correction   
Name: Keyvan Nayyeri
Date: 2006-10-27 8:36:05 AM
Comment:
Actually nothing :-D

I just forgot to remove them from previous code but they won't affect the result anyways.

Thanks for pointing.
Title: grid...   
Name: Amirhossein Babaeian
Date: 2006-10-27 6:46:47 AM
Comment:
what's the roll of grid.row and grid.column in controls that contains in cansvas tags?
Title: Resources in XAML   
Name: Keyvan Nayyeri
Date: 2006-10-12 12:58:22 AM
Comment:
Third part of these tutorials about Resources in XAML:
http://aspalliance.com/1032_Resources_in_XAML
Title: Nice article   
Name: Harry
Date: 2006-10-10 12:27:22 AM
Comment:
Hi Keyvan,
This is very nice article about XAML. I read your previous article also, even that was alos good for begginers.

Keep it up....

Harry
Title: Introduction to XAML   
Name: Keyvan Nayyeri
Date: 2006-10-09 2:08:59 PM
Comment:
First part of these tutorials, Introduction to XAML:
http://aspalliance.com/1019_Introduction_to_XAML

Product Spotlight
Product Spotlight 





Community Advice: ASP | SQL | XML | Regular Expressions | Windows


©Copyright 1998-2024 ASPAlliance.com  |  Page Processed at 2024-03-28 6:38:01 AM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search