--- title: "How to: Anchor and Dock Child Controls in a TableLayoutPanel Control" ms.date: "03/30/2017" dev_langs: - "csharp" - "vb" f1_keywords: - "net.ComponentModel.StyleCollectionEditor.TLP.AnchorDock" helpviewer_keywords: - "layout [Windows Forms], child controls" - "controls [Windows Forms], child" - "child controls [Windows Forms], anchoring and docking" - "TableLayoutPanel control [Windows Forms], child controls" ms.assetid: 0d267c35-25f1-49b8-8976-c64e8f0ddc0b --- # How to: Anchor and Dock Child Controls in a TableLayoutPanel Control The control supports the and properties in its child controls. ### To align a child control in a TableLayoutPanel cell 1. Create a control on your form. 2. Set the value of the control's and properties to **1**. 3. Create a control in the control. The occupies the upper-left corner of the cell. 4. Change the value of the control's property to `Left`. The 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 property is set, and the distance between the anchored control and the parent container's boundary is fixed at the time the property is set. 5. Change the value of the control's property to `Top, Left`. The control moves to occupy the top-left corner of the cell. 6. Repeat step 5 with a value of `Top, Right` to move the 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 control's property to `Left, Right`. The 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 property is set to `Left, Right` or `Top, Bottom`. 2. Change the value of the control's property to `Top, Bottom`. The control is resized to stretch from the top to the bottom of the cell. 3. Change the value of the control's property to `Top, Bottom, Left, Right`. The control is resized to fill the cell. 4. Change the value of the control's property to `None`. The control is resized and centered in the cell. 5. Change the value of the control's property to . The control moves to align with the left border of the cell. The 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 control's property to . The control is resized to fill the cell. ## Example The following illustration shows five buttons anchored in five separate cells. ![TableLayoutPanel Anchoring](./media/vs-tlpanchor.gif "VS_TLPanchor") The following illustration shows four buttons anchored in the corners of four separate cells. ![TableLayoutPanel Anchoring](./media/vs-tlpanchor2.gif "VS_TLPanchor2") The following illustration shows three buttons stretched by anchoring in three separate cells. ![TableLayoutPanel Anchoring](./media/vs-tlpanchor3.gif "VS_TLPAnchor3") The following code example demonstrates all the combinations of property values for a control in a control. [!code-csharp[System.Windows.Forms.TableLayoutPanel.AnchorExampleForm#1](~/samples/snippets/csharp/VS_Snippets_Winforms/System.Windows.Forms.TableLayoutPanel.AnchorExampleForm/CS/TlpAnchorExampleForm.cs#1)] [!code-vb[System.Windows.Forms.TableLayoutPanel.AnchorExampleForm#1](~/samples/snippets/visualbasic/VS_Snippets_Winforms/System.Windows.Forms.TableLayoutPanel.AnchorExampleForm/VB/TlpAnchorExampleForm.vb#1)] ## Compiling the Code This example requires: - References to the System, System.Data, System.Drawing and System.Windows.Forms assemblies. ## See also - - [TableLayoutPanel Control](tablelayoutpanel-control-windows-forms.md)