Export (0) Print
Expand All

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

The TableLayoutPanel control supports the Anchor and Dock properties in its child controls.

To align a child control in a TableLayoutPanel cell

  1. Create a TableLayoutPanel control on your form.

  2. Set the value of the TableLayoutPanel control's ColumnCount and RowCount properties to 1.

  3. Create a Button control in the TableLayoutPanel control. The Button occupies the upper-left corner of the cell.

  4. Change the value of the Button control's Anchor property to Left. The Button control moves to align with the left border of the cell.

    Note Note

    This behavior differs from the behavior of other container controls. In other container controls, the child control does not move when the Anchor property is set, and the distance between the anchored control and the parent container's boundary is fixed at the time the Anchor property is set.

  5. Change the value of the Button control's Anchor property to Top, Left. The 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 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 Button control's Anchor property to Left, Right. The Button control is resized to stretch across the cell.

    Note Note

    This behavior differs from the behavior of other container controls. In other container controls, the child control is not resized when the Anchor property is set to Left, Right or Top, Bottom.

  2. Change the value of the Button control's Anchor property to Top, Bottom. The Button control is resized to stretch from the top to the bottom of the cell.

  3. Change the value of the Button control's Anchor property to Top, Bottom, Left, Right. The Button control is resized to fill the cell.

  4. Change the value of the Button control's Anchor property to None. The Button control is resized and centered in the cell.

  5. Change the value of the Button control's Dock property to Left. The Button control moves to align with the left border of the cell. The Button control retains its width, but its height is resized to fill the cell vertically.

    Note Note

    This is the same behavior that occurs in other container controls.

  6. Change the value of the Button control's Dock property to Fill. The Button control is resized to fill the cell.

The following illustration shows five buttons anchored in five separate TableLayoutPanel cells.

TableLayoutPanel Anchoring

The following illustration shows four buttons anchored in the corners of four separate TableLayoutPanel cells.

TableLayoutPanel Anchoring

The following illustration shows three buttons stretched by anchoring in three separate TableLayoutPanel cells.

TableLayoutPanel Anchoring

The following code example demonstrates all the combinations of Anchor property values for a Button control in a TableLayoutPanel control.

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Windows.Forms;


public class Form1 : Form
{
	public Form1()
	{
		InitializeComponent();
	}

	private System.ComponentModel.IContainer components = null;

	private System.Windows.Forms.TableLayoutPanel tableLayoutPanel1;
	private System.Windows.Forms.Button button1;
	private System.Windows.Forms.Button button2;
	private System.Windows.Forms.Button button3;
	private System.Windows.Forms.Button button4;
	private System.Windows.Forms.Button button5;
	private System.Windows.Forms.TableLayoutPanel tableLayoutPanel2;
	private System.Windows.Forms.Button button6;
	private System.Windows.Forms.Button button7;
	private System.Windows.Forms.Button button8;
	private System.Windows.Forms.Button button9;
	private System.Windows.Forms.TableLayoutPanel tableLayoutPanel3;
	private System.Windows.Forms.Button button10;
	private System.Windows.Forms.Button button11;
	private System.Windows.Forms.Button button12;

	protected override void Dispose(bool disposing)
	{
		if (disposing && (components != null))
		{
			components.Dispose();
		}
		base.Dispose(disposing);
	}

	private void InitializeComponent()
	{
		this.tableLayoutPanel1 = new System.Windows.Forms.TableLayoutPanel();
		this.button1 = new System.Windows.Forms.Button();
		this.button2 = new System.Windows.Forms.Button();
		this.button3 = new System.Windows.Forms.Button();
		this.button4 = new System.Windows.Forms.Button();
		this.button5 = new System.Windows.Forms.Button();
		this.tableLayoutPanel2 = new System.Windows.Forms.TableLayoutPanel();
		this.button6 = new System.Windows.Forms.Button();
		this.button7 = new System.Windows.Forms.Button();
		this.button8 = new System.Windows.Forms.Button();
		this.button9 = new System.Windows.Forms.Button();
		this.tableLayoutPanel3 = new System.Windows.Forms.TableLayoutPanel();
		this.button10 = new System.Windows.Forms.Button();
		this.button11 = new System.Windows.Forms.Button();
		this.button12 = new System.Windows.Forms.Button();
		this.tableLayoutPanel1.SuspendLayout();
		this.tableLayoutPanel2.SuspendLayout();
		this.tableLayoutPanel3.SuspendLayout();
		this.SuspendLayout();
		//  
		// tableLayoutPanel1 
		//  
		this.tableLayoutPanel1.Anchor = ((System.Windows.Forms.AnchorStyles)((((System.Windows.Forms.AnchorStyles.Top | System.Windows.Forms.AnchorStyles.Bottom)
					| System.Windows.Forms.AnchorStyles.Left)
					| System.Windows.Forms.AnchorStyles.Right)));
		this.tableLayoutPanel1.CellBorderStyle = System.Windows.Forms.TableLayoutPanelCellBorderStyle.Single;
		this.tableLayoutPanel1.ColumnCount = 5;
		this.tableLayoutPanel1.ColumnStyles.Add(new System.Windows.Forms.ColumnStyle(System.Windows.Forms.SizeType.Percent, 20F));
		this.tableLayoutPanel1.ColumnStyles.Add(new System.Windows.Forms.ColumnStyle(System.Windows.Forms.SizeType.Percent, 20F));
		this.tableLayoutPanel1.ColumnStyles.Add(new System.Windows.Forms.ColumnStyle(System.Windows.Forms.SizeType.Percent, 20F));
		this.tableLayoutPanel1.ColumnStyles.Add(new System.Windows.Forms.ColumnStyle(System.Windows.Forms.SizeType.Percent, 20F));
		this.tableLayoutPanel1.ColumnStyles.Add(new System.Windows.Forms.ColumnStyle(System.Windows.Forms.SizeType.Percent, 20F));
		this.tableLayoutPanel1.Controls.Add(this.button1, 0, 0);
		this.tableLayoutPanel1.Controls.Add(this.button2, 1, 0);
		this.tableLayoutPanel1.Controls.Add(this.button3, 2, 0);
		this.tableLayoutPanel1.Controls.Add(this.button4, 3, 0);
		this.tableLayoutPanel1.Controls.Add(this.button5, 4, 0);
		this.tableLayoutPanel1.Location = new System.Drawing.Point(12, 12);
		this.tableLayoutPanel1.Name = "tableLayoutPanel1";
		this.tableLayoutPanel1.RowCount = 1;
		this.tableLayoutPanel1.RowStyles.Add(new System.Windows.Forms.RowStyle(System.Windows.Forms.SizeType.Percent, 50F));
		this.tableLayoutPanel1.Size = new System.Drawing.Size(731, 100);
		this.tableLayoutPanel1.TabIndex = 0;
		//  
		// button1 
		//  
		this.button1.Anchor = System.Windows.Forms.AnchorStyles.None;
		this.button1.AutoSize = true;
		this.button1.Location = new System.Drawing.Point(34, 38);
		this.button1.Name = "button1";
		this.button1.Size = new System.Drawing.Size(79, 23);
		this.button1.TabIndex = 0;
		this.button1.Text = "Anchor=None";
		//  
		// button2 
		//  
		this.button2.Anchor = System.Windows.Forms.AnchorStyles.Left;
		this.button2.AutoSize = true;
		this.button2.Location = new System.Drawing.Point(150, 38);
		this.button2.Name = "button2";
		this.button2.TabIndex = 1;
		this.button2.Text = "Anchor=Left";
		//  
		// button3 
		//  
		this.button3.Anchor = System.Windows.Forms.AnchorStyles.Top;
		this.button3.AutoSize = true;
		this.button3.Location = new System.Drawing.Point(328, 4);
		this.button3.Name = "button3";
		this.button3.TabIndex = 2;
		this.button3.Text = "Anchor=Top";
		//  
		// button4 
		//  
		this.button4.Anchor = System.Windows.Forms.AnchorStyles.Right;
		this.button4.AutoSize = true;
		this.button4.Location = new System.Drawing.Point(503, 38);
		this.button4.Name = "button4";
		this.button4.Size = new System.Drawing.Size(78, 23);
		this.button4.TabIndex = 3;
		this.button4.Text = "Anchor=Right";
		//  
		// button5 
		//  
		this.button5.Anchor = System.Windows.Forms.AnchorStyles.Bottom;
		this.button5.AutoSize = true;
		this.button5.Location = new System.Drawing.Point(614, 73);
		this.button5.Name = "button5";
		this.button5.Size = new System.Drawing.Size(86, 23);
		this.button5.TabIndex = 4;
		this.button5.Text = "Anchor=Bottom";
		//  
		// tableLayoutPanel2 
		//  
		this.tableLayoutPanel2.Anchor = ((System.Windows.Forms.AnchorStyles)((((System.Windows.Forms.AnchorStyles.Top | System.Windows.Forms.AnchorStyles.Bottom)
					| System.Windows.Forms.AnchorStyles.Left)
					| System.Windows.Forms.AnchorStyles.Right)));
		this.tableLayoutPanel2.CellBorderStyle = System.Windows.Forms.TableLayoutPanelCellBorderStyle.Single;
		this.tableLayoutPanel2.ColumnCount = 4;
		this.tableLayoutPanel2.ColumnStyles.Add(new System.Windows.Forms.ColumnStyle(System.Windows.Forms.SizeType.Percent, 25F));
		this.tableLayoutPanel2.ColumnStyles.Add(new System.Windows.Forms.ColumnStyle(System.Windows.Forms.SizeType.Percent, 25F));
		this.tableLayoutPanel2.ColumnStyles.Add(new System.Windows.Forms.ColumnStyle(System.Windows.Forms.SizeType.Percent, 25F));
		this.tableLayoutPanel2.ColumnStyles.Add(new System.Windows.Forms.ColumnStyle(System.Windows.Forms.SizeType.Percent, 25F));
		this.tableLayoutPanel2.Controls.Add(this.button6, 0, 0);
		this.tableLayoutPanel2.Controls.Add(this.button7, 1, 0);
		this.tableLayoutPanel2.Controls.Add(this.button8, 2, 0);
		this.tableLayoutPanel2.Controls.Add(this.button9, 3, 0);
		this.tableLayoutPanel2.Location = new System.Drawing.Point(12, 118);
		this.tableLayoutPanel2.Name = "tableLayoutPanel2";
		this.tableLayoutPanel2.RowCount = 1;
		this.tableLayoutPanel2.RowStyles.Add(new System.Windows.Forms.RowStyle(System.Windows.Forms.SizeType.Percent, 50F));
		this.tableLayoutPanel2.Size = new System.Drawing.Size(731, 100);
		this.tableLayoutPanel2.TabIndex = 1;
		//  
		// button6 
		//  
		this.button6.AutoSize = true;
		this.button6.Location = new System.Drawing.Point(4, 4);
		this.button6.Name = "button6";
		this.button6.TabIndex = 0;
		this.button6.Text = "Top, Left";
		//  
		// button7 
		//  
		this.button7.Anchor = ((System.Windows.Forms.AnchorStyles)((System.Windows.Forms.AnchorStyles.Top | System.Windows.Forms.AnchorStyles.Right)));
		this.button7.AutoSize = true;
		this.button7.Location = new System.Drawing.Point(286, 4);
		this.button7.Name = "button7";
		this.button7.TabIndex = 1;
		this.button7.Text = "Top, Right";
		//  
		// button8 
		//  
		this.button8.Anchor = ((System.Windows.Forms.AnchorStyles)((System.Windows.Forms.AnchorStyles.Bottom | System.Windows.Forms.AnchorStyles.Right)));
		this.button8.AutoSize = true;
		this.button8.Location = new System.Drawing.Point(466, 73);
		this.button8.Name = "button8";
		this.button8.Size = new System.Drawing.Size(77, 23);
		this.button8.TabIndex = 2;
		this.button8.Text = "Bottom, Right";
		//  
		// button9 
		//  
		this.button9.Anchor = ((System.Windows.Forms.AnchorStyles)((System.Windows.Forms.AnchorStyles.Bottom | System.Windows.Forms.AnchorStyles.Left)));
		this.button9.AutoSize = true;
		this.button9.Location = new System.Drawing.Point(550, 73);
		this.button9.Name = "button9";
		this.button9.TabIndex = 3;
		this.button9.Text = "Bottom, Left";
		//  
		// tableLayoutPanel3 
		//  
		this.tableLayoutPanel3.Anchor = ((System.Windows.Forms.AnchorStyles)((((System.Windows.Forms.AnchorStyles.Top | System.Windows.Forms.AnchorStyles.Bottom)
					| System.Windows.Forms.AnchorStyles.Left)
					| System.Windows.Forms.AnchorStyles.Right)));
		this.tableLayoutPanel3.CellBorderStyle = System.Windows.Forms.TableLayoutPanelCellBorderStyle.Single;
		this.tableLayoutPanel3.ColumnCount = 3;
		this.tableLayoutPanel3.ColumnStyles.Add(new System.Windows.Forms.ColumnStyle(System.Windows.Forms.SizeType.Percent, 33.33333F));
		this.tableLayoutPanel3.ColumnStyles.Add(new System.Windows.Forms.ColumnStyle(System.Windows.Forms.SizeType.Percent, 33.33333F));
		this.tableLayoutPanel3.ColumnStyles.Add(new System.Windows.Forms.ColumnStyle(System.Windows.Forms.SizeType.Percent, 33.33333F));
		this.tableLayoutPanel3.Controls.Add(this.button10, 0, 0);
		this.tableLayoutPanel3.Controls.Add(this.button11, 1, 0);
		this.tableLayoutPanel3.Controls.Add(this.button12, 2, 0);
		this.tableLayoutPanel3.Location = new System.Drawing.Point(12, 225);
		this.tableLayoutPanel3.Name = "tableLayoutPanel3";
		this.tableLayoutPanel3.RowCount = 1;
		this.tableLayoutPanel3.RowStyles.Add(new System.Windows.Forms.RowStyle(System.Windows.Forms.SizeType.Percent, 50F));
		this.tableLayoutPanel3.Size = new System.Drawing.Size(731, 100);
		this.tableLayoutPanel3.TabIndex = 2;
		//  
		// button10 
		//  
		this.button10.Anchor = ((System.Windows.Forms.AnchorStyles)((System.Windows.Forms.AnchorStyles.Left | System.Windows.Forms.AnchorStyles.Right)));
		this.button10.Location = new System.Drawing.Point(4, 39);
		this.button10.Name = "button10";
		this.button10.Size = new System.Drawing.Size(236, 23);
		this.button10.TabIndex = 0;
		this.button10.Text = "Left, Right";
		//  
		// button11 
		//  
		this.button11.Anchor = ((System.Windows.Forms.AnchorStyles)((System.Windows.Forms.AnchorStyles.Top | System.Windows.Forms.AnchorStyles.Bottom)));
		this.button11.Location = new System.Drawing.Point(327, 4);
		this.button11.Name = "button11";
		this.button11.Size = new System.Drawing.Size(75, 93);
		this.button11.TabIndex = 1;
		this.button11.Text = "Top, Bottom";
		//  
		// button12 
		//  
		this.button12.Anchor = ((System.Windows.Forms.AnchorStyles)((((System.Windows.Forms.AnchorStyles.Top | System.Windows.Forms.AnchorStyles.Bottom)
					| System.Windows.Forms.AnchorStyles.Left)
					| System.Windows.Forms.AnchorStyles.Right)));
		this.button12.Location = new System.Drawing.Point(490, 4);
		this.button12.Name = "button12";
		this.button12.Size = new System.Drawing.Size(237, 93);
		this.button12.TabIndex = 2;
		this.button12.Text = "Top, Bottom, Left, Right";
		//  
		// Form1 
		//  
		this.AutoSize = true;
		this.ClientSize = new System.Drawing.Size(755, 338);
		this.Controls.Add(this.tableLayoutPanel3);
		this.Controls.Add(this.tableLayoutPanel2);
		this.Controls.Add(this.tableLayoutPanel1);
		this.Name = "Form1";
		this.Text = "Form1";
		this.tableLayoutPanel1.ResumeLayout(false);
		this.tableLayoutPanel1.PerformLayout();
		this.tableLayoutPanel2.ResumeLayout(false);
		this.tableLayoutPanel2.PerformLayout();
		this.tableLayoutPanel3.ResumeLayout(false);
		this.ResumeLayout(false);

	}

	[STAThread]
	static void Main()
	{
		Application.EnableVisualStyles();
		Application.Run(new Form1());
	}
}

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 Visual Basic or Visual C#, see Building from the Command Line (Visual Basic) or Command-line Building With csc.exe. You can also build this example in Visual Studio by pasting the code into a new project. Also see How to: Compile and Run a Complete Windows Forms Code Example Using Visual Studio.

Show:
© 2014 Microsoft