Using the Toolbox to Build the User Interface

Using the Toolbox to Build the User Interface

The toolbox is a tabbed window that usually appears on the left side of the editing screen. If it's not visible, choose View, Toolbox. If necessary, pin it in place by clicking the pin at the top of the window. When it is unpinned it will collapse out of the way while you are working in the main pane of the editor or designer. This can be very convenient , but when it pops out, it can hide the form you are working on. Pinning it moves the form over so that you can see the toolbox and the entire form.

Controls in the Toolbox

When you're working with the designer on a Windows Form, the toolbox has a Windows Forms tab, from which you can drag popular Windows controls onto your form. Figure 4.2 shows this tab.

Figure 4.2. The toolbox contains controls from which you can build your interface.

Figure 4.3 shows an application with a selection of Windows controls. This sample uses the following controls:

• Label: This one says "Enter a name :". Labels should be used generously to instruct the users about how your application works and to prompt for input. For example, you might put a label with the text Name next to a text box where you expect the user to enter a name. Use the Properties window to edit the text of the label.

• Text box: By default, the text is initialized to the name of the control, such as textBox1 . Use the Properties window to delete the default text.

• Button: Forms do not have OK or Cancel buttons by default. You must code the behavior of each button you add.

• Check box: Check boxes can be selected or deselected independently and come with a built-in label. This one reads "optional".

• Radio buttons: There are three (red, yellow, and green) and they are in a group box (labeled Color). Selecting one automatically deselects all the others in the group .

• Group box: If you don't use a group box, all the radio buttons on a form are in the same group. Using a group box makes it possible to have two sets of radio buttons on the same form.

• Picture box: Displaying images on a form is very simple with a picture box. Just set the image property to a file on your hard drive.

• DateTime picker: When the user clicks the drop-down arrow, a calendar is displayed to simplify choosing a date (see Figure 4.4). Alternatively, the users can edit the date shown. Try pressing the up and down arrows after clicking on the month or day in a DateTime picker.

  Figure 4.4. The DateTime picker can display a calendar so the users can choose a date easily.

  

• Data grid: Used to display tabular information, such as filled from a data source or a file of XML.

Figure 4.3. This chapter's sample application uses a variety of controls.

Controls have two very important properties: Text and Name . The Name property is the actual name of the variable you will be accessing in code. By default, it's the type of the control with a number on the end, such as textBox1 or dateTimePicker1 . The Text property varies in meaning from control to control: For a form it's the caption across the top, for a button it's the text on the button, and so onbut it's always called Text . Only a handful of controls, such as the picture box, don't have a Text property.

CAPITALIZATION CONVENTION

The capitalization of control names generated by the designer in Visual C++ always follows the convention known as camelCase : The first letter is lowercase and if there are any other words within the name, they start with an uppercase letter.

If you drag on a control that you don't want on the form, just click it and press Del. If you move or resize a control and don't like the result, choose Edit, Undo or press Ctrl+Z.

Try to re-create the user interface shown in Figure 4.3 in your SimpleForm application. If you're finding it difficult to place and size the controls correctly, read the next section for details on Visual Studio functionality that will help you lay out the controls on the form surface.

The Layout Toolbar

When you're building a form, the layout toolbar (shown in Figure 4.5) is very useful. The buttons on this toolbar are also available on the Format menu, but they require more clicking. Generally, these buttons work only on groups of controls. For example, the Align Left button (or Format, Align, Lefts) moves the selected controls (all but the last one you selected) to the left or right so that the left edges of all the controls line up. The Make Vertical Spacing Equal command moves the selected controls (again, all but the last one) up or down so that they are equally spaced up and down. Each of these commands leaves all the controls selected, so that you can move them around as a group. Take some time to become familiar with this toolbar and you will dramatically reduce the time it takes to create professional-looking forms and dialog boxes.

Figure 4.5. The layout toolbar has buttons to simplify aligning and resizing controls.