C# WPF Tutorial – Dock Layout or Dock Panel

C# WPF Tutorial - Dock Layout or Dock Panel

Dock Panel is used to Dock WPF UI components, which means you have to define the relativity of each element to place on UI. Child components are docked in the left, right, top, and bottom locations of the relative elements using a Dock Panel.

The Dock property of each individual child element and the child elements’ relative order governs the location of the child elements. The dock property’s default value is still present. The Left, Right, Top and Bottom values of the Dock property’s enumeration of the same name are available.

Dock Panel is the 4th type of WPF Layout which we are discussing in this article after Wrap Panel.

C# WPF Tutorial - Dock Layout or Dock Panel - Basic Example

Here I’m sharing an example with you guys to understand Dock. I added five buttons and defines the Dock Value as Top, Bottom, Left & Right. When we assign any value to Dock, a particular UI element is strict to follow then the UI placement.

Remember that all UI elements are associative with each other if their dock values are the same, which means if two buttons are using Top Dock then they will be placed on top of each other according to the line of code sorting order.

In the following code, you can observe the above Image.


<Window x:Class="JWPF.MainWindow"
Title="MainWindow" Height="250" Width="400">
<Button DockPanel.Dock="Top">Button 1</Button>
<Button DockPanel.Dock="Left">Button 2</Button>
<Button DockPanel.Dock="Right">Button 3</Button>
<Button DockPanel.Dock="Bottom">Button 4</Button>
<Button>C# WPF Dock Panel Tutorial</Button>

If you want to understand the Dock Panel concept in-depth you can watch the following video.