---
title: "Wpf Dock Panel"  
description: "In this blog, I’m explaining the dock panel in wpf , how to create it in xaml as well as in .cs file .  A Dock Panel is used to dock child elements in"  
author: "Sumit Kesarwani"  
published: 2013-09-25  
updated: 2014-09-18  
canonical: https://www.mindstick.com/blog/585/wpf-dock-panel  
category: ".net"  
tags: [".net"]  
reading_time: 2 minutes  

---

# Wpf Dock Panel

In this blog, I’m explaining the dock panel in wpf , how to create it in xaml [as well as](https://www.mindstick.com/interview/2481/can-you-write-a-java-class-that-could-be-used-both-as-an-applet-as-well-as-an-application) in .cs file .\

A Dock Panel is used to dock child [elements](https://www.mindstick.com/forum/1440/wpf-button-with-multiple-text-elements) in the left, right, top, and bottom positions of the [relative](https://www.mindstick.com/interview/33881/overview-of-relative-absolute-fixed-and-sticky-positioning-in-css) elements. The position of child elements is determined by the Dock [property](https://www.mindstick.com/blog/205/property-notification-in-c-sharp) of the respective child elements and the relative order of those child elements. The [default value](https://www.mindstick.com/forum/2035/default-value-when-using-singleordefault) of Dock property is left. The Dock property is of type Dock [enumeration](https://www.mindstick.com/blog/88/enumeration-in-c-sharp) that has Left, Right, Top, and Bottom values.

Example:

The code listed in below creates a DockPanel with five [Button](https://www.mindstick.com/articles/63/how-to-add-button-in-datagridview-in-csharp-dot-net) elements. Four buttons are docked and the last one has no docking set that fills the entire remaining area.

```
<Window x:Class="DockingWpfApplication.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">    <Grid>        <DockPanel Name="myDockPanel">            <Button Name="TopRect" DockPanel.Dock="Top" Background="LightCoral"            Height="50" Content="Top"/>            <Button Name="LeftRect" DockPanel.Dock="Left" Background="LawnGreen"            Width="50" Content="Left"/>            <Button Name="RightRect" DockPanel.Dock="Right" Background="LavenderBlush"            Width="50" Content="Right"/>            <Button Name="BottomRect" DockPanel.Dock="Bottom" Background="LightCyan"            Height="50" Content="Bottom"/>            <Button Name="Fill" Background="LightGray" Content="Center" />        </DockPanel>    </Grid></Window>
```

The DockPanel class in WPF represents a DockPanel control. The code

\

listed below creates a Dock Panel dynamically, add five Button [controls](https://www.mindstick.com/articles/66/how-to-create-controls-at-run-time-in-csharp-dot-net) to

\

it, and sets their docking [properties](https://www.mindstick.com/articles/23331/nootropics-7-different-types-and-their-unique-properties) by using SetDock method. The output

\

of Listing generates Figure 1.

```
private void CreateDockPanel(){    // Create a DockPanel    DockPanel myDockPanel = new DockPanel();     // Create a button    Button TopRect = new Button();    TopRect.Background = new SolidColorBrush(Colors.LightGreen);    TopRect.Height = 50;    TopRect.Content = "Top";    // Dock button to top    DockPanel.SetDock(TopRect, Dock.Top);    // Add docked button to DockPanel    dcPanel.Children.Add(TopRect);     // Create a button    Button LeftRect = new Button();    LeftRect.Background = new SolidColorBrush(Colors.LightBlue);    LeftRect.Width = 50;    LeftRect.Content = "Left";    // Dock button to left    DockPanel.SetDock(LeftRect, Dock.Left);    // Add docked button to DockPanel    dcPanel.Children.Add(LeftRect);     // Create a button    Button RightRect = new Button();    RightRect.Background = new SolidColorBrush(Colors.LightSalmon);    RightRect.Width = 50;    RightRect.Content = "Right";    // Dock button to left    DockPanel.SetDock(RightRect, Dock.Right);    // Add docked button to DockPanel    dcPanel.Children.Add(RightRect);     // Create a button    Button BottomRect = new Button();    BottomRect.Background = new SolidColorBrush(Colors.LightCyan);    BottomRect.Height = 50;    BottomRect.Content = "Bottom";    // Dock button to left    DockPanel.SetDock(BottomRect, Dock.Bottom);    // Add docked button to DockPanel    dcPanel.Children.Add(BottomRect);     // Create a fill button    Button FillRect = new Button();    BottomRect.Background = new SolidColorBrush(Colors.LightGray);     // Add docked button to DockPanel    dcPanel.Children.Add(FillRect);    RootWindow.Content = dcPanel; }
```

##### OutPut

##### \

![Wpf Dock Panel](https://www.mindstick.com/blogs/e763c9b0-2959-428a-92e3-1b366d253654/images/3cf95bd3-a4f7-4432-afa4-982901bc9294.png)

---

Original Source: https://www.mindstick.com/blog/585/wpf-dock-panel

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.