# DockLayout

**DockLayoutPanel** is a panel that docks its child elements to a predefined-position. The possible Dock positions are *Left*, *Top*, *Right* and *Bottom*.

**Methods and properties:**

* **SetDock(RadElement element, Dock dock):** A static method that assigns an element a given docking position.

* **LastChildFill:** - Indicates whether the dock position of the last child should be ignored, so that the element stretches to fill the area left by the other children elements. When this property is set to *false* the dock position of the last child is taken under consideration, thus leaving an empty area in the center of the panel.

The Dock of each element is set through the static **SetDock** method.

 

 

```C#
RadButtonElement button = new RadButtonElement("button1");
DockLayoutPanel.SetDock(button, Telerik.WinControls.Layouts.Dock.Left);

```

```VB.NET
Dim button As New RadButtonElement("button1")
DockLayoutPanel.SetDock(button, Telerik.WinControls.Layouts.Dock.Left)

```

 

Essential for the final layout of the DockLayoutPanel is the sequence in which elements are added to the panel. Consider the following four RadButtonElements:

 

 

```C#
RadButtonElement button1 = new RadButtonElement("button1");
DockLayoutPanel.SetDock(button1, Telerik.WinControls.Layouts.Dock.Left);
RadButtonElement button2 = new RadButtonElement("button2");
DockLayoutPanel.SetDock(button2, Telerik.WinControls.Layouts.Dock.Right);
RadButtonElement button3 = new RadButtonElement("button3");
DockLayoutPanel.SetDock(button3, Telerik.WinControls.Layouts.Dock.Top);
RadButtonElement button4 = new RadButtonElement("button4");
DockLayoutPanel.SetDock(button4, Telerik.WinControls.Layouts.Dock.Bottom);

```

```VB.NET
Dim button1 As New RadButtonElement("button1")
DockLayoutPanel.SetDock(button1, Telerik.WinControls.Layouts.Dock.Left)
Dim button2 As New RadButtonElement("button2")
DockLayoutPanel.SetDock(button2, Telerik.WinControls.Layouts.Dock.Right)
Dim button3 As New RadButtonElement("button3")
DockLayoutPanel.SetDock(button3, Telerik.WinControls.Layouts.Dock.Top)
Dim button4 As New RadButtonElement("button4")
DockLayoutPanel.SetDock(button4, Telerik.WinControls.Layouts.Dock.Bottom)

```

 

Adding the above in the following order results in the layout below:

 

 

```C#
DockLayoutPanel dockPanel = new DockLayoutPanel();
dockPanel.Children.Add(button1);
dockPanel.Children.Add(button2);
dockPanel.Children.Add(button3);
dockPanel.Children.Add(button4);

```

```VB.NET
Dim dockPanel As New DockLayoutPanel()
dockPanel.Children.Add(button1)
dockPanel.Children.Add(button2)
dockPanel.Children.Add(button3)
dockPanel.Children.Add(button4)

```

 

![Telerik UI for WinForms DockLayoutPanel with children docked in their added order](https://www.telerik.com/products/winforms/documentation/assets/d16046bd1cf09c7efc677d2de7e5fc65/tpf-layout-predefined-layout-panels-docklayout001.png)

However, if the same elements are added in a reversed order, the outcome will be different:

 

 

```C#
DockLayoutPanel dockPanel = new DockLayoutPanel();
dockPanel.Children.Add(button4);
dockPanel.Children.Add(button3);
dockPanel.Children.Add(button2);
dockPanel.Children.Add(button1);

```

```VB.NET
Dim dockPanel As New DockLayoutPanel()
dockPanel.Children.Add(button4)
dockPanel.Children.Add(button3)
dockPanel.Children.Add(button2)
dockPanel.Children.Add(button1)

```

 

![Telerik UI for WinForms DockLayoutPanel with children added in reverse order](https://www.telerik.com/products/winforms/documentation/assets/653efedd51c35414cd56b0123648bdc7/tpf-layout-predefined-layout-panels-docklayout002.png)

> note In both examples above the Dock setting of the last added child is ignored, i.e. in the first example *button4* is docked, so that it fills the area left by the other buttons. In the second example *button1* docking setting is not taken under consideration and the element fills the empty panel area. Setting the **LastChildFill** property to *false* , however, transforms the above layouts, so that the last added children are not stretched:

![Telerik UI for WinForms DockLayoutPanel with LastChildFill disabled in the first docking order](https://www.telerik.com/products/winforms/documentation/assets/f9c3d212d7b29ff70f8a30fd4a223faf/tpf-layout-predefined-layout-panels-docklayout003.png)

![Telerik UI for WinForms DockLayoutPanel with LastChildFill disabled in the reversed docking order](https://www.telerik.com/products/winforms/documentation/assets/6d5c17c604367a9f5e00e5b3c2c58d71/tpf-layout-predefined-layout-panels-docklayout004.png)

Here is an example of creating a control holding custom DockPanelElement:

 

 

```C#
class MyDockLayoutPanelControl : RadControl
{
    protected override void CreateChildItems(RadElement parent)
    {
        base.CreateChildItems(parent);
        parent.Children.Add(new MyDockLayoutPanelElement());
    }
}

```

```VB.NET
Public Class MyDockLayoutPanelControl
    Inherits RadControl
    Protected Overrides Sub CreateChildItems(parent As RadElement)
        MyBase.CreateChildItems(parent)
        parent.Children.Add(New MyDockLayoutPanelElement())
    End Sub
End Class

```

 

And here is the element itself:

 

 

```C#
public class MyDockLayoutPanelElement : RadElement
{
    protected override void CreateChildElements()
    {
        RadButtonElement button1 = new RadButtonElement("button1");
        DockLayoutPanel.SetDock(button1, Telerik.WinControls.Layouts.Dock.Left);
        RadButtonElement button2 = new RadButtonElement("button2");
        DockLayoutPanel.SetDock(button2, Telerik.WinControls.Layouts.Dock.Right);
        RadButtonElement button3 = new RadButtonElement("button3");
        DockLayoutPanel.SetDock(button3, Telerik.WinControls.Layouts.Dock.Top);
        RadButtonElement button4 = new RadButtonElement("button4");
        DockLayoutPanel.SetDock(button4, Telerik.WinControls.Layouts.Dock.Bottom);
        DockLayoutPanel dockPanel = new DockLayoutPanel();
        dockPanel.Children.Add(button4);
        dockPanel.Children.Add(button3);
        dockPanel.Children.Add(button2);
        dockPanel.Children.Add(button1);
    }

```

```VB.NET
Public Class MyDockLayoutPanelElement
    Inherits RadElement
    Protected Overrides Sub CreateChildElements()
        Dim button1 As New RadButtonElement("button1")
        DockLayoutPanel.SetDock(button1, Telerik.WinControls.Layouts.Dock.Left)
        Dim button2 As New RadButtonElement("button2")
        DockLayoutPanel.SetDock(button2, Telerik.WinControls.Layouts.Dock.Right)
        Dim button3 As New RadButtonElement("button3")
        DockLayoutPanel.SetDock(button3, Telerik.WinControls.Layouts.Dock.Top)
        Dim button4 As New RadButtonElement("button4")
        DockLayoutPanel.SetDock(button4, Telerik.WinControls.Layouts.Dock.Bottom)
        Dim dockPanel As New DockLayoutPanel()
        dockPanel.Children.Add(button4)
        dockPanel.Children.Add(button3)
        dockPanel.Children.Add(button2)
        dockPanel.Children.Add(button1)
    End Sub

```



## See Also

* [BoxLayout](https://www.telerik.com/products/winforms/documentation/telerik-presentation-framework/layout/predefined-layout-panels/boxlayout)

* [GridLayout](https://www.telerik.com/products/winforms/documentation/telerik-presentation-framework/layout/predefined-layout-panels/gridlayout)

* [ImageAndTextLayoutPanel](https://www.telerik.com/products/winforms/documentation/telerik-presentation-framework/layout/predefined-layout-panels/imageandtextlayoutpanel)

* [StackLayoutPanel](https://www.telerik.com/products/winforms/documentation/telerik-presentation-framework/layout/predefined-layout-panels/stacklayoutpanel)

* [WrapLayoutPanel](https://www.telerik.com/products/winforms/documentation/telerik-presentation-framework/layout/predefined-layout-panels/wraplayoutpanel)