Step 5: Add Controls to Your Form

In this step, you add controls, such as a PictureBox control and a CheckBox control, to your form. You then add buttons 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 add controls to your form

1. Go to the Toolbox and expand the Common Controls group. This shows the most common controls that you see on forms.

2. Double-click the PictureBox control. The IDE adds a PictureBox control to your form. Because the TableLayoutPanel is docked to fill your form, the IDE adds the PictureBox control to the first empty cell.

3. Click the black triangle on the new PictureBox control to display its task list, as shown in the following picture.

   PictureBox tasks

   

   Note

   If you accidentally add the wrong type of control to your TableLayoutPanel, you can delete it. Right-click the control, and then click Delete from the menu. You can also select Undo from the Edit menu to remove controls from the form.

4. Click the Dock in parent container link. This automatically sets the PictureBox Dock property to Fill. To see this, click the PictureBox control to select it, go to the Properties window, and be sure that the Dock property is set to Fill.

5. Make the PictureBox span both columns by changing its ColumnSpan property. Select the PictureBox control and set its ColumnSpan property to 2. Also, when the PictureBox is empty, you want to show an empty frame. Set its BorderStyle property to Fixed3D.

6. Add the CheckBox control to the form. Double-click the CheckBox item in the Toolbox to make the IDE add a new CheckBox control to the next free cell in your table. Because a PictureBox takes up the first two cells, a CheckBox control is added to the lower-left cell. Select the new CheckBox control and set its Text property to Stretch, as shown in the following picture.

   CheckBox control with Text property set to ‘Stretch’

   

7. Go to the Containers group in the Toolbox (where you got your TableLayoutPanel control) and double-click the FlowLayoutPanel item to add a new control to the last cell in the PictureBox. Then dock it in the parent container (either by choosing Dock in parent container from the task list, or by setting its Dock property to Fill).

   Note

   A FlowLayoutPanel is a container that arranges other controls in neat rows in order. When you resize a FlowLayoutPanel, if it has room to lay out all of its controls in a single row, it does that. Otherwise, it arranges them in lines, one on top of the other. You will use a FlowLayoutPanel to hold four buttons.

To add buttons

1. Select the FlowLayoutPanel that you added. Go to Common Controls in the Toolbox and double-click the Button icon to add a button called button1 to your FlowLayoutPanel. Repeat to add another button. The IDE determines that there's already a button called button1 and calls the next one button2.

   Note

   In Visual Basic the buttons are named with an initial cap, so button1 is Button1, button2 is Button2, and so on.

2. Typically, you add the other buttons using the Toolbox. This time, click button2, and then on the Edit menu, click Copy (or press Ctrl+C). On the Edit menu, click Paste (or press Ctrl+V) to paste a copy of your button. Now paste it again. The IDE has now added button3 and button4.

   Note

   You can copy and paste any control. The IDE names and places the new controls in a logical manner. If you paste a control into a container, the IDE chooses the next logical space for placement.

3. Select the first button and set its Text property to Show a picture. Then set the Text properties of the next three buttons to Clear the picture, Set the background color, and Close.

4. The next step is to size the buttons and arrange them so they align to the left side of the panel. Select the FlowLayoutPanel and look at its FlowDirection property. Change it so it's set to RightToLeft. As soon as you do, the buttons should align themselves to the right side of the cell, and reverse their order so that the Show a picture button is on the right.

   Note

   If the buttons are still in the wrong order, you can drag the buttons around the FlowLayoutPanel to rearrange them in any order. You can click one of the buttons and drag it left or right.

5. Click the Close button to select it. Hold down the CTRL key and click the other three buttons, so that they are all selected. While all the buttons are selected, go to the Properties window and scroll up to the AutoSize property. This property tells the button to automatically resize itself to fit all of its text. Set it to true. Your buttons should now be sized properly and be in the right order. (As long as all four buttons are selected, you can change all four AutoSize properties at the same time.) The following picture shows the four buttons.

   Picture Viewer with four buttons

   

6. Now run your program again to see your newly laid out form. Clicking the buttons and the check box doesn't do anything yet, but it will work soon.

To continue or review

• To go to the next tutorial step, see Step 6: Name Your Button Controls.

• To return to the previous tutorial step, see Step 4: Lay Out Your Form with a TableLayoutPanel Control.