Step 4: Lay Out Your Form with a TableLayoutPanel Control

In this step, you add a TableLayoutPanel control to your form.

For a video version of this topic, see Tutorial 1: Create a Picture Viewer in Visual Basic - Video 2 or Tutorial 1: Create a Picture Viewer in C# - Video 2.

To lay out your form with a TableLayoutPanel control

1. Go to Windows Forms Designer. Look at the left side of the form and locate the Toolbox tab. Point to and pause on the Toolbox tab, and the Toolbox appears. (Or, from the View menu, click Toolbox.)

2. Click the plus sign next to the Containers group to open it, as shown in the following picture.

   Containers group

   

3. You can add controls like buttons, check boxes, and labels to your form. Double-click the TableLayoutPanel control in the Toolbox. When you do this, the IDE adds a TableLayoutPanel control to your form, as shown in the following picture.

   TableLayoutPanel control

   

   Note

   After you add your TableLayoutPanel, if a window appears inside your form with the title TableLayoutPanel Tasks, click anywhere inside the form to close it. You will learn more about this window later in the tutorial.

   Note

   Notice how the Toolbox expands to cover your form when you click its tab, and closes after you click outside of it. That's the IDE auto-hide feature. You can turn it on or off for any of the windows by clicking the pushpin icon in the upper-right corner of the window to toggle auto-hide and lock it in place. The pushpin icon appears as follows.

   Pushpin icon

   

4. Be sure TableLayoutPanel is selected by clicking it. You can verify what control is selected by looking at the drop-down list at the top of the Properties window, as shown in the following picture.

   Properties window showing TableLayoutPanel control

   

5. The control selector is a drop-down list at the top of the Properties window. In this example, it shows that a control called tableLayoutPanel1 is selected. You can select controls either by clicking in Windows Forms Designer or by choosing from the control selector. Now that TableLayoutPanel is selected, find the Dock property and click Dock, which should be set to None. Notice that a drop-down arrow appears next to the value. Click the arrow, and then select the Fill button (the large button in the middle), as shown in the following picture.

   Properties window with Fill selected

   

6. After you set the TableLayoutPanel Dock property to Fill, the panel fills the entire form. If you resize the form again, the TableLayoutPanel stays docked, and resizes itself to fit.

   Note

   A TableLayoutPanel works like a table in Microsoft Office Word: It has rows and columns, and an individual cell can span multiple rows and columns. Each cell can hold one control (like a button, a check box, or a label). Your TableLayoutPanel will have a PictureBox control spanning its entire top row, a CheckBox control in its lower-left cell, and four Button controls in its lower-right cell.

   Note

   Although it was stated that each cell can hold only one control, the lower-right cell has four Button controls. This is because you can put a control in a cell that holds other controls. That kind of control is called a container, and the TableLayoutPanel is a container. You will learn more about this later in the tutorial.

7. Currently, the TableLayoutPanel has two equal-size rows and two equal-size columns. You need to resize them so the top row and right column are both much bigger. In Windows Forms Designer, select the TableLayoutPanel. In the upper-right corner, there is a small black triangle button, which appears as follows.

   Triangle button

   

   This button indicates that the control has tasks that help you set its properties automatically.

8. Click the triangle to display the control's task list, as shown in the following picture.

   TableLayoutPanel tasks

   

9. Click the Edit Rows and Columns task to display the Column and Row Styles window. Click Column1, and set its size to 15 percent by being sure the Percent button is selected and entering 15 in the Percent box. (That's a NumericUpDown control, which you will use in a later tutorial.) Click Column2 and set it to 85 percent. Don't click the OK button yet, because the window will close. (But if you do, you can reopen it using the task list.)

10. From the Show drop-down list at the top of the window, click Rows. Set Row1 to 90 percent and Row2 to 10 percent.

11. Click OK. Your 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 dragging their borders.

To continue or review

• To go to the next tutorial step, see Step 5: Add Controls to Your Form.

• To return to the previous tutorial step, see Step 3: Set Your Form Properties.