DockPanel is
another panel control which enables elements to occupy the total panel space.
That means total panel space will be utilized by elements when we place the
elements in DockPanel. DockPanel has DockPanel.Dock attached property with four
values Top, Right, Bottom, and Left. Let’s discuss DockPanel with simple
example.
Open
Microsoft Visual Studio 2013 => Crate WPF application and change
MainWindow.xaml code to below.
<Window x:Class="DockPanelWPF.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<DockPanel>
<Button DockPanel.Dock="Top" Background="Red">Red</Button>
<Button DockPanel.Dock="Right" Background="Green">Green</Button>
<Button DockPanel.Dock="Bottom" Background="Yellow">Yellow</Button>
<Button DockPanel.Dock="Left" Background="Blue">Blue</Button>
</DockPanel>
</Window>
Run the
application and the output display as shown below.
As shown
above, the first three buttons Red, Green, Yellow buttons will occupy required
space and finally Blue button will occupy remaining total space in DockPanel.
We can use
the HorizontalAlignment and VerticalAlignment properties for the DockPanel
elements as shown below.
<Window x:Class="DockPanelWPF.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<DockPanel>
<Button DockPanel.Dock="Top" Background="Red" HorizontalAlignment="Right">Red</Button>
<Button DockPanel.Dock="Right" Background="Green" VerticalAlignment="Bottom">Green</Button>
<Button DockPanel.Dock="Bottom" Background="Yellow" HorizontalAlignment="Right">Yellow</Button>
<Button DockPanel.Dock="Left" Background="Blue" VerticalAlignment="Bottom">Blue</Button>
</DockPanel>
</Window>
Run the
application and the output display as shown below. Here also all elements
within the DockPanel occupies total space of DockPanel control.
We can apply
the LayoutTransform and RenderTransform for DockPanel like for any other WPF
control.