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.
