# Example: Building an advanced layout at runtime

In this tutorial we are going to create an advanced layout of **ToolWindows** and **DocumentWindows** programmatically. Our aim is to build the layout shown on the screenshot below:

![WinForms RadDock Elements Measure](https://www.telerik.com/products/winforms/documentation/assets/bac63268b48f3a07e9ab2a82a38ecf5d/dock-object-model-example-building-an-advanced-layout-at-runtime001.png)

We will have a floating window with two **ToolWindows** and dimensions of the floating window 150 height and 300 width. An interesting part of building the layout is using the **SizeInfo** property of the **TabStrip** containers. This property gives you:

* The ability to set a precise size of a **TabStrip** which will not be changed when a user resizes the whole **RadDock** control. For example, the **TabStrip** of `window7` will not be resized when we resize the whole form. Its width will always be 150 unless we explicitly resize the **TabStrip** of the `window7` by using the splitter.

* The ability to set a relative size of a **TabStrip** so to keep two **TabStrips** in a specific size ratio. When we resize the form, the **TabStrips** of `window1` and `window2` will keep the ration of 1:2 between them - the **TabStrip** of `window2` having 1/3 parts and the **TabStrip** of `window1` having 2/3 parts.

So, let's start building the layout:

1\. First, let's drag and drop a **RadDock** instance on our form. Set the **Dock** property to *Fill*. Subscribe to the **Load** event which we will use to implement our windows layout.

2\. Next, we are going to make to **ToolWindows**. The first one will be docked left, and the other will be docked left-bottom. For this case we need to give the first **ToolWindow** as a target in the **DockWindow** method responsible for docking the second **ToolWindow**:

#### Docking two ToolWindows

```C#
ToolWindow window1 = new ToolWindow();
window1.Name = "window1";
this.radDock1.DockWindow(window1, DockPosition.Left);
ToolWindow window2 = new ToolWindow();
window2.Name = "window2";
this.radDock1.DockWindow(window2, window1, DockPosition.Bottom);
```

```VB.NET
Dim window1 As ToolWindow = New ToolWindow()
window1.Name = "window1"
Me.RadDock1.DockWindow(window1, DockPosition.Left)
Dim window2 As ToolWindow = New ToolWindow()
window2.Name = "window2"
Me.RadDock1.DockWindow(window2, window1, DockPosition.Bottom)
```

![WinForms RadDock Two Windows Docked](https://www.telerik.com/products/winforms/documentation/assets/4fd2c14e13879019833a7aa7891d7538/dock-object-model-example-building-an-advanced-layout-at-runtime002.png)

3\. Next, let's make the height of `window2` relative to the height of the `window1`:

#### Setting relative size

```C#
window2.TabStrip.SizeInfo.SizeMode = SplitPanelSizeMode.Relative;
window2.TabStrip.SizeInfo.RelativeRatio = new SizeF(0, 0.33f);
```

```VB.NET
window2.TabStrip.SizeInfo.SizeMode = SplitPanelSizeMode.Relative
window2.TabStrip.SizeInfo.RelativeRatio = New System.Drawing.SizeF(0, 0.33F)
```

The result is shown on the picture below:

![WinForms RadDock Setting Relative Size](https://www.telerik.com/products/winforms/documentation/assets/f99ed1052be715eeec2c58a26daf12a1/dock-object-model-example-building-an-advanced-layout-at-runtime003.png)

Now, if we decide to resize the form, the ration of the **TabStrips**' height will be kept:

![WinForms RadDock TabStrips Height](https://www.telerik.com/products/winforms/documentation/assets/f7681840a58a4d7b3d96b467306881a6/dock-object-model-example-building-an-advanced-layout-at-runtime004.png)

4\. Let's add two more windows:

#### Setting absolute size

```C#
ToolWindow window3 = new ToolWindow();
window3.Name = "window3";
this.radDock1.DockWindow(window3, DockPosition.Bottom);
ToolWindow window4 = new ToolWindow();
window4.Name = "window4";
this.radDock1.DockWindow(window4, window3, DockPosition.Right);
window4.TabStrip.SizeInfo.SizeMode = SplitPanelSizeMode.Absolute;
window4.TabStrip.SizeInfo.AbsoluteSize = new Size(150, 0);
```

```VB.NET
Dim window3 As ToolWindow = New ToolWindow()
window3.Name = "window3"
Me.RadDock1.DockWindow(window3, DockPosition.Bottom)
Dim window4 As ToolWindow = New ToolWindow()
window4.Name = "window4"
Me.RadDock1.DockWindow(window4, window3, DockPosition.Right)
window4.TabStrip.SizeInfo.SizeMode = SplitPanelSizeMode.Absolute
window4.TabStrip.SizeInfo.AbsoluteSize = New Size(150, 0)
```

This time we set the **Width** of the `window4` to an absolute value of 150 pixels.

![WinForms RadDock Setting AbsoluteSize](https://www.telerik.com/products/winforms/documentation/assets/f5a5bb98ea5e5f1e25f33eae7a3a5a30/dock-object-model-example-building-an-advanced-layout-at-runtime005.png)

![WinForms RadDock Resize Windows With AbsoluteSize](https://www.telerik.com/products/winforms/documentation/assets/91b2bed948e30e51c6802db655454764/dock-object-model-example-building-an-advanced-layout-at-runtime006.png)

5\. Add two more **ToolWindows**. The interesting thing here is that these **ToolWindows** will be in a **Floating** *DockState*. Please note that you can give the size and location of the form that will host the **ToolWindows**.

#### Floating ToolWindows

```C#
ToolWindow window5 = new ToolWindow();
window5.Name = "window5";
this.radDock1.FloatWindow(window5, new Rectangle(250, 250, 300, 150));
ToolWindow window6 = new ToolWindow();
window6.Name = "window6";
this.radDock1.DockWindow(window6, window5, DockPosition.Right);
```

```VB.NET
Dim window5 As ToolWindow = New ToolWindow()
window5.Name = "window5"
Me.RadDock1.FloatWindow(window5, New Rectangle(250, 250, 300, 150))
Dim window6 As ToolWindow = New ToolWindow()
window6.Name = "window6"
Me.RadDock1.DockWindow(window6, window5, DockPosition.Right)
```

![WinForms RadDock Floating ToolWindows](https://www.telerik.com/products/winforms/documentation/assets/9f5b48c3fddeaa6ed0e49b093abe0369/dock-object-model-example-building-an-advanced-layout-at-runtime007.png)

6\. We will add one more **ToolWindow**. The specific thing here is that although the **ToolWindow** should be auto-hidden to `Bottom` if the user decides to click the `Pin` button, this window will be auto-hidden to top. This is done with the help of **AutoHidePosition** property of the **TabStrip** which hosts the **ToolWindow**. In addition, this auto-hidden window will have a specific size of (200, 200). Since the **AutoHidePosition** is set to *Top*, **Height** of the given size will be taken into consideration:

#### Setting the AutoHidePosition and AutoHideSize properties

```C#
ToolWindow window7 = new ToolWindow();
window7.Name = "window7";
window7.AutoHideSize = new Size(100, 100);
this.radDock1.DockWindow(window7, window4, DockPosition.Bottom);
((ToolTabStrip)window7.TabStrip).AutoHidePosition = AutoHidePosition.Top;
```

```VB.NET
Dim window7 As ToolWindow = New ToolWindow()
window7.Name = "window7"
window7.AutoHideSize = New Drawing.Size(100, 100)
Me.RadDock1.DockWindow(window7, window4, DockPosition.Bottom)
CType(window7.TabStrip, ToolTabStrip).AutoHidePosition = AutoHidePosition.Top
```

Initially, the layout will look like this:

![WinForms RadDock Setting AutoHidePosition and AutoHideSize](https://www.telerik.com/products/winforms/documentation/assets/9ac63af912e4cc64c28d34416ccc86e9/dock-object-model-example-building-an-advanced-layout-at-runtime008.png)

If the user clicks the `Pin` button of `window7`, it will become auto-hidden to the top. Next, when the user hovers the `window7` tab, a window with 100 pixels in height is shown:

![WinForms RadDock Auto-Hidden Window](https://www.telerik.com/products/winforms/documentation/assets/7d529d70a3f879b02bfd487e30f12fe5/dock-object-model-example-building-an-advanced-layout-at-runtime009.png)

7\. Finally, we should decide if we want to show several **DocumentWindows**. If yes, we can add them as shown below:

#### Adding DocumentWindows

```C#
DocumentWindow document1 = new DocumentWindow();
document1.Name = "document1";
this.radDock1.AddDocument(document1);
DocumentWindow document2 = new DocumentWindow();
document2.Name = "document2";
this.radDock1.AddDocument(document2, document1, DockPosition.Bottom);
```

```VB.NET
Dim document1 As DocumentWindow = New DocumentWindow()
document1.Name = "document1"
Me.RadDock1.AddDocument(document1)
Dim document2 As DocumentWindow = New DocumentWindow()
document2.Name = "document2"
Me.RadDock1.AddDocument(document2, document1, DockPosition.Bottom)
```

![WinForms RadDock Adding DocumentWindows](https://www.telerik.com/products/winforms/documentation/assets/d0bb35ce0cf5381c37dbcbbf2fd6e6d6/dock-object-model-example-building-an-advanced-layout-at-runtime010.png)

However, you may not want to have any documents. In this case, set the **MainDocumentContainerVisible** property to *false*:

#### Hiding the main DocumentContainer

```C#
this.radDock1.MainDocumentContainerVisible = false;
```

```VB.NET
Me.RadDock1.MainDocumentContainerVisible = False
```

![WinForms RadDock Hiding the Main DocumentContainer ](https://www.telerik.com/products/winforms/documentation/assets/de6711e2d56903e32b7328db1bb634ae/dock-object-model-example-building-an-advanced-layout-at-runtime011.png)

## See Also

* [AllowedDockStates](https://www.telerik.com/products/winforms/documentation/controls/dock/object-model/alloweddockstates)
* [Creating a RadDock at Runtime](https://www.telerik.com/products/winforms/documentation/controls/dock/object-model/creating-a-raddock-at-runtime)
* [ Creating ToolWindow and DocumentWindow at Runtime](https://www.telerik.com/products/winforms/documentation/controls/dock/object-model/creating-toolwindow-and-documentwindow-at-runtime)
* [Customizing Floating Windows](https://www.telerik.com/products/winforms/documentation/controls/dock/object-model/customizing-floating-windows)
* [Customizing TabStrip Items](https://www.telerik.com/products/winforms/documentation/controls/dock/object-model/customizing-tabstrip-items)
* [Accessing DockWindows](https://www.telerik.com/products/winforms/documentation/controls/dock/object-model/accessing-dockwindows)
* [RadDock Properties and Methods](https://www.telerik.com/products/winforms/documentation/controls/dock/object-model/raddock-properties-and-methods)
* [Removing ToolWindow and DocumentWindow at Runtime](https://www.telerik.com/products/winforms/documentation/controls/dock/object-model/removing-toolwindow-and-documentwindow-at-runtime)
* [Tabs and Captions](https://www.telerik.com/products/winforms/documentation/controls/dock/object-model/tabs-and-captions)
* [ToolWindow and DocumentWindow Properties and Methods](https://www.telerik.com/products/winforms/documentation/controls/dock/object-model/toolwindow-and-documentwindow-properties-and-methods)
* [Tracking the ActiveWindow](https://www.telerik.com/products/winforms/documentation/controls/dock/object-model/tracking-the-activewindow)