DockPanel Control in WPF
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.
