Beyond "Hello World!" with Visual Basic

We are now going to create a more useful Visual Basic application - an image viewer application that lets you view graphic image files on your computer. Start Visual Studio 2017, and create a new project (select Windows Forms Application, as you did for the "Hello World!" program). Name the project "ImageViewer". Once the project has been created, you should see a screen like the one shown below.


The ImageViewer project

The ImageViewer project

  1. Click anywhere in the default form. Its properties should be displayed in the Properties window. Note that by default the form will be called by the generic name Form1.
  2. Scroll to the top of the properties list until you see the (Name) property.
  3. Click the (Name) property, and change the text from Form1 to ViewForm.
  4. Right-click the Form1.vb object in the Solution Explorer window.
  5. Choose Rename from the context menu that appears.
  6. Change the name from Form1.vb to ViewForm.vb (note for future reference that if you change the form's filename first, it will be renamed automatically)
  7. Click on the form once again to display its properties and scroll to the Text property.
  8. Change the text to "Image Viewer".
  9. Click on the Save All button in the toolbar at the top of the screen (that's the icon that looks like two floppy disks). You will see a dialogue box similar to the one shown below.

The Save Project dialogue box

The Name property is already present, because you named the project as you created it. The Location text box allows you to specify where the project should be saved. By default, this will be a sub-directory in the location shown, named after the project, which Visual Studio will create. You can accept the default location, or specify one of your own choosing.

By default, Visual Basic will also create a solution directory in which the project directory will reside. This is recommended for large projects, but is not really necessary for this exercise. Uncheck the Create directory for solution box, and click on the Save button to save the project.

It would be a good idea at this point to make a note of the location of the directory to which your project will be saved (this appears in the Location text box).

  1. Download the icon for the application here, unzip it, and save it to your project folder:

ImageViewer application icon

  1. Make sure the ImageViewer form is still selected. Then, in the Properties window, scroll to the Icon property and click on it once to select it.
  2. A button with three dots will appear to the right of the Icon property. Click on the button once.
  3. The Open dialogue box that appears. Browse to the ImageViewer project folder, click on the file ImageViewer.ico to select it, and then click on the Open button. The icon should now appear in both the form itself, and in the Icon property field.
  4. In the Properties window for the form, find the Size property and change the values to 400 and 325 (these values represent the width and height in pixels, respectively). The Properties window should now look like the illustration below (note that you can also resize a form by dragging its borders with the mouse, as well as programmatically).

Change the form's Size property to 400, 325
  1. Save your project once more using the Save All button.

Our application form is now exactly how we want it, and we can create the user interface by adding some controls to it. At some point, we will need to write some program code to make things happen when we use the application, but for now we will concentrate on creating the user interface.

  1. Click the Toolbox tab (on the left hand side of the screen) to display the toolbox window, and click the plus sign next to Common Controls to see the most commonly used controls. If the Toolbox tab is not visible, you can open it from the View menu (View Toolbox).

The Toolbox, displaying the Common Controls
  1. Double-click on the Button item in the toolbox. Visual Basic creates a new button and puts it in the upper-left corner of the form.
  2. Set the property values for the button as shown in the table below.

Control Properties
PropertyValue
NamebtnSelectImage
Location295, 10
Size85,23
TextSelect Image


  1. Right-click the Select Image button and choose Copy from the context menu that appears.
  2. Right-click anywhere on the form and choose Paste from the form's shortcut menu. The new button will appear centred on the form, and is selected by default. It will be identical to the first button, apart from its name and position. Change its properties as shown in the table below.

Control Properties
PropertyValue
NamebtnExit
Location295, 40
TextExit


  1. Double-click on the PictureBox item in the toolbox to add a picture box control to the form, and set its properties as shown in the table below.

Control Properties
PropertyValue
NamepicShowImage
BorderStyleFixedSingle
Location8, 8
Size282, 275


The form should now look like the one shown below.


The ImageViewer form, with its visible controls
  1. Click on the the Save All button again to save your work.
  2. In the toolbox, expand the Dialogs category, and double-click on the OpenFileDialog item to add it to the form. This control will not be visible to the user in the normal course of events, and will therefore appear at the bottom of the design window, underneath the form, as shown below.

The OpenFileDialog control does not appear on the form
  1. Make sure the OpenFileDialog control is selected, and set its properties to those shown below.

Control Properties
PropertyValue
NameofdSelectImage
FileName (this should be blank)
FilterWindows Bitmaps|*.BMP|JPEG Files|*.JPG
TitleSelect Image


The filter property determines the type of files that will be displayed in the Open File dialogue box when the application runs. The text in front of the pipe symbol ("|") is the descriptive name given to the file type, while the text that follows it is the pattern used to filter files. A pipe symbol is also used to separate filters.

Some program code is now needed to make the program actually do something when a user interacts with it. Program code is executed in response to some event, such as the program being started, or a user clicking on a button. We will need to add some code that allows the user to browse their hard drive for an image file and display it, and we will also need some code to close the program when the user clicks on the Exit button.

  1. Double-click the Select Image button now to access its Click event in the code window. Visual Basic creates an event handler template for the button's default event (a user click). The cursor will be positioned at the point where you need to insert code.
The event handler template is created for you in the code window
  1. Enter the following code at the cursor:

If ofdSelectImage.ShowDialog = DialogResult.OK Then
  picShowImage.Image = Image.FromFile (ofdSelectImage.filename)
  Me.Text = "Picture Viewer (" & ofdSelectImage.FileName & ") "
End If

Your code should now look like the illustration below.

Your code should be the same as the code shown here

The first line of code you entered triggers the ShowDialog() method of the OpenFileDialog control that tells it to show the Open dialogue box that allows the user to browse their computer's hard drive for an image file. The method returns a value that indicates success or failure, which is then compared to a predefined result (DialogResult.OK).

If the user selects a file, the code between the If ... End If statements is executed (note that Visual Basic will automatically add the End If, as well as capitalising your code to match control names if necessary, and taking care of indentation).

The second line of code you entered actually displays the image stored in the selected file in the picture box, while the third line of code displays the path and filename of the image in the application's title bar. Now we just need some code to make the Exit button work.

  1. If the form is not currently visible, click on the tab at the top of the code window that says ViewForm.vb [Design] to switch to the form designer.
  2. Double-click the Exit button, and type the line of code shown below in the button's Click event handler. This statement closes the form, and since this is the only form in the application, it closes the application as well.

Me.Close()

  1. Your code should now look like the illustration below. Click on the Save All button, then run the program by pressing the F5 key (or the Start button on the toolbar).
The complete code for the application
  1. When the application opens, click on the Select Image button to display the Select Image dialog box (see below), and find a suitable image to display.

The Select Image dialogue box
  1. Once you have found an image and selected it, either double-click on it, or click on the Open button do display the image.

The ImageViewer application displaying an image

Of course, if the image is very small, it will not fill the display area. If it is very large, only the top left-hand portion of the image will be visible. We deliberately chose pictures here that would fit into the space provided. We could refine the program in due course to allow images to be scaled to fit the display area.

It is also a relatively easy matter to modify the application to display images in other file formats (the PictureBox control can also display image files with the extensions .ico, .emf, .wmf and .gif). You can amend the Filter property of the OpenFileDialog control to include any of these file types if required.