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.
