WPF Control Layout - DockPanel
(Page 4 of 5 )
Next, we'll look at the DockPanel control. DockPanel is a bit odd in that its child controls are arranged relative to one another. That is, controls may be placed to the top, bottom, left, and right of other controls. This relative arrangement is governed by the DockPanel.Dock attribute. For example, if one control has its DockPanel.Dock attribute set to Top in the XAML, then it will be positioned above the control that follows it. Two buttons in this situation would look something like this:
And the corresponding XAML would look like this:
<DockPanel>
<Button DockPanel.Dock="Top" Content="Button 1" />
<Button Content="Button 2" />
</DockPanel>
Note that a DockPanel will use up all of the available space. In the above picture, the DockPanel is confined to a Page with a width of 200 pixels and a height of 100 pixels. Both buttons are stretched horizontally to take up the entire available width, and the second button is stretched vertically to take up the rest of the available height. You can, however, get rid of the default stretch behavior in the same way as with StackPanel:
<DockPanel>
<Button DockPanel.Dock="Top" Content="Button 1"
HorizontalAlignment="Center" />
<Button Content="Button 2" HorizontalAlignment="Center"
VerticalAlignment="Center" />
</DockPanel>
More controls can be added to the application to produce something more complex:
<DockPanel>
<Button DockPanel.Dock="Top" Content="Button 1" />
<Button DockPanel.Dock="Left" Content="Button 2" />
<Button DockPanel.Dock="Bottom" Content="Button 3" />
<Button Content="Button 4" />
</DockPanel>
Next: Grid >>
More Windows Scripting Articles
More By Peyton McCullough
