Permalink
Fetching contributors…
Cannot retrieve contributors at this time
95 lines (65 sloc) 7.04 KB
title ms.custom ms.date ms.prod ms.reviewer ms.suite ms.technology ms.tgt_pltfrm ms.topic f1_keywords dev_langs helpviewer_keywords ms.assetid caps.latest.revision author ms.author manager
How to: Anchor and Dock Child Controls in a TableLayoutPanel Control
03/30/2017
.net-framework
dotnet-winforms
article
net.ComponentModel.StyleCollectionEditor.TLP.AnchorDock
jsharp
layout [Windows Forms], child controls
controls [Windows Forms], child
child controls, anchoring and docking
TableLayoutPanel control [Windows Forms], child controls
0d267c35-25f1-49b8-8976-c64e8f0ddc0b
13
dotnet-bot
dotnetcontent
wpickett

How to: Anchor and Dock Child Controls in a TableLayoutPanel Control

The xref:System.Windows.Forms.TableLayoutPanel control supports the xref:System.Windows.Forms.Control.Anchor%2A and xref:System.Windows.Forms.Control.Dock%2A properties in its child controls.

To align a child control in a TableLayoutPanel cell

  1. Create a xref:System.Windows.Forms.TableLayoutPanel control on your form.

  2. Set the value of the xref:System.Windows.Forms.TableLayoutPanel control's xref:System.Windows.Forms.TableLayoutPanel.ColumnCount%2A and xref:System.Windows.Forms.TableLayoutPanel.RowCount%2A properties to 1.

  3. Create a xref:System.Windows.Forms.Button control in the xref:System.Windows.Forms.TableLayoutPanel control. The xref:System.Windows.Forms.Button occupies the upper-left corner of the cell.

  4. Change the value of the xref:System.Windows.Forms.Button control's xref:System.Windows.Forms.Control.Anchor%2A property to Left. The xref:System.Windows.Forms.Button control moves to align with the left border of the cell.

    [!NOTE] This behavior differs from the behavior of other container controls. In other container controls, the child control does not move when the xref:System.Windows.Forms.Control.Anchor%2A property is set, and the distance between the anchored control and the parent container's boundary is fixed at the time the xref:System.Windows.Forms.Control.Anchor%2A property is set.

  5. Change the value of the xref:System.Windows.Forms.Button control's xref:System.Windows.Forms.Control.Anchor%2A property to Top, Left. The xref:System.Windows.Forms.Button control moves to occupy the top-left corner of the cell.

  6. Repeat step 5 with a value of Top, Right to move the xref:System.Windows.Forms.Button control to the top-right corner of the cell. Repeat with values of Bottom, Left and Bottom, Right.

To stretch a child control in a TableLayoutPanel cell

  1. Change the value of the xref:System.Windows.Forms.Button control's xref:System.Windows.Forms.Control.Anchor%2A property to Left, Right. The xref:System.Windows.Forms.Button control is resized to stretch across the cell.

    [!NOTE] This behavior differs from the behavior of other container controls. In other container controls, the child control is not resized when the xref:System.Windows.Forms.Control.Anchor%2A property is set to Left, Right or Top, Bottom.

  2. Change the value of the xref:System.Windows.Forms.Button control's xref:System.Windows.Forms.Control.Anchor%2A property to Top, Bottom. The xref:System.Windows.Forms.Button control is resized to stretch from the top to the bottom of the cell.

  3. Change the value of the xref:System.Windows.Forms.Button control's xref:System.Windows.Forms.Control.Anchor%2A property to Top, Bottom, Left, Right. The xref:System.Windows.Forms.Button control is resized to fill the cell.

  4. Change the value of the xref:System.Windows.Forms.Button control's xref:System.Windows.Forms.Control.Anchor%2A property to None. The xref:System.Windows.Forms.Button control is resized and centered in the cell.

  5. Change the value of the xref:System.Windows.Forms.Button control's xref:System.Windows.Forms.Control.Dock%2A property to xref:System.Windows.Forms.DockStyle.Left. The xref:System.Windows.Forms.Button control moves to align with the left border of the cell. The xref:System.Windows.Forms.Button control retains its width, but its height is resized to fill the cell vertically.

    [!NOTE] This is the same behavior that occurs in other container controls.

  6. Change the value of the xref:System.Windows.Forms.Button control's xref:System.Windows.Forms.Control.Dock%2A property to xref:System.Windows.Forms.DockStyle.Fill. The xref:System.Windows.Forms.Button control is resized to fill the cell.

Example

The following illustration shows five buttons anchored in five separate xref:System.Windows.Forms.TableLayoutPanel cells.

TableLayoutPanel Anchoring

The following illustration shows four buttons anchored in the corners of four separate xref:System.Windows.Forms.TableLayoutPanel cells.

TableLayoutPanel Anchoring

The following illustration shows three buttons stretched by anchoring in three separate xref:System.Windows.Forms.TableLayoutPanel cells.

TableLayoutPanel Anchoring

The following code example demonstrates all the combinations of xref:System.Windows.Forms.Control.Anchor%2A property values for a xref:System.Windows.Forms.Button control in a xref:System.Windows.Forms.TableLayoutPanel control.

[!code-csharpSystem.Windows.Forms.TableLayoutPanel.AnchorExampleForm#1] [!code-vbSystem.Windows.Forms.TableLayoutPanel.AnchorExampleForm#1]

Compiling the Code

This example requires:

  • References to the System, System.Data, System.Drawing and System.Windows.Forms assemblies.

For information about building this example from the command line for [!INCLUDEvbprvb] or [!INCLUDEcsprcs], see Building from the Command Line or Command-line Building With csc.exe. You can also build this example in [!INCLUDEvsprvs] by pasting the code into a new project. Also see How to: Compile and Run a Complete Windows Forms Code Example Using Visual Studio.

See Also

xref:System.Windows.Forms.TableLayoutPanel
TableLayoutPanel Control