It's time to get serious about controls! This lesson dives deeply into the three most common controls and explains how you can use them and manage them in your applications. By the time you complete this lesson, you will have mastered labels, command buttons, and text boxes. In addition, you will learn more about how to properly set up a form.
You'll place labels on forms to display information. Command buttons give the user pushbutton control within applications. Text boxes get information from the user and process that information inside the program.
The highlights of this hour include
New Term: The currently active control at runtime has the focus.
Before looking at this lesson's three controls, you need to master the concept of focus. Focus is a runtime concept. At runtime, only one window, form (which appears as a window), or control can have the focus. The window or form currently in focus is the form whose title bar is highlighted (typically colored blue). The control with the current focus has an outlined border or caption.
WARNING: Don't confuse focus with a selected control. At design time you select controls by clicking them to display their sizing handles. At runtime, one control always has the focus, and users can change the focus by pressing Tab or Shift+Tab.
Focus is important because the focus determines what the next keystroke or Enter keypress will activate. For example, consider the screen shown in Figure 4.1. The figure shows a VB session with several windows, including two windows from the executing program. The center window is the window with the focus, and you know so because of the highlighted title bar. Therefore, the center window is the window that receives keystrokes if and when the user presses a key.
Only one control on the active window can have the focus. The check box labeled AutoSize has the current focus. Notice the outline around the control. In other words, despite the other windows on the screen at the time, if the user presses Enter under Figure 4.1's circumstances, the check box receives that Enter keystroke. If you understand the way check boxes work, you know that a check box is either checked or unchecked, meaning that the control determines one of two states. If the user presses Enter, the AutoSize check box will turn to unchecked.
NOTE: Of course the user can click the AutoSize check box to uncheck the control. In addition, the user can click any control in any window on the screen and that control would receive the click. Focus refers to a window's and control's capability to receive keystrokes.
Figure
4.1. Learning to spot windows and controls
with the focus.
Different controls display the focus in different ways. Only one of Figure 4.2's
seven command buttons can have the focus at any one time. Can you spot the command
button that has the focus? The extra dotted outline around the Images command button
lets you know that the Images command button has the focus and that command button
will receive an Enter keypress if the user presses Enter.
Figure
4.2. One of these seven command buttons
has the focus.
As stated earlier, a mouse click does not have to worry about focus. Wherever the user clicks, the mouse gets the mouse click no matter which window and control had the focus before the click. In addition, within the active window, the user can select any control by pressing that control's hotkey. For example, with Figure 4.2 showing, the user could press Alt+X to select the command button labeled Text Box even though the command button labeled Images has the focus.
An Enter keypress has no inherent location. Without focus, Windows would have no way to determine where or what the Enter keypress is to activate. With a hotkey, Windows keeps the hotkey possibility within the window with the focus. In other words, if two windows appear on your screen and both contain controls with Alt+S keystrokes, only the active window with the current focus would receive and respond to Alt+S.
The mouse is inherently directional as well as functional. When you click the mouse button over any window's control on the screen, Windows knows for certain that you wanted to click over that control. No ambiguity can exist as could happen with the Enter key. Therefore, focus does not apply to the mouse.
A command button's Cancel property relates somewhat to focus. Whereas the focus determines which control gets the Enter keypress, a command button's Cancel property determines which command button gets a simulated Click event when the user presses the Esc key.
TIP: Often, a command button used to exit an application or close a dialog box has its Cancel property set to True. Therefore, you can close such applications or dialog boxes by clicking the command button or by pressing Esc.
A command button's Default property also relates somewhat to focus. When a form first appears, the command button with the Default property of True receives the Click event when the user presses Enter. Another control might have the focus at that time, but if a command button has a Default property value of True, that button receives a Click event if the user presses Enter unless the user moves the focus to another command button before pressing Enter. Only one command button can have a Default value of True at any one time. As soon as you assign a command button's Default value True, either at design time or at runtime, any other command button on the form with a True Default value immediately changes to False. Therefore, Visual Basic protects a form's integrity by ensuring that only one command button can have a True Default value at any one time.
The user can move the focus from control to control by pressing Tab (or Shift+Tab to move the focus backward). If you place eight controls on an application's form, what focus order will result? In other words, as the user presses Tab, will the controls get the focus from a left-to-right or from a top-to-bottom order?
VB sets the default focus order in the order you place controls on the form. Therefore, if you place the top control first and the bottom control second, and then insert a third control in the middle of the form, the focus order will not move down the form in the order the user probably expects.
You do not always place controls on a form in the same order in which you want to set the focus. Therefore, controls that can receive the focus support a property called the TabIndex property. The first control in the focus order has a TabIndex property of 0, the second control in the focus order has a TabIndex of 1, and so on. If you place controls on the form and then later want to modify the focus order, you need to change the controls' TabIndex property values.
TIP: Not all controls can actually accept the focus. For example, a label cannot receive keystrokes, so a label never gets the focus. The Label control does include the TabIndex property, however. By setting the label's TabIndex value to one more than a text box next to the label, you can add a hotkey to the label's Caption property, and the user then has a way to hotkey to the text box. Text boxes do not support hotkey keystrokes by themselves.
Command buttons appear in almost every window of every Windows application. Command buttons determine when the user wants to do something, such as exit the application or begin printing. In almost every case, you will perform these tasks to add a command button to an application:
Although the command button control supports 36 properties, you'll only set the Name and Caption properties in most cases. In addition, although command button controls support 15 events, you'll only write code for the Click event in most cases. After all, a command button resides on most forms just so the user can click the button to trigger some event that the user is ready to start.
NOTE: By the way, you can set some properties only at design time (such as a control's Name property), you can set some properties both at design time and at runtime inside event procedures and other module code (such as a caption), and you can set some properties only at runtime from within the program (such as a list box's entries). All of a control's properties that appear in the Properties window are settable at design time, and some of those you can set at runtime as well. As you learn more about Visual Basic, you will become familiar with the properties you can set only at runtime.
Although you'll set the command button's Name and Caption properties most of the time, setting the Caption property often requires that you change the font to increase or decrease the text size and style on the caption. Of course, you might want to center the caption text or, perhaps, left-justify or right-justify the text, so you also might need to change the Alignment property. In reality, you'll also set the Left, Height, Top, and Width properties when you size and locate the command button because, as you learned in Hour 3, "Controls and Properties," these properties update automatically when you place and size controls.
As you can see, although you only seem to set a couple properties for most controls, the other properties really do play important roles, and you'll almost always end up setting several properties to finalize your application. Table 4.1 lists some of the most common command button properties that you'll set.
New Term: An icon is a small graphical image, stored in a file with the .ICO filename extension, that often appears on toolbar buttons.
Table 4.1. Common command button properties.
Property | Description |
BackColor | Specifies the command button's background color. Click the BackColor's palette down arrow to see a list of colors and click Categorized to see a list of common Windows control colors. Before the command button displays the background color, you must change the Style property from 0-Standard to 1-Graphical. |
Cancel | Determines whether the command button gets a Click event if the user presses Esc. |
Caption | Holds the text that appears on the command button. |
Default | Determines if the command button responds to an Enter keypress even if another control has the focus. |
Enabled | Determines whether the command button is active. Often, you'll change the Enabled property at runtime with code when a command button is no longer needed and you want to gray out the command button. |
Font | Produces a Font dialog box in which you can set the caption's font name, style, and size. |
Height | Holds the height of the command button in twips. |
Left | Holds the number of twips from the command button's left edge to the Form window's left edge. |
MousePointer | Determines the shape of the mouse cursor when the user moves the mouse over the command button. |
Picture | Holds the name of an icon graphic image that appears on the command button as long as the Style property is set to 1-Graphical. |
Style | Determines whether the command button appears as a standard Windows command button (if set to 0-Standard) or a command button with a color and possible picture (if set to 1-Graphical). |
TabIndex | Specifies the order of the command button in the focus order. |
TabStop | Determines whether the command button can receive the focus. |
ToolTipText | Holds the text that appears as a tooltip at runtime. |
Top | Holds the number of twips from the command button's top edge to the Form window's top edge. |
Visible | Determines whether the command button appears or is hidden from the user. (Invisible controls cannot receive the focus until the running code changes the Visible property to True.) |
Width | Holds the width of the command button in twips. |
Labels hold the primary text that appears on a form. Often, programmers use labels
to place titles around the form and to label text boxes so users know what to type
into the text box. Visual Basic supports several other ways to put text on forms,
but when you use the Label control, your code can subsequently, at runtime, change
the label's text so that different messages can appear when needed. Figure 4.3 shows
a Form window that contains a label used for the application's title.
Figure
4.3. A label forms the title on this form.
When you place labels on a form, you'll almost always set the Label control's Name
property and type a new Caption value. In addition, you'll want to change the Font
property and possibly the label's color and style. You will rarely write event procedure
code for labels, so a label's overhead is fairly small and the programming effort
required to manipulate labels is minimal.
Table 4.2 lists the most common Label control properties that you'll set as you work with the Label control.
Table 4.2. Common label properties.
Property | Description |
Alignment | Determines whether the label's caption appears left-justified, centered, or right-justified within the label's boundaries. |
AutoSize | Enlarges the label's size properties, when True, if you assign a caption that is too large to fit in the current label's boundaries at runtime. |
BackColor | Specifies the label's background color. Click the BackColor's palette down arrow to see a list of colors and click Categorized to see a list of common Windows control colors. |
BackStyle | Determines whether the background shows through the label or if the label covers up its background text, graphics, and color. |
BorderStyle | Determines whether a single-line border appears around the label. |
Caption | Holds the text that appears on the label. |
Enabled | Determines whether the label is active. Often, you'll change the Enabled property at runtime with code when a label is no longer needed. |
Font | Produces a Font dialog box in which you can set the caption's font name, style, and size. |
ForeColor | Holds the color of the label's text. |
Height | Holds the height of the label's outline in twips. |
Left | Holds the number of twips from the label's left edge to the Form window's left edge. |
MousePointer | Determines the shape of the mouse cursor when the user moves the mouse over the label. |
TabIndex | Specifies the order of the label in the focus order. Although the label cannot receive the direct focus, the label can be part of the focus order. |
ToolTipText | Holds the text that appears as a tooltip at runtime. |
Top | Holds the number of twips from the label's top edge to the Form window's top edge. |
Visible | Determines whether the label appears or is hidden from the user. |
Width | Holds the width of the label in twips. |
WordWrap | Determines whether the label expands to fit whatever text appears in the caption. |
Labels can present problems if they receive text that is too large for the label boundaries. Putting captions in labels seems easy until you think about the effects that can occur if the label is too large or too small to hold the text. By using certain property combinations, you can add automatically adjusting labels for whatever text the labels need to hold.
Suppose that you design a label that contains this long caption:
This label's caption is extremely long-winded, just like the author.
A label is rarely wide enough or tall enough to hold a caption this long. If you attempt to type text into a label's Caption property that is longer than what fits within the label's size properties (Left, Height, Top, and Width), one of the following things can take place, depending on how you have set up the label:
Set the AutoSize property to False if you want the label to remain the same size and not resize automatically to fit the Caption property value. If the code assigns long text, the label might not hold the entire caption, but the label will not expand and get in the way of other controls.
Figure 4.4. The label cannot display the entire caption.
Figure 4.5. The label resizes downward to hold the entire Caption property.
NOTE: Obviously, if you don't plan to change a label during a program's execution, you can size the label to fit the Caption property value at design time, and you don't have to worry about the AutoSize and WordWrap properties. You only need to concern yourself with these properties if event procedures or other code might possibly change the label's caption.
WARNING: Set WordWrap to True before you set the AutoSize property to True. If you set AutoSize first, the label expands horizontally before you have a chance to set the WordWrap property.
Figure 4.6. A horizontally resizing label could bump off other controls.
Text boxes accept user input. Although several other controls accept user input, text boxes are perhaps the easiest to set up and respond to. In addition, a text box is simple for your users to use, and they see text boxes on Windows forms all the time.
TIP: You can set a default value at design time or at runtime so that the user initially sees text in the text box. The user can either change the default text or accept the text by pressing Enter when the text box comes into focus.
Figure 4.7 shows a running application with two text boxes that accept user input.
Table 4.3 lists the common properties associated with text boxes. By familiarizing
yourself with the properties now, you will be able to more quickly produce applications
as you learn more about Visual Basic.
Figure
4.7. Two text boxes request user
information.
NOTE: As you are beginning to see, many properties for many controls overlap. Most controls contain Left, Height, Top, and Width properties as well as the Visible property. Therefore, when you learn the properties for one control, you are learning properties for many other controls. When you first began learning Visual Basic just a few hours ago, you may have wondered how you could learn all the properties that go with all the possible Windows controls. You can now see that many controls support the same properties, so learning about the control properties is not as difficult of a task as it may first seem.
WARNING: The Caption property is the most common property that displays text on a control such as a command button and a label. Text Box controls do not support the Caption property. The Text property holds text for Text Box controls.
Table 4.3. Common text box properties.
Property | Description |
Alignment | Determines whether the text box's text appears left-justified, centered, or right-justified within the text box's boundaries. |
BackColor | Specifies the text box's background color. Click the BackColor property's palette down arrow to see a list of colors and click Categorized to see a list of common Windows control colors. |
BorderStyle | Determines whether a single-line border appears around the text box. |
Enabled | Determines whether the text box is active. Often, you'll change the Enabled property at runtime with code when a text box is no longer needed. |
Font | Produces a Font dialog box in which you can set the Text property's font name, style, and size. |
ForeColor | Holds the color of the text box's text. |
Height | Holds the height of the text box's outline in twips. |
Left | Holds the number of twips from the text box's left edge to the Form window's left edge. |
Locked | Determines whether the user can edit the text inside the text box that appears. |
MaxLength | Specifies the number of characters the user can type into the text box. |
MousePointer | Determines the shape of the mouse cursor when the user moves the mouse over the text box. |
MultiLine | Lets the text box hold multiple lines of text or sets the text box to hold only a single line of text. Add scrollbars if you wish to put text in a multiline text box so your users can scroll through the text. |
PasswordChar | Determines the character that appears in the text box when the user enters a password (keeps prying eyes from knowing what the user enters into a text box). |
ScrollBars | Determines whether scrollbars appear on the edges of a multiline text box. |
TabIndex | Specifies the order of the text box in the focus order. |
TabStop | Determines whether the text box can receive the focus. |
Text | Holds the value of the text inside the text box. The Text property changes at runtime as the user types text into the text box. If you set an initial Text property value, that value becomes the default value that appears in the text box when the user first sees the text box. |
ToolTipText | Holds the text that appears as a tooltip at runtime. |
Top | Holds the number of twips from the text box's top edge to the Form window's top edge. |
Visible | Determines whether the text box appears or is hidden from the user. |
Width | Holds the width of the text box in twips. |
TIP: If you are unsure how to use a particular control's property, click the property in the Properties window and press F1 to read the online help. In addition to a detailed help screen that describes the property, such as the one shown in Figure 4.8, many of the help screens also contain an Example hypertext jump that shows an example of the property in action.
Figure 4.8. You can press F1 to request help for any selected property.
Forms have properties that you can and should set when you create an application. Being the background of your application, the form's properties help set the stage for the rest of the project. The form supports more property values than the other controls described in this lesson, but Table 4.4 lists only the most common properties that you'll need.
New Term: Pixel stands for picture element and represents the smallest addressable graphic dot on your monitor.
Table 4.4. Common form properties.
Property | Description |
BackColor | Specifies the form's background color. Click the BackColor's palette down arrow to see a list of colors and click Categorized to see a list of common Windows control colors. |
BorderStyle | Determines how the Form window appears. The BorderStyle property specifies whether the user can resize the form and also determines the kind of form you wish to display. |
Caption | Displays text on the form's title bar at runtime. |
ControlBox | Determines whether the form appears with the Control menu icon. The Control menu appears when your application's user clicks the Control menu icon. |
Enabled | Determines whether the form is active. Often, you'll change the Enabled property at runtime with code when a form is no longer needed. Generally, only multiform applications, such as MDI applications, need to modify a form's Enabled property. |
Font | Produces a Font dialog box in which you can set the text's font name, style, and size. |
ForeColor | Holds the color of the form's text. |
Height | Holds the height of the form's outline in twips. |
Icon | Describes the icon graphic image displayed on the taskbar when the user minimizes the form. |
Left | Holds the number of twips from the form's left edge to the screen's left edge. |
MaxButton | Specifies whether a maximize window button appears on the form. |
MinButton | Specifies whether a minimize window button appears on the form. |
MousePointer | Determines the shape of the mouse cursor when the user moves the mouse over the form. |
Moveable | Specifies whether the user can move the form at runtime. |
Picture | Determines a graphic image that appears on the form's background at runtime. |
ScaleMode | Determines whether the form's measurements appear in twips, pixels (the smallest graphic dot image possible), inches, centimeters, or other measurements. |
ShowInTaskbar | Determines whether the form appears on the Windows taskbar. |
StartUpPosition | Determines the state (centered or default) of the form at application startup. |
Top | Holds the number of twips from the form's top edge to the Form window's top edge. |
Visible | Determines whether the form appears or is hidden from the user. |
Width | Holds the width of the form in twips. |
WindowState | Determines the initial state (minimized, maximized, or normal) in which the window appears at runtime. |
Today you have learned the concept of focus. You must know about focus before working more with Visual Basic controls because focus determines the order of controls and which controls are active at any one time.
Most of this lesson describes the three fundamental controls that appear on almost every application's Form window: command buttons, labels, and text boxes. Many of the control properties overlap between these and other controls so you can easily master the properties that are important.
The next hour dives head first into the Visual Basic programming language so you can begin to build applications internally now that you've learned how to design application windows using the fundamental controls.
The quiz questions and exercises are provided for your further understanding. See Appendix C, "Answers," for answers.