Adding Features to a Windows Forms Application

Common properties for forms and controls

Figure 2-6 shows some common properties for forms and controls. The first two properties apply to both forms and controls. The other properties are presented in two groups: properties that apply to forms and properties that apply to controls. Note that some of the control properties only apply to certain types of controls. That’s because different types of controls have different properties.

Since all forms and controls must have a Name property, Visual Studio creates generic names for all forms and controls, such as Form1 or Button1. Often, though, you should change these generic names to something more meaningful, especially if you’re going to refer to them in your Visual Basic code.

To make your program’s code easier to read and understand, you can begin each name with a two- or three-letter prefix in lowercase letters to identify the control’s type. Then, you can complete the name by describing the function of the control. For instance, you can use a name like btnExit for the Exit button and txtSubtotal for the Subtotal text box.

For Label controls, you can leave the generic names unchanged unless you plan on modifying the properties of the labels in your code. For example, if you want to use a label control to display a message to the user, you can give that label a meaningful name such as lblMessage. But there’s no reason to change the names for label controls that display text that won’t be changed by the program.

Forms and most controls also have a Text property that is visible when the form is displayed. A form’s Text property is displayed in the form’s title bar. For a control, the Text property is usually displayed somewhere within the control. The Text property of a button, for example, is displayed on the button, and the Text property of a text box is displayed in the text box.

As you work with properties, you’ll find that you can set some of them by selecting a value from a drop-down list. For example, you can select a True or False value for the TabStop property of a control. For other properties, you have to enter a number or text value. And for some properties, a button with an ellipsis (...) is displayed. Then, when you click this button, a dialog box appears that lets you set the property.

The Name property

1. Sets the name you use to identify a control in your Visual Basic code.
   
2. Can be changed to provide a more descriptive and memorable name for forms and controls that you will refer to when you write your code (such as text boxes and buttons). 
    
3. Doesn’t need to be changed for controls that you won’t refer to when you write your code (such as most labels). 
    
4. Can use a three-letter prefix to indicate whether the name refers to a form (frm), button (btn), label (lbl), or text box (txt).

The Text property

• Sets the text that’s displayed on the form or control. Some controls such as forms and labels display the generic form or control name that’s generated by Visual Studio, which you’ll almost always want to change.
  
• For a form, the Text value is displayed in the title bar. For controls, the Text value is displayed directly on the control. 
   
• For a text box, the Text value changes when the user types text into the control, and you can write code that uses the Text property to get the text that was entered by the user.  

Other properties for forms  

Other properties for controls  

Figure 2-6. Common properties for forms and controls

How to add navigation features

Windows forms have features that make it easier for users to move around in the forms without using the mouse. These navigation features are described in figure 2-7.

The tab order is the order in which the controls on a form receive the focus when the user presses the Tab key. The tab order should usually be set so the focus moves left-to-right and top-to-bottom, beginning at the top left of the form and ending at the bottom right. However, in some cases you’ll want to deviate from that order. For example, if you have controls arranged in columns, you may want the tab order to move down each column.

The tab order is initially set based on the order in which you add controls to the form. So if you add the controls in the right order, you won’t need to alter the tab order. But if you do need to change the tab order, you can do so by adjusting the TabIndex property settings. The TabIndex property is simply a number that represents the control’s position in the tab order, beginning with zero. So, the first control in the tab order has a TabIndex of 0, the second control’s TabIndex is 1, and so on.

Incidentally, chapter 10 will show you another way to set the tab order of the controls for a form. You can do that by using Tab Order view. When a form consists of more than a few controls, it is easier to use this view than to set the tab order for one control at a time.

Access keys are shortcut keys that let the user move directly to a control. You set a control’s access key by using the Text property. Just precede the letter in the Text property value that you want to use as the access key with an ampersand (&). Then, the user can activate the control by pressing Alt plus the access key.

If you assign an access key to a control that can’t receive the focus, such as a label control, pressing the access key causes the focus to move to the next control in the tab order. As a result, you can use an access key with a label control to create a shortcut for a text box control, which can’t have an access key.

Finally, you usually should set the AcceptButton and CancelButton properties for a form. These properties specify the buttons that are activated when the user presses the Enter and Esc keys. That can make it easier for a user to work with a form. If, for example, the AcceptButton property of the Invoice Total form in figure 2-3 is set to the Calculate button, the user can press the Enter key after entering a subtotal instead of using the mouse to click the Calculate button.

How to adjust the tab order

1. Tab order refers to the sequence in which the controls receive the focus when the user presses the Tab key. You should adjust the tab order so the Tab key moves the focus from one control to the next in a logical sequence.
   
2. Each control has a TabIndex property that indicates the control’s position in the tab order. You can change this property to change a control’s tab order position. 
    
3. If you don’t want a control to receive the focus when the user presses the Tab key, change that control’s TabStop property to False. 
    
4. Label controls don’t have a TabStop property so they can’t receive the focus.

How to set access keys

1. Access keys are shortcut keys that the user can use in combination with the Alt key to quickly move to individual controls on the form.
   
2. You use the Text property to set the access key for a control by placing an ampersand immediately before the letter you want to use for the access key. For example, &Invoice sets the access key to I, but I&nvoice sets the access key to n. 
    
3. Since the access keys aren’t case sensitive, &N and &n set the same access key. 
    
4. When you set access keys, make sure to use a unique letter for each control. If you don’t, the user may have to press the access key two or more times to select a control. 
    
5. You can’t set the access key for a text box. However, if you set an access key for a label that immediately precedes the text box in the tab order, the access key will take the user to the text box.

How to set the Enter and Esc keys

1. The AcceptButton property of the form sets the button that will be activated if the user presses the Enter key.
   
2. The CancelButton property of the form sets the button that will be activated if the user presses the Esc key. This property should usually be set to the Exit button. 
    
3. You set the AcceptButton or CancelButton values by choosing the button from a drop-down list that shows all of the buttons on the form. So be sure to create and name the buttons you want to use before you attempt to set these values.

Another way to set the tab order

• In chapter 10, you’ll learn how to use Tab Order view to set the tab order of the controls on the form. If the form consists of more than a few controls, that is the best way to set that order.
  
  

Figure 2-7.  How to add navigation features

The property settings for the Invoice Total form

Figure 2-8 shows the property settings for the Invoice Total form. As you can see, you don’t need to change many properties to finish the design of this form. You only need to set four properties for the form, and you only use six of the properties (Name, Text, TextAlign, ReadOnly, TabStop, and TabIndex) for the controls. Depending on the order in which you create the controls, though, you may not need to change the TabIndex settings.

Notice that the three text boxes that display the form’s calculation have their ReadOnly property set to True. This setting gives the text boxes a shaded appearance, as you saw in figure 2-3, and it prevents the user from entering text into these controls. In addition, the TabStop property for these text boxes has been set to False so the user can’t use the Tab key to move the focus onto these controls.

Finally, the settings for the TabIndex properties of the text box and the two buttons are 1, 2, and 3. Since the label controls can’t receive the focus, and since the TabStop property for the three read-only text boxes has been set to False, the user can press the Tab key to move the focus from the Subtotal text box to the Calculate button to the Exit button.

In addition, the Subtotal label has a TabIndex property of 0 and a Text property that includes an access key of S. As a result, the user can press Alt+S to move the focus to the control that has the next available tab index. In this case, that control is the Subtotal text box, which has a TabIndex property of 1.

Of course, this is just one way that the TabIndex properties could be set. If, for example, the TabIndex properties for the 10 controls were set from 0 through 9, from top to bottom in this summary, the tab order would work the same.

How to use Document Outline view

Document Outline view is a feature that became available with Visual Studio 2005. To open the window for this view, you use the View->Other Windows->Document Outline command. This opens a window to the left of the Form Designer that lists the names of all of the controls that have been added to the current form.

This view makes it easy to check whether you’ve named all of the controls that you’re going to refer to in your Visual Basic code. You can also select a control in the Form Designer by clicking on the name of the control in Document Outline view. Although these are minor benefits, it’s worth experimenting with this view to see whether you’re going to want to use it.

The property settings for the form  

The property settings for the controls

Note

• To provide an access key for the Subtotal text box, you can set the TabIndex and Text properties for the Subtotal label as shown above.
  

Figure 2-8.  The property settings for the Invoice Total form

How to name and save the files of a project

When you’re working on a project, you may want to change the names of some of the files from their defaults. Then, you’ll want to save the files with their new names.

How to name the files of a project

You may have noticed throughout this chapter that I didn’t change the default name of the form (Form1.vb) that was added to the Invoice Total project when the project was created. In practice, though, you usually change the name of this form so it’s more descriptive. For example, figure 2-9 shows how to use the Solution Explorer to change the name of the form file to frmInvoiceTotal.vb. When you do that, Visual Studio will also change the Name property for the form from Form1 to frmInvoiceTotal and modify any of the code that’s been generated for the form accordingly.

You may also want to change the name of the project. Or, you may want to change the name of the solution so it’s different from the project name. If so, you can use the technique presented in this figure to do that too.

How to save the files of a project

Figure 2-9 also describes how to save the files of a project. Because Visual Studio saves any changes you make to the files in a project when you build the project, you won’t usually need to save them explicitly. However, it’s easy to do if you need to.

Notice in this figure that two factors determine which files are saved: what’s selected in the Solution Explorer and the command you use to perform the save operation. If, for example, a single file is selected, you can use the Save command to save just that file, and you can use the Save All command to save the file along with the project and solution that contain the file. In contrast, if a project is selected in the Solution Explorer, the Save command causes the entire project to be saved, and the Save All command causes the entire solution to be saved.

If you haven’t saved all of your recent changes when you close a project, Visual Studio will ask whether you want to save them. As a result, you don’t need to worry that your changes will be lost.

The Solution Explorer as a form file is being renamed

How to rename a file, project, or solution

1. You can rename a file, project, or solution by right-clicking on it in the Solution Explorer window and selecting the Rename command from the shortcut menu. Or, you can select the file, project, or solution in the Solution Explorer and then press F2. Then, you can enter the new name for the file, project, or solution.
   
2. Be sure not to change or omit the file extension when you rename a file. Remember too that using a three-letter prefix to indicate the contents of the file (like frm for a form file) makes it easier to tell what each file represents. 
    
3. When you change the name of a form file, Visual Studio will also change the Name property for the form and update any references within the existing code for the form, which is usually what you want.

 How to save a file, project, or solution

• You can use the Save All button in the Standard toolbar or the Save All command in the File menu to save all files and projects in the solution.
  
• You can use the Save button in the Standard toolbar or the Save command in the File menu to save a file, project, or solution. The files that are saved depend on what’s selected in the Solution Explorer window. If a single file is selected, just that file is saved. If a project is selected, the entire project and its solution are saved. And if a solution is selected, the entire solution and all its projects are saved. 
   
• If you try to close a solution that contains modified files, a dialog box is displayed that asks you if you want to save those files.  

Figure 2-9.  How to name and save the files of a project

Perspective

If you can design the Invoice Total form that’s presented in this chapter, you’ve taken a critical first step toward learning how to develop Windows Forms applications with Visual Studio 2008. The next step is to add the code that makes the form work the way you want it to, and that’s what you’ll learn to do in the next chapter.

Terms

  template
  label
  text box
  button
  primary control
  property
  tab order
  focus
  access key

Exercise 2-1  Design the Invoice Total form

This exercise will guide you through the process of starting a new project and developing the user interface for the Invoice Total form shown in this chapter.

Set the default path and start a new project

1. Start Visual Studio. If you want to change the import and export settings to make sure your menus are the same as the ones in this book, use Tools->Import and Export Settings command described in figure 2-1 to specify the default Visual Basic development settings.
   
2. Use the Tools->Options command to display the Options dialog box as shown in figure 2-1. Then, expand the Projects and Solutions group, select the General category, and change the Visual Studio projects location setting to C:\VB 2008. 
    
3. If the Save New Projects When Created box and the Always Show Solution box aren’t checked, check them. 
    
4. If you want to stop the Start Page from being displayed each time you start Visual Studio, click on Startup within the Environment group. Then, select another option from the At Startup drop-down list. 
    
5. If you’re interested, take a few minutes to review the other options that are available in this dialog box. Then, close the dialog box. 
    
6. Start a new project as shown in figure 2-2. The project should be named InvoiceTotal and it should be stored in the C:\VB 2008\Chapter 02 folder.  
   
   Add controls to the new form and set the properties
   
7. Use the techniques in figure 2-4 to add controls to the form so they have approximately the same sizes and locations as in figure 2-5. But don’t worry about the size of the labels, just their locations.
   
8. Select groups of controls and use the buttons in the Layout toolbar to size and align the controls. But here again, let the labels automatically size themselves. Then, size the form so it looks like the one in figure 2-4. 
   
9. Use the Properties window to set the properties for the form and its controls so it looks like the form in figure 2-3. These properties are summarized in figure 2-8. 
   
10. Use the View->Other Windows->Document Outline command to open the window for Document Outline view. Next, use this window to check that you’ve named all of the controls that have Name properties in figure 2-8. Then, click on the controls in this view to see what happens, and close this window when you’re done.
    
    Test the user interface
    
11. Press F5 to build and run the project. That should display the form in the center of the screen, and it should look like the one in figure 2-3.
    
12. Experiment with the form to see what it can do. When you press the Tab key, notice how the focus moves from one control to another. When you click a button, notice how it indents and then pops back out just like any other Windows button control. Nothing else happens in response to these button clicks, though, because you haven’t written the code for them yet.
    
    Notice that the Calculate button has a dark outline around it to indicate that its function will be executed if you press the Enter key. (If it doesn’t have a dark outline, you haven’t set the AcceptButton property of the form to the button.)
    When you press the Alt key, notice that an underline appears under the s in the Subtotal, the first c in Calculate, and the x in Exit to indicate that you can use an access key to work with these controls. (If the underlines don’t show, you haven’t entered the Text properties correctly.) 
    
13. If you notice that some of the properties are set incorrectly, click the Close button in the upper right corner of the form to close the form. Then, make the necessary changes and run the project again. When you’re satisfied that the form is working right, close the form to return to the Form Designer.
    
    Experiment with the properties for the form and its controls
    
14. In the Form Designer, click on the form so it is selected. Then, if necessary, adjust the Properties window so you can see the description for each property. To do that, drag the bottom boundary of the window up.
    
15. Click on the Categorized button at the top of the Properties window to display the properties by category. Then, review the properties in the Appearance, Behavior, Layout, and Window Style categories. Although you won’t understand all of the descriptions, you should understand some of them.
    
16. In the Window Style category, change the settings for the MaximizeBox and MinimizeBox to False to see how that changes the form. Then, to undo those changes, click twice on the Undo button in the Standard toolbar or press Ctrl+Z twice.
    
17. Click on the first text box and review the Appearance, Behavior, and Layout properties for that control. Then, repeat this process for one of the labels and one of the buttons. Here again, you won’t understand all of the descriptions, but you should understand some of them. 
    
18. Select all four of the labels, click on the plus sign before the Font property in the Appearance group, and change the Bold setting to True to see how that changes the form. Then, undo that change.
    
    Change the name of the form files
    
19. Use one of the techniques presented in figure 2-9 to change the name of the form file from Form1.vb to frmInvoiceTotal.vb.  
    
20. Note in the Solution Explorer that this also changes the name of the two subordinate files to frmInvoiceTotal.Designer.vb and frmInvoiceTotal.resx. To see these files, you may have to click on the Show All Files button and then on the plus sign for the frmInvoiceTotal.vb file.
    
    Close the project and exit from Visual Studio
    
21. Use the File->Close Solution command to close the project. If you’ve made any changes to the project since the last time you tested it, a dialog box is displayed that asks whether you want to save the changes that you made. If you want to save those changes, click Yes.
    
22. Use the File->Exit command to exit from Visual Studio.