C# study notes using TableLayoutPanel control to set form layout

 

Use the TableLayoutPanel control to set the form layout

1. On the left side of the Visual Studio IDE, find the Toolbox tab. Select the Toolbox tab and the toolbox will appear. (Alternatively, on the menu bar, choose View, Toolbox.)

2. Select the small triangle symbol next to the Containers group to open the group, as shown in the image below.

   
   Containers group

3. Controls such as buttons, check boxes, and labels can be added to forms. TableLayoutPanel Double-click the control in the toolbox  . (You can also drag controls from the toolbox onto the form.) When you do this, the IDE adds  TableLayoutPanel the controls to the form, as shown in the following image.

   
   TableLayoutPanel control

   illustrate
   After adding the TableLayoutPanel, if a window titled "TableLayoutPanel Tasks" appears on the form, select anywhere within the form to close the window. You will learn more about this window later in this tutorial.

   Notice how the toolbox expands to cover the form when the Toolbox tab is selected, and how it closes when you select anywhere outside the toolbox. This is the IDE auto-hide feature. You can toggle the Toolbox on or off for any window by selecting the pushpin icon in the upper right corner of the window to toggle between auto-hide and in-place locking. The pin icon is shown below.

   
   pin icon

4. Make sure "TableLayoutPanel" is selected by selecting it. You can verify which control is selected by looking at the drop-down list at the top of the Properties window, as shown in the image below.

   
   Properties window showing the TableLayoutPanel control

5. Select the Alphabetical button on the toolbar of the Properties window. This causes the list of properties in the Properties window to appear in alphabetical order, making it easier to find properties in this tutorial.

6. The control selector is a drop-down list at the top of the Properties window. In this example, it shows that  tableLayoutPanel1 the control named is selected. You can select controls by selecting a range in the Windows Forms Designer or by selecting from the Control Selector. Once selected  TableLayoutPanel , look for the "Dock" property and select "Dock", this property should be set to "None". Note that a drop-down arrow will appear next to the value. Select the arrow, then select the Fill button (the big button in the middle) as shown in the image below.

   
   Properties window with Fill selected

   Dock in Visual Studio is when one window in the IDE is attached to another window or area. For example, the Properties window can be undocked, free-floating independently in Visual Studio, or docked close to the Solution Explorer.

7. After setting the "Dock" property of the TableLayoutPanel to "Fill", this panel will fill the entire form. If the form is resized again, the TableLayoutPanel will remain docked and resize itself to fit the form.

   illustrate
   A TableLayoutPanel is similar to a table in Microsoft Office Word: it has rows and columns, and individual cells can span multiple rows and columns. Each cell can hold a control (such as a button, checkbox, or label). A TableLayoutPanel will have one control spanning its entire top row  PictureBox , one control in its upper-left cell, CheckBox and four controls in its upper-right cell  Button .

8. TableLayoutPanel currently has two equally sized rows and two equally sized columns. You'll need to adjust them to make the top row and right column a bit larger. Select "TableLayoutPanel" in the Windows Forms Designer. There is a small black triangle button in the upper right corner as shown below.

   
   triangle button

   This button indicates that the control has a task to help you set its properties automatically.

9. Select the triangle to display the control's task list, as shown in the following image.

   
   TableLayoutPanel task

10. Select the Edit Rows and Columns task to display the Columns and Row Styles window. Select Column1, make sure the Percent button is selected and enter in the Percent box  15to set the size of this control to 15%. (This is the control that will be used in a later tutorial  NumericUpDown .) Select "Column2" and set it to 85%. Do not select the "OK" button yet, as this will close this window. (But if you do, you can reopen it using the task list.)

    
    TableLayoutPanel column and row styles

11. Select Rows from the Display drop-down list at the top of the window. Set "Row1" to 90% and "Row2" to 10%.

12. Select the "OK" button. The TableLayoutPanel should now have a large top row, a small bottom row, a small left column, and a large right column. You can resize the rows and columns in the TableLayoutPanel by selecting tableLayoutPanel1 in the form and dragging its row and column borders.

    
    Form1 with TableLayoutPanel resized