Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Designing an Interface
It's generally best to design the user interface of a form and then add the code behind the interface that makes the form functional. The user interface for your Picture Viewer program will consist of a View Picture button, a Close button, and a picture box in which to display a picture.
Adding a Visible Control to a Form
Start by adding a Button control to the form. Do this by double-clicking the Button item in the toolbox. Visual Basic then creates a new button and places it in the upper-left corner of the form (see Figure 1.7).
){kind=link}
NOTE
In earlier editions of Visual Basic, the Button control was called a command button.
Figure 1.7 When you double-click a control in the toolbox, the control is added to the upper-left corner of the form.
Using the Properties window, set the button's properties as follows (note that you may want to change the Properties list to alphabetical, if it is not already, to make it easier to find these properties by name):
|
Property |
Value |
|
Name |
btnSelectPicture |
|
Text |
Select Picture |
|
Location |
301,10 (Note: 301 is the x coordinate, 10 is the y coordinate.) |
|
Width |
85 |
You're now going to create a button that the user can click to close the Picture Viewer program. Rather than adding a new button to the form, you're going to create a copy of the button you've already defined. To do this, right-click the button on the form and choose Copy from its shortcut menu. Next, right-click anywhere on the form and choose Paste from the form's shortcut menu. The new button appears over the button you copied, and it is selected by default. Change the properties of the new button as follows:
|
Property |
Value |
|
Name |
btnQuit |
|
Text |
Quit |
|
Location |
301,40 |
The last control you need to add to the form is a PictureBox control. A PictureBox has many capabilities, but its primary purpose is to show pictures—which is precisely what you'll use it for in this example. Add a new PictureBox control to the form, and set its properties as follows:
|
Property |
Value |
|
Name |
picShowPicture |
|
BorderStle |
FixedSingle |
|
Location |
8,8 |
|
Size |
282, 275 |
After you've made these property changes, your form will look like the one in Figure 1.8. Click the Save All button on the toolbar to save your work.
){kind=link}
Figure 1.8 An application's interface doesn't have to be complex to be useful.
Adding an Invisible Control to a Form
So far, all the controls that you've used sit on a form and have a physical appearance. However, not all controls have a physical appearance. Such controls, referred to as invisible-at-runtime controls, aren't designed for user interactivity, but they're designed to give you, the programmer, functionality beyond the standard features of Visual Basic.
To allow the user to select a picture to display, you need to give her the capability to locate a file on her hard drive. You've probably noticed in the past that whenever you choose to open a file from within any Windows application, the dialog box displayed is almost always the same. It doesn't make any sense to force each and every developer to write the code necessary to perform standard file operations. Instead, Microsoft has exposed the functionality via a control that you can use in your project. This control is called the OpenFileDialog control, and it will save you dozens of hours that you would otherwise spend trying to duplicate common functionality.
NOTE
Other controls besides the OpenFileDialog control give you file functionality. For example, the SaveFileDialog control provides features for allowing the user to save a file.
Scroll the toolbox until you can see the OpenFileDialog control, and then double-click it to add it to your form. (You may have to scroll the toolbox, which is done by clicking the up arrow toward the top of the window or the down arrow toward the bottom.) Note that the control isn't placed on the form, but it appears in a special area below the form (see Figure 1.9). This happens because the OpenFileDialog control has no interface to display to a user. It does have an interface, a dialog box, that you can display as necessary, but it has nothing to display directly on a form.
){kind=link}
Select the OpenFileDialog control and change its properties as follows:
|
Property |
Value |
|
Name |
ofdSelectPicture |
|
Filter |
Windows Bitmaps|*.BMP|JPEG Files|*.JPG |
|
Title |
Select Picture |
The Filter property determines the filtering of the control. The text that appears before the pipe symbol (|) is the descriptive text of the file type, whereas the text after the pipe symbol is the pattern to use to filter files; you can specify more than one filter type. Text entered into the Title property appears in the title bar of the Open File dialog box.
Figure 1.9 Controls that have no interface appear below the form designer.