Table Layout Panel

The TableLayoutPanel is a panel that dynamically lays out selected contents in a grid composed of rows and columns.

Because the TableLayoutPanel container is dynamic, it adapts to the changing dimensions of the application environment. This means the controls it contains are proportionally resized to suit any user changes in size of the form, or the application window.

Properties

The key properties of the TableLayoutControl container include:

  • Columns. Determines the number and configuration for the columns in the table for the container.

  • GrowStyle. Specifies how the TableLayoutPanel adds additional rows or columns, automatically when the configured cells are full.

  • Rows. Determines the number and configuration for the rows in the table for the container.

You can set the properties of rows or columns individually using the Column and Row Styles form.

Events

Events can be configured for the TableLayoutPanel to specify the behaviour of the control. For example, an action can be triggered when a user clicks the table using the Click property.

For information on configuring events and other components of the design using a script, see: Working with Scripts.

Adding a TableLayoutPanel

When you drag a TableLayoutPanel container control to a form in the Flow Designer, you can use the control properties to Add and Remove Columns and Rows using the options, or click Edit Rows and Columns.

This will open the Column and Row Styles form that can be used to build and configure the columns and rows in your TableLayoutPanel container.

Use the Show drop down list to select whether you want to configure Columns or Rows and select the column/row you want to configure in the panel at the left.

In the Size Type section of the form, you can specify the Absolute or Percent values for the size of the selected column or row. If you select the AutoSize option, the size of the selected column or row will be automatically adjusted according to the controls you place within it.

Note the tips on controlling column and row spanning as well as alignment and stretching at the right of the form. These settings are configured in the Properties pane for the TableLayoutPanel container.

You can Add, Delete and Insert (after the selected) columns and rows using the buttons below the left panel and configure them in the same manner.

When you have configured the table for the container, click OK to return to the form.

To add a control to a cell, drag and drop the required control from the Toolbox.

Information on the properties and events for the TableLayoutPanel container control can be viewed at the link to Microsoft® Documentation.