Visual Basic 2017

Made Easy

By

Dr.Liew
 1

Disclaimer
Visual Basic 2017 Made Easy is an independent publication and is not affiliated with, nor
has it been authorized, sponsored, or otherwise approved by Microsoft Corporation.

Trademarks
Microsoft, Visual Basic, Excel and Windows are either registered trademarks or

trademarks of Microsoft Corporation in the United States and/or other countries.

All other trademarks belong to their respective owners.

Liability
The purpose of this book is to provide basic guides for people interested in Visual

Basic 2017 programming. Although every effort and care has been taken to make

The information as accurate as possible, the author shall not be liable for any error,

Harm or damage arising from using the instructions given in this book​.

Copyright ® 2017 Liew Voon Kiong

All rights reserved. No Part of this e-book may be reproduced, in any form or by any means,
without permission in writing from the author.
 2

Acknowledgement

I would like to express my sincere gratitude to many people who have made their
contributions in one way or another to the successful publication of this book.
My special thanks go to my children Xiang, Yi and Xun who have contributed their ideas
and help in editing this book. I would also like to appreciate the support provided by my
beloved wife Kim Huang and my youngest daughter Yuan. I would also like to thank the
millions of readers who have visited my ​Visual Basic Tutorial ​website at ​vbtutor.net for
their support and encouragement.

About the Author

Dr. Liew Voon Kiong holds a bachelor’s degree in Mathematics, a master’s degree in
Management and a doctorate in Business Administration. He has been involved in Visual
Basic programming for more than 20 years. He created the popular online Visual Basic
Tutorial at ​www.vbtutor.net​, which has attracted millions of visitors since 1996. It has
consistently been one of the highest ranked Visual Basic websites.

To provide more support for Visual Basic students, teachers, and hobbyists, Dr. Liew has
written this book to complement the free Visual Basic 2017 tutorial with much more content.
He is also the author of the Visual Basic Made Easy series, which includes ​Visual Basic 6
Made Easy, Visual Basic 2008 Made Easy, Visual Basic 2010 Made Easy, Visual Basic
2013 Made Easy ​and ​Excel VBA Made Easy. ​Dr. Liew’s books have been used in high
school and university computer science courses all over the world.
 3

Contents
Chapter 1 Introduction to Visual Basic 2017 11
1.1 A Brief Description of Visual Basic 2017 11
1.2 The Visual Studio 2017 IDE 13
1.3 Creating a New Project in Visual Studio 2017 14
Chapter 2 Designing the Interface 19
2.1 Customizing the Form 19
2.2 Adding Controls to the Form 24
Chapter 3 Writing the Code 27
3.1 The Concept of Event-Driven Programming 27
3.2 Writing the Code 29
Chapter 4 Working with Controls 31
4.1 TextBox 31
Example 4.1 Adding two numbers in two text boxes 31
4.2 Label 32
Example 4.2 Displaying output on a Label 33
4.3 List Box 34
4.3.1 Adding Items to the List Box 34
a) Adding items using the String Collection Editor 34
b) Adding Items using the Add() Method 35
Example 4.3 Adding an Item to a List Box 35
Example 4.4 Adding items to a List Box via an input box 36
Example 4.5 Creating Geometric Progression 37
4.3.2 Removing Items from a List Box 39
Example 4.6 Removing an item from a list box 39
Example 4.7 Deleting an item from a list box via an input box 40
Example 4.8 Removing a selected item from a list box 41
Example 4.9 Removing multiple selected items in a list box 41
Example 4.10 Removing all items in a list box using the Clear method 41
4.4 ComboBox 42
4.4.1 Adding Items to a combo box 42
4.4.2 Removing Items from a Combo box 46
Chapter 5 Handling Images 47
5.1 Loading an Image in a Picture Box 47
 4

5.1.1 Loading an Image at Design Time 47

5.1.2 Loading an Image at Runtime 50
5.2 Loading an Image using Open File Dialog Control 50
Chapter 6 Working with Data 54
6.1 Data Types 54
6.1.1 Numeric Data Types 54
6.1.2 Non-numeric Data Types 55
6.1.3 Suffixes for Literals 56
6.2 Variables and Constants 56
6.2.1​ Variable Names 56
6.2.2 Declaring Variables 57
Example 6.1 Declaring Variables using Dim 57
Example 6.2 Displaying Message using MsgBox 58
6.2.3 Assigning Values to Variables 58
Example 6.3 Incompatible Data Type 59
6.2.4 Scope of Declaration 60
6.2.5 Declaring Constants 61
Example 6.4 Calculating the Area of Triangle 61
Chapter 7 Array 62
7.1 Introduction to Arrays 62
7.2 Dimension of an Array 62
7.3 Declaring Arrays 63
Example 7.1 Find the Length of an Array 63
Example 7.2 Using the Length Property 64
Example 7.3 Find the Length of a Two-Dimensional Array 64
Example 7.4 Populating a List Box Involving an Array 65
Chapter 8 Performing Mathematical Operations 67
8.1 Mathematical Operators 67
8.2 Writing Code that Performs Mathematical Operations 68
Example 8.1 Standard Arithmetic Calculations 68
Example 8.2 ​Pythagorean Theorem 68
Example 8.3: BMI Calculator 69
Chapter 9 String Manipulation 71
9.1 String Manipulation Using + and & signs 71
 5

Example 9.1 String Concatenation 71

Example 9.2 Data Mismatch 72
9.2 String Manipulation Using Built-in Functions 74
9.2.1 Len Function 74
Example 9.3 Finding the Length of a Phrase 74
9.2.2 Right Function 75
Example 9.4 Extracting the Right Portion of a Phrase 75
9.2.3 Left Function 75
9.2.4 Mid Function 76
Example 9.5 Retrieve Part of a Text Using Mid Function 76
Example 9.6 Extracting Text from a Phrase 76
9.2.5 Trim Function 77
Example 9.7 Trimming Both Side of a Phrase 77
9.2.6 Ltrim Function 77
9.2.7 The Rtrim Function 78
9.2.8 The InStr function 78
9.2.9 Ucase and the Lcase Functions 78
9.2.10 Chr and the Asc functions 78
Chapter 10 Using If…Then…Else 80
10.1 Conditional Operators 80
10.2 Logical Operators 81
10.3 Using If...Then...Else 81
10.3.1 If…Then Statement 81
Example 10.1 Lucky Draw 82
10.3.2 If...Then…Else Statement 82
Example 10.2 Lucky Draw Simulation 82
Example 10.3 Lucky Draw 84
10.3.3 If….Then…ElseIf Statement 85
Example 10.4 Grade Generator 86
Chapter 11 Using Select Case 88
Example 11.1: Examination Grades 88
Example 11.2 Using Case Is 89
Example 11.3 Select Case using a Range of Values 90
Example 11.4 Examination Grade 91
 6

Chapter 12 Looping 93
12.1 For…Next Loop 93
Example 12.1 Creating a Counter 93
Example 12.2 Sum of Numbers 93
Example 12.3 Step-down For Next Loop 94
Example 12.4 Demonstrate Exit For 94
12.2 Do Loop 94
Example 12.5 Do While…Loop 95
Example 12.6 Summation of Numbers 95
12.3 While…End While Loop 96
Example 12.3 Demonstrating While…End While Loop 96
Chapter 13 Sub Procedures 98
13.1 What is a Sub Procedure 98
Example 13.1 A Sub Procedure that Adds Two Numbers 98
Example 13.2: Password Cracker 99
Chapter 14 Creating Functions 102
14.1 Creating User-Defined Functions 102
Example 14.1: BMI Calculator 102
Example 14.2 Future Value Calculator 104
14.2 Passing Arguments by Value and by Reference 105
Example 14.3 ByRef and ByVal 106
Chapter 15 Mathematical Functions 108
15.1 The Abs Function 108
Example 15.1 Compute Absolute Number 108
15.2 The Exp function 109
Example 15.2 Compute Exponential Value 109
15.3 The Fix Function 110
Example 15.3 Truncate Decimals using Fix 110
15.4 The Int Function 111
15.5 The Log Function 111
Example 15.4 Calculate Logarithm of a Number 111
15.6 The Rnd( ) Function 112
15.7 The Round Function 113
Example 15.6 Rounding a Number 113
 7

Chapter 16 The Format Function 115

16.1 Format Function for Numbers 115
16.1.1 Built-in Format function for Numbers 115
Example 16.1 Formatting Numbers 116
16.1.2 User-Defined Format 116
Example 16.2 User-Defined Formats 117
16.2 Formatting Date and Time 118
16.2.1 Formatting Date and time using predefined formats 118
Example 16.3 Formating Date and Time 119
16.2.2 Formatting Date and time using user-defined formats 120
Example 16.4 Formatting Date and Time 120
Chapter 17 Using Checkbox and Radio Button 122
17.1 Check Box 122
Example 17.1: Shopping Cart 122
Example 17.2 Another Shopping Cart 124
Example 17.3 Formatting Text 124
17.2 Radio Button 126
Example 17.4 Shopping Cart 126
Example 17.2 Using Groupbox 128
Chapter 18 Errors Handling 130
18.1 Introduction 130
18.2 Using On Error GoTo Syntax 130
Example 18.1 Division Errors 131
18.3 Errors Handling using Try...Catch...End Try Structure 132
Example 18.2 Data Type Mismatch Error 133
Chapter 19 Object Oriented Programming 135
19.1 Concepts of Object-Oriented Programming 135
19.1.1 Encapsulation 135
19.1.2 Inheritance 135
19.1.3 Polymorphism 135
19.2 Creating Class 136
Example 19.1 BMI Calculator 137
Chapter 20 Creating Graphics 140
20.1 Introduction 140
 8

20.2 Creating the Graphics Object 141

20.3 Creating the Pen Object 141
20.4 Drawing a Line 142
Example 20.1 Drawing a Straight Line 142
20.5 Drawing Lines that Connect Multiple Points 143
Example 20.2 Drawing Lines that Connect Multiple Points 144
20.6 Drawing a curve that Connect Multiple Points 145
Example 20.3 Drawing a Curve that Connect Multiple Points 145
20.7 Drawing Quadratic Curve 146
Example 20.4 Drawing a Quadratic Curve 146
20.8 Drawing Sine Curve 148
Example 20.5 Drawing a Sine Curve 149
20.9 Drawing a Rectangle 150
20.10 Customizing Line Style of the Pen Object 151
Example 20.6 Drawing a Rectangle with DashStyle 152
20.11 Drawing an Ellipse 153
Example 20.7 Drawing an Ellipse 154
Example 20.8 Drawing an Ellipse 156
20.12 Drawing a Circle 156
Example 20.9 Draw a Circle 156
20.13 Drawing Text 157
Example 20.10 Drawing Text 158
Example 20.11 Drawing Text Input by the User 160
20.14 Drawing Polygons 161
Example 20.12 Drawing a Triangle 162
Example 20.13 Drawing a Quadrilateral 163
20.15 Drawing a Pie 164
Example 20.14 Drawing a pie that sweeps clockwise through 60 degree. 164
20.16 Filling Shapes with Color 165
Example 20.15 Drawing and Filling a Rectangle with Color 165
Example 20.16 Drawing and Filling an Ellipse with Color 167
Example 20.17 Drawing and Filling a Polygon with Color 168
Example 20.18 Drawing and Filling a Pie 169
Chapter 21 Using Timer 171
 9

Example 21.1 Creating a Digital Clock 171

Example 21.2 Creating a Stopwatch 172
Example 21.3 Creating a Digital Dice 174
Chapter 22 Creating Animation 176
Example 22.1 Creating Moving Object 176
Example 22.2 Creating an Animated Dice 177
Example 22.3 Creating a Slot Machine 180
Chapter 23 Working with Databases 184
23.1 Introduction to Database 184
23.2 Creating a Database Application 185
23.3 Creating Connection to a Database using ADO.NET 186
23.4 Populating Data in ADO.NET 194
Example 23.1 Creating a Database 196
23.5 Browsing Records 197
23.6 Editing, Saving, Adding and Deleting Records 198
Example 23.2 Browsing Records 199
23.7 Accessing Database using DataGridView 202
Example 23.3 Browsing Data Using DataGridView 203
23.8 Performing Arithmetic Calculations in a Database 204
Example 23.4 Performing Arithmetic Calculation 204
Example 23.5 Calculating Average 206
Example 23.6 Using SQL Count Function 207
Chapter 24 Reading and Writing Text Files 210
24.1 Introduction 210
24.2 Reading a Text File 210
24.3 Writing to a Text File 214
Chapter 25 Building Console Applications 217
Example 25.1: Displaying a Message 219
Example 25.2 Creating a Text File Writer in Console 220
Example 25.3 Creating a Text File Reader in Console 221
Example 25.4 Creating a Console App using If...Then....Else 222
Chapter 26 Creating Menu Bar and Toolbar 225
26.1 Creating Menu Items on the Menu Bar 225
26.2 Creating the Toolbar 233
 10

Chapter 27 Deploying your VB 2017 Applications 239

Appendix 244
Index 245
 11

Chapter 1 Introduction to Visual Basic 2017

❖ A brief description of Visual Basic 2017

❖ Getting to know the Visual Basic 2017 Integrated Development Environment

1.1 A Brief Description of Visual Basic 2017

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. Visual
Basic 6 is a user-friendly programming language designed for beginners. Many developers
still favor VB6 over its successor VB.NET.

In 2002, Microsoft released Visual Basic.NET(VB.NET) to replace Visual Basic 6.

Thereafter, Microsoft declared VB6 a legacy programming language in 2008. However,
Microsoft still provides some form of support for VB6. VB.NET is a fully object-oriented
programming language implemented in 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 VB.NET. They are Visual Basic
2005, Visual Basic 2008, ​Visual Basic 2010​, Visual Basic 2012, ​Visual Basic 2013​, Visual
Basic 2015 and ​Visual Basic 2017​. Although the .NET portion was discarded in 2005, all
versions of the Visual Basic programming language released since 2002 are regarded as
VB.NET programming language

Visual Basic 2017 was released in 2017. It is bundled as a .NET desktop development
component Visual Studio 2017. VB2017 can be used to build windows desktop applications
using the .NET framework. Besides that, Visual Studio Community 2017 also comes with
other Windows development tools that include Universal Windows Platform Development
that creates applications for the Universal Windows Platform with C#, VB , JavaScript and
C++. On top of that, it also includes Desktop Development with C++.
 12

In addition, to cater for the increasing needs of web and cloud-based applications, VS2017
also provides the Web and Cloud development tools that include ASP.NET, Python, Azure
SDK, Node.js, data storage and processing, data science and analytical applications as
well as Office/SharePoint development. Furthermore, VS2017 also cater for the
development of mobile applications by including the mobile and gaming tools like mobile
development with .NET, game development with Unity, mobile development with
JavaScript, mobile development with C++ and game development with C++. With the
mobile development and gaming tools, you can build IOS and Android mobile apps and
mobile games.

You can download Visual Studio 2017 from the following link:

https://visualstudio.microsoft.com/vs/older-downloads/

After downloading the file, run the VS2017RC community installer file. If you receive a User
Account Control notice, click Yes. Next, it will ask you to acknowledge the Microsoft
License Terms and the Microsoft ​Privacy Statement​, as shown in Figure 1.1. Click Install to
continue.

Figure 1.1

You will see several status screens that show the progress of the installation. After
installation completed, you can select the feature set that you want, as shown in Figure 1.2.
Since we are keen on developing Visual Basic 2017 desktop app, we will select the .NET
 13

desktop development component. Besides that, you might want to install a language by
clicking the Language packs. After making your selections, click install.

Figure 1.2

Upon completion of the installation, you can start programming in Visual Basic 2017.

1.2 The Visual Studio 2017 IDE

When you launch Microsoft Visual Studio 2017, you will be presented with the Start Page of
Microsoft VS 2017, as shown in Figure 1.3
 14

Figure 1.3 Visual Studio 2017 IDE

The Visual Studio 2017 start page comprises a few sections, the Get Started section, the
Recent section, the Open section, the New project section and the Developers News
section. In the start page, you can either start a new project, open a project or open a
recent project. Besides that, you can also check for the latest news in Visual Studio 2017
for Windows Desktop. The Start Page also consists of a menu bar and a toolbar where you
can perform various tasks by clicking the menu items.

1.3 Creating a New Project in Visual Studio 2017

To start a new Visual Studio 2017 project, click on New Project under the Start section to
launch the Visual Studio 2017 New Project page as shown in Figure 1.4. You can also
choose to open a recent project:
 15

Figure 1.4 ​Visual Studio 2017 New Project Page

The New Project Page comprises a few templates, among them are Visual Basic, Visual C#
and Visual C++. Since we are only learning Visual Basic 2017, we shall select Visual Basic.
Visual Basic 2017 offers you several types of projects that you can create; they are ​Blank
Apps,​ ​Windows Forms APP(.NET Framework), WPF App(.NET Framework), Console
App(.NET Framework) ,Class ​Library(.NET Framework), Shared Project and more. Since
we are only learning how to create windows desktop applications, we shall select Windows
Forms App.

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 2017
Program. After you have renamed the project, click OK to continue. The Visual Basic 2017
IDE Windows will appear, as shown in Figure 1.5. Visual Basic 2017 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 a programmer to
develop his or her Visual Basic 2017 programs.
 16

Figure 1.5 The Visual Basic 2017 Express IDE

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

Figure 1.6 Visual Basic 2017 Express Toolbox

Next, we shall proceed to show you how to create your first program. First, change the text
of the form to 'My First Visual Basic 2017 Program' in the properties window; it will appear
as the title of the program. Next, insert a button and change its text to OK. The design
interface is shown in Figure 1.7

Figure 1.7 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.6:

MsgBox("My First Visual Basic 2017 Program")

Now click on the Start button on the toolbar or press F5 to run the program then click on the
OK button, a dialog box that displays the “My First Visual Basic 2017 Program" message
will appear, as shown in Figure 1.8. The function ​MsgBox is a built-in function of Visual
Basic 2017 which can display the text enclosed within the brackets
 18

Figure 1.8 Visual Basic 2017 Code Window

Figure 1.9 The Runtime Interface

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

Chapter 2 Designing the Interface

❖ Customizing
❖ Adding controls
❖ Setting Control Properties

Since Visual Basic 2017 is a GUI-based programming language, the first step in developing
an application is to build a graphical user interface. To build a graphical user interface, you
need to customize the default form by changing its properties at design phase and at
runtime. After customizing the default form, you may proceed to add controls from the
toolbox to the form and then customize their properties.

2.1 Customizing the Form

When you start a new Visual Basic 2017 project, the VS2017 IDE will display the default
form along with the Solution Explorer window and the Properties window for the form as
shown in Figure 2.1. The name of the default form is Form1. The properties window
displays all the properties related to 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, the size and more. Try changing the properties ​in
Table 1.

Table 1

Property Value

Name MyForm

Text My First Visual Basic 2017 Program

BackColor Aqua

ForeColor DarkBlue

MaximizeBox False
 20

In fact, you do not have to type in the color manually, you may select a color from the color
drop-down list that comprises three tabs, Custom, Web, and System, as shown in Figure
2.1. Clicking on 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 in the RGB color code or the hex
color code. The values of R, G and B range from 0 to 255, by varying the values of the RGB
we can obtain different colors. For example, an RGB value of 128, 255, 255 yields the
cyan color.

On the other hand, the hex color code system use 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 in the range 00 to ff (in hexadecimal notation), or 0 to
255 in decimal notation. For example, ​#0000ff represents the cyan color. However, when
you type in the hex color code in the properties window of VS2017, it automatically converts
the color to RGB color or the color name. Figure 2.2 shows a list of Hex color codes and the
corresponding colors.
 21

Figure 2.2 Hex Color Codes

The design interface is shown in Figure 2.2 and the runtime interface is shown in Figure
2.4. In the runtime interface, notice that the title has been changed from Form1 to My First
Visual Basic 2017 Program, background color changed to aqua , the text OK color has
been changed to dark blue and the window cannot be maximized.
 22

Figure 2.3

Figure 2.4

You can change the properties of the form at run-time by writing the relevant code. The
default form is an object and an instant of the form can be denoted by the name ​Me​. ​The
property of the object is defined by specifying the object’s name followed by a period:

ObjectName.property

For example, we can set the background of the form to blue using the following code:

Me​.BackColor=Color.Blue

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

Me.BackColor = Color.FromArgb(0, 255, 0)

To achieve the same interface as shown in Figure 2.4, use following code :

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

MyBase.Load
Me.Text = "My First Visual Basic 2017 Program"
Me.BackColor = Color.Cyan
 23

Me.MaximizeBox = False
Me.MinimizeBox = True
End Sub

Instead of using the color name cyan, you can use RGB code, as follows:

Me.BackColor = Color.FromArgb(0,255,255)

Press F5 to run the program and you will get the exact interface as that shown in Figure
2.4. In addition, you can also specify the size, the opacity and the position of the default
form using the code, as follows:

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

MyBase.Load
Me.Text = "My First VB2017 Project"
Me.BackColor =Color.Beige
Me.MaximizeBox = False
Me.MinimizeBox = True
Me.Size = New Size(400, 400)
Me.Opacity = 0.85
Me.CenterToParent()
End Sub

The runtime interface is as shown in Figure 2.5

 24

Figure 2.5

2.2 Adding Controls to the Form

In section 2.1, we have learned how to build an initial interface in Visual Basic 2017 by
customizing the default form. Next, we shall continue to build the interface by adding some
controls to the form. The controls are objects that consist of three elements, i.e. properties,
methods, and events. Controls can be added to the form from the Toolbox. ​Among the
controls, the most common ones are the button, label, textbox, list box, combo box, picture
box, checkbox, radio button and more. The controls can be made visible or invisible at
runtime. However, some controls will only run in the background and cannot be seen at
runtime, one such control is the timer.

The Toolbox is usually hidden when you start Visual Basic 2017 IDE, you need to 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.
 25

Figure 2.6: Toolbox

You can drag the Toolbox to any position you like. 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, and as one of the tabbed windows together
with the Form Design window and the code window, as shown in Figure 2.7.
 26

Figure 2.7

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. We suggest
that you place the toolbox alongside or at the bottom of the default form so that it is easy for
you to add controls from the toolbox into the form.

Figure 2.8

To add a control to the form, click the control and drag it onto the form. You can drag the
control around in the form and you can also 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 yet functional until we write code to it. We shall deal
with the programming part in the coming chapters.
 27

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.
 28

Chapter 3 Writing the Code

❖ Learn the basics of writing code

In the previous chapter, we have learned how to design the user interface by adding
controls to the form and by changing their properties. However, the user interface alone will
not work without adding code to them. In this chapter, we shall learn how to write code for
all the controls so that they can interact with the events triggered by the users. Before
learning how to write code, let us delve into the concept of event-driven programming

3.1 The Concept of Event-Driven Programming

Visual Basic 2017 is an event-driven programming language. Event-driven means that the
code is executed in response to events triggered by the user actions like clicking the
mouse, pressing a key on the keyboard, selecting an item from​ a drop-down list, typing
some words into textbox and more. It may also be an event that runs in response to some
other programs. ​Some of the common events in Visual Basic 2017 are load, click,
double-click, drag and drop, pressing the keys and more.

Every form and every control you place on the form has a set of events related to them. To
view the events, double-click the control (object) on the form to enter the code window. The
default event will appear at the top part on the right side of the code window. You need to
click on 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 (its name has been changed
to PicViewer therefore you can see the words PicViewer events) and Figure 3.2 shows the
events associated with button.
 29

Figure 3.1: Events associated with Form

Figure 3.2: Events associated with the button

 30

3.2 Writing the Code

To start writing the code, click on any part of the form to go into the code window as shown
in Figure 3.1. The event procedure is to load Form1 and it starts with the keywords ​Private
Sub​ and ends with ​End Sub​. This procedure includes the Form1 class and the event Load,
and they are bind 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 statement.

MsgBox ( "Welcome to Visual Basic 2017")

The Code

Public Class Form1

Private Sub Form1_Load(sender As Object, e As EventArgs) Handles
MyBase.Load
MsgBox ( "My First Visual Basic 2017 Program", ,"My Message")
End Sub
End Class

MsgBox is a built-in function in Visual Basic 2017 that displays a message in a message
box. The MsgBox function comprises a few arguments, the first is the message and the
third one is the title of the message box. When you run the program, a message box
displaying the text “My First Visual Basic 2017 Program” will appear, as shown in Figure
3.3.

Figure 3.3
 31

You will notice that above Private Sub structure there is a preceding keyword ​Public
Class Form1​. This is the model of an object-oriented programming language. When we
start a windows application in Visual Basic 2017, we will see a default form with the name
Form1 appears in the IDE, it is actually the Form1 Class that inherits from the Form
class ​System.Windows.Forms.Form​. A class has events as it creates an instant of a class
or an object.

You can write code to perform arithmetic calculations. For example, you can use the
arithmetic operator plus to perform addition of two numbers, and display the result in a
message box, as shown below:

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

MyBase.Load
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
 32

Chapter 4 Working with Controls

❖ Learn to work with a text box
❖ Learn to work with a label control
❖ Learn to work with a list box
❖ Learn to work with a combo box

In the preceding chapter, we have learned how to write simple Visual Basic 2017 code. In
this chapter, we shall learn how to write codes for some common controls. Some of the
commonly used controls are label, textbox, button, list box and combo box. However, in this
chapter, we shall only deal with textbox , label, list box and combo box. We shall deal with
the other controls later chapters.

4.1 TextBox
A Textbox is the standard control for accepting inputs from the user as well as to display the
output. It can handle string and numeric data but not images or pictures. String in a textbox
can be converted to a 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 two text boxes

In this program, you add two text boxes and a button on the form. The two text boxes are
for accepting inputs from the user. Besides that, we can also program a button to calculate
the sum of the two numbers using the plus operator. The value in a textbox is stored using
the syntax ​TextBox1.Text​ , 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

Button1.Click

MsgBox("The sum is" & Val(TextBox1.Text) + Val(TextBox2.Text))

End Sub
 33

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

The Label control can be 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 change or edit its content at runtime. Using the syntax
 34

Label.Text​, 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 Displaying 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 the
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 a
label.

The Code

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

Button1.Click
Label2.Text = Val(TextBox1.Text) + Val(TextBox2.Text)
End Sub

*The function Val is to convert text to numeric value. Without using Val, you will see that
two numbers are joined instead of adding them.

The output is as shown in Figure 4.3

 35

Figure 4.3

4.3 List Box

The function of the list box is to present a list of items where the user can 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 list box or
remove the items from the list box.

4.3.1 Adding Items to the List Box

a) Adding items using the String Collection Editor

To demonstrate how to add items at design time, start a new project and insert a list box on
the form then right-click on the list box to access the properties window. Next, click on
collection of the Item property to launch the ​String Collection Editor whereby you can enter
the items one by one by typing the text and press the Enter key, as shown in Figure 4.4.
After clicking on the OK button, the items will be displayed in the text box, as shown in
Figure 4.5