Chapter 1 Introduction

1.1 A Brief History of Visual Basic

Visual Basic is a third-generation event-driven programming language first
released by Microsoft in 1991. The final version of the classic Visual Basic
was Visual Basic 6. VB6 is a user-friendly programming language designed
for beginners. It allows anyone to develop GUI Windows desktop
applications effortlessly. Interestingly, many developers still favor VB6
over its successor [Link].

In 2002, Microsoft released Visual [Link] ([Link]), replacing Visual

Basic 6. Thereafter, Microsoft declared VB6 a legacy programming
language in 2008. However, Microsoft still provides some form of support
for VB6. Unlike VB6, [Link] is a fully object-oriented programming
language implemented on the .NET Framework. It was created to cater for
the development of the web as well as mobile applications. Subsequently,
Microsoft has released many versions of [Link]: Visual Basic 2005,
Visual Basic 2008, Visual Basic 2010, Visual Basic 2012, Visual Basic
2013, Visual Basic 2015, Visual Basic 2017, Visual Basic 2019 and Visual
Basic 2022. Although the .NET portion was discarded in 2005, all versions
of the Visual Basic programming language released since 2002 are regarded
as the [Link] programming language.

Microsoft released Visual Studio 2022 in early 2022. VS 2022 allows you
to code in different programming languages and different platforms, among
them is Visual Basic 2022. The other Programming languages are C# C++,
F#, JavaScript, Java and Python.
1.2 Installation of Visual Studio 2022
You may download the free version of Visual Studio 2022 from the
following link:
[Link]

Clicking the link brings up the Visual Studio 2022 download page, as
shown in Figure 1.1

Figure 1.1

You can choose the free Visual Studio Community 2022 or the Full-featured
Professional 2022 and Enterprise 2022 to download, as shown in Figure
1.2.
Figure 1.2

Upon clicking Community 2022, you will be directed to the download page,
as shown in Figure 1.3. You can download Visual Studio Community for
Windows, Visual Studio for Mac or the stand-alone source code editor
Visual Studio Code.

Figure 1.3

The free version provides full-featured IDE for students, open-source

community and individuals. Since this book was written based on the free
version, proceed to download the free Visual Studio 2022 Community,
select community and download the installer file. The downloaded installer
file will appear on your Windows taskbar. Clicking the Visual Studio 2022
Installer will start downloading, unpacking and installing the files necessary
for the installation of Visual Studio 2022, as shown in Figure 1.4

Figure 1.4

You will see several status screens that show the progress of the installation.
After the installer has finished installing, it is time to pick the feature set
that you wish to install, as shown in Figure 1.4. Since we are focusing on
developing Visual Basic 2022 desktop app, we will select the .NET desktop
development component. After making your selections, click install.
Figure 1.4

Upon completion of the installation, you are now ready to launch Visual
Studio 2022 and start programming in Visual Basic 2022
1.3 Creating a Visual Basic 2022 Project
To create a Visual Basic 2022 project, launch Microsoft Visual Studio 2022
to bring up the Visual Studio 2022 Start Page, as shown in Figure 1.5

Figure 1.5 Visual Studio 2022 Start Page

The Visual Studio 2022 start page offers a much simpler UI than VS2019, it
comprises four options: clone a repository, open a project or solution, open
a local folder or create a new project.

Let us create a new project by clicking the Create a new project option. You
will see the Create a new project template page, as shown in Figure 1.6.
There are a dozen templates to choose from, but since the book is about
Visual Basic 2022 programming, scroll down to select WPF application, as
shown in Figure1.6.

Figure 1.6 Create a new project template

Next, select the Windows Forms App (.Net Framework) template as we

want to develop a Windows desktop project. After selecting the template
and clicking the Next button, the project configuration page appears, as
shown in Figure 1.7. You can configure your project by typing the project
name and selecting a few other options.
Figure 1.7 Configuring Project

At the bottom of this dialog box, you can change the default project name
WindowsApplication1 to some other name you like, for example, My First
Visual Basic 2022 Application. After renaming the project, click OK to
continue. The Visual Basic 2022 IDE Windows will appear, as shown in
Figure 1.8. Visual Basic 2022 IDE comprises a few windows, the Form
window, the Solution Explorer window, and the Properties window. It also
consists of a toolbox which contains many useful controls that allows the
programmer to develop his or her Visual Basic 2022 programs.
Figure 1.8 The Visual Basic 2022 IDE

The Toolbox is not shown until you click the Toolbox tab. When you click
the Toolbox tab or use the shortcut keys Ctrl+Alt+x, the common controls
Toolbox will appear, as shown in Figure 1.9. You can drag and move your
toolbox around and dock it to the right, left, top or bottom of the IDE.
Figure 1.9 Visual Basic 2022 Toolbox

Next, we shall proceed to show you how to create your first VB2022
application. First, change the text of the form to ‘My First VB 2022
Application’ in the properties window; it will appear as the title of the
application. Next, insert a button and change its text to OK. The design
interface is shown in Figure 1.10
Figure 1.10 The Design Interface

Now click on the OK button to bring up the code window and enter the
following statement between Private Sub and End Sub procedure, as
shown in Figure 1.11.

MsgBox("My First Visual Basic 2022 App")

Clicking the Start button on the toolbar or press F5 to run the application
will launch the runtime interface, as shown in Figure 1.12. Executing the
application by clicking the OK button will bring up a dialog box that
displays the “My First Visual Basic 2022 App" message, as shown in
Figure 1.13. The function MsgBox is a built-in function of Visual Basic
2022 which can display the text enclosed within the brackets.
Figure 1.11 Visual Basic 2022 Code Window

Figure 1.12 The Runtime Interface

Figure 1.13 The Message Box

Summary
● In section 1.1, you have learned about the history of Visual Basic 2022
● In section 1.2, you have learned how to install and launch Visual Basic
Studio 2022
● In section 1.3, you have learned how to launch the new project dialog
and the Visual Basic 2022 IDE. You have also learned how to write
your first program.
Chapter 2 Designing the User Interface

To design a graphical user interface, you may customize the default form by
changing its properties at design phase and at runtime, including its name,
title, background color and so forth. After customizing the default form,
you may proceed to add controls from the toolbox to the form and then
define their properties.
2.1 Customizing the Form
When you start a new Visual Basic 2022 project, the VB2022 IDE will
display the default form along with the Solution Explorer window and the
Properties window, as shown in Figure 2.1. The name of the default form is
Form1. The properties window displays all the properties associate with
Form1 and their corresponding attributes or values. You can change the
name of the form, the title of the form using the text property, the
background color, the foreground color, size and more. Try changing the
properties as shown in Table 2.1
Table 2.1
Property Value
Name MyForm
Text My First VB2022 App
BackColor LavenderBlush
ForeColor Crimson
MaximizeBox False

You do not have to type in the color manually, you can select a color from
the color drop-down list that comprises three tabs, Custom, Web, and
System, as shown in Figure 2.1. Clicking the drop-down arrow will bring
out a color palette or a list of color rectangles where you can select a color.
Figure 2.1
Another method of setting the colors is to manually type the RGB color
code or the hex color code. The values of R, G and B ranges from 0 to 255,
therefore, by varying the values of the RGB we can obtain different colors.
The hex color code system uses a six-digit, three-byte hexadecimal number
to represent colors. The bytes represent the red, green and blue components
of the color. One byte represents a number ranging from 00 to ff, or 0 to 255
in decimal notation. For example, #0000ff represents the cyan color.
However, when you type the Hex color code in the properties window, it
automatically converts the color to RGB color. Figure 2.2 shows a list of
Hex color codes and the corresponding colors.
Figure 2.2 Hex Color Codes
The design interface is shown in Figure 2.3 and the runtime interface is
shown in Figure 2.4. On the runtime interface, notice that the title has been
changed from Form1 to My First VB 2022 Application, background color
changed to Lavender Blush, the text OK color is Crimson and the window
cannot be maximized.
Figure 2.3 Design UI

Figure 2.4 Runtime UI

You can also change the properties of the form at runtime by writing
relevant codes. The default form is an object, and an instant of the form can
be denoted by the name Me . The property of the object can be defined by
specifying the object’s name followed by a period, as follows:

[Link]

For example, setting the background of the form to blue using the following
code:

[Link]=[Link]

In addition, you can use the FromArgb method to specify the color using
the RGB codes, as follows:

[Link] = [Link](0, 255, 0)

Example 2.1 Changing Properties at Runtime

Private Sub Form1_Load(sender As Object, e As EventArgs) Handles_

[Link]
[Link] = "My First Visual Basic 2022 Application"
[Link] = [Link]
[Link] = [Link]
[Link] = [Link]
[Link] = False
[Link] = True
End Sub

To runtime UI is shown in Figure 2.5. Notice that it is now different from

that shown in Figure 2.4,
Figure 2.5
In the place of Turquoise , you can use RGB code as follows:

[Link] = [Link] rgb(64,224,208)

In addition, you can specify the size, the opacity and the position of the
default form using the code, as in Example 2.2
Example 2.2 Customizing the Form

Private Sub Form1_Load(sender As Object, e As EventArgs Handles

[Link]

[Link] = "My First VB2022 App"

 [Link] =[Link]
[Link] = False
[Link] = True
[Link] = New Size(400, 400)
[Link] = 0.85
[Link]()

End Sub
The property Opacity sets the degree of transparency. The runtime interface
is as shown in Figure 2.6

Figure 2.6
2.2 Adding Controls to the Form
In section 2.1, we have learned how to build an UI by customizing the
default form. Next, we shall continue to build the UI by adding some
controls to the form. The controls are objects that consist of three elements,
namely properties, methods, and events. We can add them to the form from
the Toolbox. Among the controls, the most used ones are button, label,
textbox, list box, combo box, picture box, check box, radio button and
more. These controls can be made visible or invisible at runtime. However,
some controls will only run in the background and never be seen at runtime,
one such control is the timer.
The Toolbox is usually hidden when you start Visual Basic 2022 IDE, you
must click View on the menu bar and then select Toolbox to reveal the
toolbox, as shown in Figure 2.6. You can also use shortcut keys Ctrl+w+x
to bring out the toolbox.

Figure 2.6: Toolbox

You can position the Toolbox by dragging it anywhere you like while its
status is set to float. You can also dock the toolbox by right-clicking on the
toolbox and choose dock from the pop-up menu. The docked Toolbox
appears side by side with the Solution Explorer, or as one of the tabbed
windows together with the Form Design window and the code window, as
shown in Figure 2.7.

Figure 2.7 Toolbox

You can also dock the toolbox at the bottom, below the default form, as
shown in Figure 2.8. Further, you may also pin the toolbox to the side bar or
the bottom bar by clicking on the pin icon on the menu bar of the toolbox.
How and where you want to position your toolbox is entirely up to you, but
we strongly suggest that you place the toolbox alongside or at the bottom of
the default form for ease of use. You should never cover the form with the
toolbox because it will be difficult to add controls to the form.
Figure 2.8

Adding a control to the form is an easy task, what you must do is double
click it or drag it onto the form. You can drag the control around the form
and resize it.

To demonstrate how to add the controls and then change their properties,
we shall design a picture viewer. First, change the title of the default form
to Picture Viewer in its properties window. Next, insert a picture box on the
form and change its background color to white. To do this, right click the
picture box and select properties in the popup menu, then look for the
BackColor Property as shown in the properties window in Figure 2.9.
Finally, add two buttons to the form and change the text to View and Close
in their respective properties’ windows. The picture viewer is not functional
yet until we write code for responding to events triggered by the user. We
will deal with the programming part in the coming chapters.
Figure 2.9

Summary
● In section 2.1, you have learned how to customize the form by changing
the values of its properties.
● In section 2.2, you have learned how to add controls to the form and
change their properties at design phase and at runtime.
Chapter 3 Writing the Code

In this chapter, we shall learn how to write code for all the controls enabling
them to interact with the events triggered by the users. Before learning how
to write Visual Basic 2022 code, let us delve into the concept of event-
driven programming.
3.1 The Concept of Event-Driven Programming
Visual Basic 2022 is an event-driven programming language, meaning that
the code is executed in response to events triggered by the user like clicking
the mouse or pressing a key on the keyboard. Some other events are
selecting an item from a drop-down list, typing some words into a text box
and more. It may also be an event that responds to some other events. Some
of the common events in Visual Basic 2022 are load, click, double-click,
drag-drop, keypress and more.
Every control you place on the form has a set of events associate with it. To
view the events, double-click the control on the form to enter the code
window. The default event will appear at the top right side of the code
window. You must click the default event to view other events associated
with the control. The code appears on the left side is the event procedure
associated with the load event. Figure 3.1 illustrates the event procedure
Load associated with the Form and Figure 3.2 shows the events associated
with the button.
Figure 3.1: Events associated with Form

Figure 3.2: Events associated with the button

3.2 Writing the Code
To write code, click any part of the form to enter the code window, as
shown in Figure 3.1. The event procedure is to load Form1 which starts
with the keywords Private Sub and ends with End Sub . This procedure
includes the Form1 class and the event Load, and they are bound together
with an underscore, i.e., Form_Load . It does nothing other than loading an
empty form. To make the load event does something, insert the following
statement.

MsgBox ( "Welcome to Visual Basic 2022")

Example 3.1 Displaying a Message

Public Class Form1

Private Sub Form1_Load(sender As Object, e As EventArgs) Handles_
[Link]

MsgBox ( "My First Visual Basic 2022 APP", ,"My Message")

End Sub
End Class

MsgBox is a built-in function that displays a message in a pop-up message

box. The MsgBox function comprises a few arguments, the first is the
message that is displayed and the third one is the title of the message box.
When you run the program, a message box displaying the phrase "My First
Visual Basic 2022 APP" will appear, as shown in Figure 3.3.
Figure 3.3
You will notice that above the Private Sub structure there is a preceding
keyword Public Class Form1 . This has to do with the concept of the
object-oriented programming language. When we start a windows
application in Visual Basic 2022, we will see a default form with the name
Form1 appear in the IDE, it is the Form1 Class that inherits from the Form
class [Link] .
Now, let us write a code that perform arithmetic calculation, as in Example
3.2
Example 3.3 Arithmetic Calculations

Private Sub Form1_Load(sender As Object, e As EventArgs) Handles

[Link]

MsgBox("2" & "+" & "5" & "=" & 2 + 5)

End Sub
*The symbol & (ampersand) is to perform string concatenation. The output
is as shown in Figure 3.4
Figure 3.4

Summary
● In section 3.1, you have learned the concepts of event driven
programming.
● In section 3.2, you have learned how to write code for the controls.
Chapter 4 Working with Controls

In this chapter, we shall learn how to work with some common controls and
write codes for them. Some of the commonly used controls are Label,
TextBox, Button, ListBox and ComboBox. In this chapter, we shall only
deal with TextBox , Label, ListBox and ComboBox. We shall deal with the
other controls later.
4.1 TextBox

TextBox is the standard control for accepting inputs from the user as well as

to display the outputs. It can handle string and numeric data but not images

or pictures. String in a TextBox can be converted to numeric data by using

the function Val(text) . The following example illustrates a simple program

that processes the input from the user.

Example 4.1 Adding two numbers

In this program, add two text boxes and a button on the form. The two text
boxes are for accepting inputs from the user. Besides that, we program the
button to calculate the sum of the two numbers using the plus operator. The
value in a text box is stored using the syntax [Link] , where Text
is one of the properties of TextBox.
The following code will add the value in TextBox1 and the value in
TextBox2 and displays the sum in a message box. The runtime interface is
illustrated in Figure 4.1.

Private Sub Button1_Click(sender As Object, e As EventArgs) Handles

[Link]
MsgBox("The sum is" & Val([Link]) + Val([Link]))
End Sub
Figure 4.1
After clicking the Add button, you will obtain the answer in a message box,
as shown in Figure 4.2.

Figure 4.2
4.2 Label
Label is used for multiple purposes like providing instructions and guides to
the users, displaying outputs and more. It is different from the TextBox
because it is read only, which means the user cannot edit its content at
runtime. Using the syntax [Link] , it can display string as well as
numeric data. You can change its text property in the properties window or
at runtime by writing an appropriate code.
Example 4.2 Display the output on a Label

Based on Example 4.1, we add two Labels, one is for displaying the text
Sum= and the other Label is to display the answer of the Sum. For the first
Label, change the text property of the label by typing Sum= over the default
text Label1. Further, change its font to bold and its font size to 10. For the
second label, delete the default text Label2 and change its font to bold and
the font size to 10. Besides that, change its background color to white.
In this program, instead of showing the sum in a message box, we display
the sum on the Label.
The Code

Private Sub Button1_Click(sender As Object, e As EventArgs) Handles

[Link]
[Link] = Val([Link]) + Val([Link])
End Sub

*The function Val is to convert text to numeric value. Without using Val ,
you will see that two numbers are joined without adding them.
The output is as shown in Figure 4.3
Figure 4.3
4.3 ListBox
ListBox is a control that displays a list of items. It allows the user to click
and select the items from the list. Items can be added by the programmer at
design time or at runtime using a code. We can also write code to allow the
user to add items to the ListBox or remove the items from it.
4.3.1 Adding Items to ListBox

a) Adding items using the String Collection Editor

To demonstrate how to add items at design time, start a new project and

insert the ListBox control on the form. Next, right-click on the list box to

access the properties window. In the properties window, click on collection

of the Item property to open the String Collection Editor . In the Editor, enter

one item at a time, pressing the Enter key after each item, as shown in Figure

4.4. After clicking the OK button, the items will be displayed in the list box,

as shown in Figure 4.5

Figure 4.4

Figure 4.5
b) Adding Items using the Add () Method
Items can also be added at runtime using the Add() method. Before we
proceed further, we should know that Visual Basic 2022 is an object-oriented
programming language. Therefore, visual basic 2022 comprises objects. All
objects have methods and properties. They can be differentiated and
connected by a hierarchy. For ListBox, an Item is an object subordinated to
the object ListBox . The Item object comprises a method call Add() that is
used to add items to the list box. To add an item to the list box, use the
following syntax:

[Link]("Text")

Example 4.3 Adding an Item to ListBox

In this example, running the program will add the item “Vivo” to the end of
the list, as shown in Figure 4.6

Private Sub BtnAdd_Click(sender As Object, e As EventArgs) Handles

[Link]
[Link]("Vivo")
End Sub
Figure 4.6
Example 4.4 Adding Items using InputBox

This program allows the user to add items via an input box. First, we create a
variable myitem and then assign a value to it via the InputBox function.
We use the Add () method to add the user’s item into the list box. The code
is as follows:

Private Sub Button1_Click(sender As Object, e As EventArgs) Handles

[Link]

Dim myitem 'declare the variable myitem

myitem = InputBox("Enter your Item")
[Link](myitem)

End Sub
The runtime interface is as shown in Figure 4.7

Figure 4.7
After typing the item ‘Vivo” in the input box, the item will be added to the
list box, as shown in Figure 4.8.
.

Figure 4.8
Example 4.5 Geometric Progression

This is a program that generates a geometric progression and displays the

results in a list box. Geometric progression is a sequence of numbers where
each subsequent number is found by multiplying the previous number with a
fixed number. This fixed number is called the common ratio. The common
ratio can be a negative number, an integer, a fraction, and any number but it
must not be a zero or 1.

n-1
The formula to find the nth term of the geometric progression is ar ,

where a is the first number and r is the common ratio.

In this program, we employ the Do...Loop Until statement to generate the

numbers in a geometric progression. To design the UI, we insert three text
boxes for the user to enter the first number, the common ratio and the
number of terms. We also insert a list box to display the generated numbers.
Besides that, a command button is needed for the user to click and generate
the geometric progression. In addition, we also add a button for clearing the
list of generated numbers.
To add the numbers to the list box, we use the Add() method. The syntax is
[Link](x) , where x can be any variable.
The code

Private Sub BtnComp_Click(sender As Object, e As EventArgs) Handles

[Link]
Dim x, n, num As Double
Dim r As Double
x = [Link]
r = [Link]
num = [Link]
 [Link]("n" & vbTab & "x")
[Link]("___________")

n=1
Do
x=x*r
[Link](n & vbTab & x)
n=n+1
Loop Until n = num + 1
End Sub

Private Sub BtnClr_Click(sender As Object, e As EventArgs) Handles

[Link]
[Link]()
End Sub

The output is as shown in Figure 4.9

Figure 4.9 The runtime interface

4.3.2 Removing Items from a List Box

To remove items at design time, simply open the String Collection Editor

and delete the items line by line or all at once using the Delete key. To

remove the items at runtime, you can use the Remove method, as illustrated

in Example 4.6.

Example 4.6 Removing Items from ListBox

In this example, add a button and label it “Remove Items”. Click on this
button and enter the following code

Private Sub Button2_Click(sender As Object, e As EventArgs) Handles

[Link]
[Link]("iPhone")
End Sub

The item “iPhone” will be removed after running the program, as shown in
Figure 4.10
Figure 4.10

Example 4.6 Removing an Item from ListBox via an Input Box

You can allow the user to choose an item to delete via an input box. To add
this capability, insert a button at design time and change its text to Delete
Item. Click on the button and enter the following statements in the code
window:

Private Sub BtnDelete_Click(sender As Object, e As EventArgs)

Handles [Link]
Dim myitem
myitem = InputBox("Enter your Item for Deletion")
[Link](myitem)
End Sub
The runtime interface is as shown in Figure 4.11. After entering the item
iPhone in the input box and press OK, the item iPhone will be deleted from
the list box.

Figure 4.11
To remove a selected item from the list box, using the following syntax:
[Link]([Link])

Example 4.7 Delete a Selected Item from ListBox

Private Sub BtnDelSel_Click(sender As Object, e As EventArgs)

Handles [Link]
[Link]([Link])
End Sub

When the user run the program and select an item to delete, the item will be
deleted, as shown in Figure 4.12 and Figure 4.13.
Figure 4.12

Figure 4.13
To remove multiple selected items from the list box, you must use the
If...End If statements together with the For...Next loop. Besides that, you
must ensure that the list box allows multiple selection. To enable multiple
selection, set the selection mode to MultipleSimple in the ListBox
properties window. The code is as shown in Example 4.8.
Example 4.8 Delete Multiple Selected Items from ListBox
In this example, add an extra button to the previous example and label it as
Clear Selected Items. Key in the following code:

Private Sub BtnDelSelected_Click(sender As Object, e As EventArgs)

Handles [Link]
If [Link] > 0 Then
For n As Integer = [Link] - 1 To 0 Step
-1
'remove the current selected item from items
[Link]([Link](n))
Next n
End If
End Sub

To clear all the items at once, use the clear method, as illustrated in
Example 4.8.
Example 4.9 Clear All Items from ListBox
In this example, add a button and label it “Clear the List”

Private Sub BtnClr_Click(sender As Object, e As EventArgs) Handles

[Link]
[Link]()
End Sub
When you run the program and click the “Clear the List” button, all the items
will be cleared. The design interface for removing the items from the list box
is as shown in Figure 4.14

Figure 4.14
4.4 ComboBox
The function of the combo box is to present a list of items where the user
can click and select the items from the list. However, in contrast to the list
box, combo box only displays one item at runtime and the user needs to
click on the handle (small arrowhead) on the right of the combo box to see
all the items that are presented in a drop-down list.
4.4.1 Adding Items to ComboBox

In order to add items to the combo box at design time, use the String

Collection Editor as shown in Figure 4.15. Besides that, if you want to

display an item as the default text in the combo box when you run the

program, enter the name of the item by replacing the text property of the

combo box.
Figure 4.15
Clicking the handle of the right side of the combo box at runtime reveals
the items, as shown in Figure 4.16

Figure 4.16
Besides that, you may add items using the Add() method, as shown in
Example 4.10.
Example 4.10 Adding an Item to ComboBox

Private Sub Button1_Click(sender As Object, e As EventArgs) Handles

[Link]
[Link]("Vivo")
End Sub

The output is as shown in Figure 4.17

Figure 4.17
You can allow the user to add items via an input box, as in Example 4.11
Example 4.11 Adding an Item to ComboBox via an Input Box

Private Sub Button1_Click(sender As Object, e As EventArgs) Handles

[Link]
 Dim myitem
myitem = InputBox("Enter your Item")
[Link](myitem)
End Sub

The runtime interface is as shown in Figure 4.18

Figure 4.18
After you type the item ‘Xiaomi’ and click Ok, the item will be added to the
combo box, as shown in Figure 4.19.
Figure 4.19
4.4.2 Removing Items from a Combo box

To remove items from the combo box at design stage, simply open the

String Collection Editor and delete the items line by line or all at once using

the Delete key.

To remove the items at runtime, you can use the Remove method, as
illustrated in the Example 4.12. In this example, add a second button and
label it “Remove Items”.
Example 4.12 Delete an Item from ComboBox

Private Sub Button2_Click(sender As Object, e As EventArgs) Handles

[Link]
[Link]("iPhone")
End Sub
The item “iPhone” will be removed after running the program. You can also
let the user select a certain item to delete, as in Example 4.13.
Example 4.13 Delete a Selected Item from ComboBox

Private Sub Button1_Click(sender As Object, e As EventArgs) Handles

[Link]
[Link]([Link])
End Sub

To clear all the items at once, use the clear method, as illustrated in
Example 4.14
Example 4.14 Remove All Items from ComboBox

Private Sub Button3_Click(sender As Object, e As EventArgs) Handles

[Link]
[Link]()
End Sub

Summary
● In section 4.1, you have learned how to work with a text box.
● In section 4.2, you have learned how to work with a label
● In section 4.3.1, you have learned how to add items to a list box
● In section 4.3.2, you have learned how to remove items from a list box.
● In section 4.4.1, you have learned how to add items to a combo box
● In section 4.4.2, you have learned how to remove items from a combo
box
Chapter 5 Handling Images

In this chapter, we shall learn how to load an image into the picture box at
design time and at runtime. In addition, we shall also learn how to use a
common dialog control to browse for image files in your local drives and
then select and load an image into the picture box.
5.1 Loading an Image in a Picture Box
5.1.1 Loading an Image at Design Time
Let us create an image viewer. To design the UI, insert a picture box in the
form. Next, change its border property to FixedSingle and its background
color to white. Besides that, change the SizeMode property of the image to
StretchImage so that the image can fit in the picture box.
Now, right click on the picture box to bring out its properties window. In the
properties window, scroll to the Image property, as shown in Figure 5.1. In
the properties window, click on the grey button on the right of the Image
item to bring out the “Select Source” dialog box, as shown in Figure 5.2

Figure 5.1
Figure 5.2
The next step is to select a local resource and click on the Import button to
view the available image files in your local drives, as shown in Figure 5.3.
Finally, select the image you like and then click the open button, the image
will be displayed in the picture box, as shown in Figure 5.4
Figure 5.3
Figure 5.4

5.1.2 Loading an Image at Runtime

To load an image at runtime, use the code as in Example 5.1.

Example 5.1 Loading an Image at Runtime

Private Sub Form1_Load(sender As Object, e As EventArgs) Handles

[Link]
[Link] = [Link]("C:\Users\Documents\My
Websites\vbtutor\images\vb6_cover.jpg")
End Sub
* You must search for an image in your local drive and determine its path.
Running the program will display the same image in the picture box as in
Figure 5.4
5.2 Loading an Image using Open File Dialog
Control
We have learned how to load an image in a picture box at the design phase
using the properties window. Next, we shall learn how to load an image
using the OpenFileDialog controls.
First, we must add the OpenFileDialog control on the form. This control
will be invisible during runtime, but it facilitates the process of launching a
dialog box and letting the user browse his or her local drives, then select
and open a file. For the OpenFileDialog to display all types of image files,
we must specify the types of image files under the Filter property. Before
that, rename OpenFileDialog as OFGSelectImage . Next, right click on
the OpenFileDialog control to access its properties window. Beside the
Filter property, specify the image files using the format:

JPEG Files| *.JPG|GIF Files|*.GIF|WIndows Bitmaps|*.BMP

as shown in Figure 5.5. These are the common image file formats. Besides
that, you also must delete the default Filename.
Figure 5.5
Next, double-click on the View button and enter the code as in Example 5.2
Example 5.2 Loading an Image via a Dialog Box

Private Sub BtnLoadImg_Click(sender As Object, e As EventArgs)

Handles [Link]
If [Link] = [Link]
Then
[Link] = [Link]([Link])
End If
End Sub

Press F5 to run the program and click the View button, a dialog box
showing all the image files will appear, as shown in Figure 5.6
Figure 5.6
Notice that the default image file is JPEG as we have placed it in the first
position in the Filter property. Selecting and opening an image file will load
it in the picture box, as shown in Figure 5.7
Figure 5.7

Summary
● In section 5.11, you have learned how to load an image at design time
using the properties window.
● In section 5.1.2, you have learned how to load an image at runtime.
● In section 5.2, you have learned how to load an image using the
OpenFileDialog control.