Vb2017me Preview
Vb2017me Preview
Made Easy
Dr.Liew
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
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.
All rights reserved. No Part of this e-book may be reproduced, in any form or by any
means, without
Table of Contents
1.1 A Brief Description of Visual Basic 2017 11
4.1 TextBox 35
Example 4.1 35
4.2 Label 37
Example 4.2 37
4.3 ListBox 38
Example 4.3 40
Example 4.4 41
Example 4.5 44
Example 4.6 45
Example 4.6 46
Example 4.7 46
Example 4.8 47
4.4 ComboBox 47
5.2 Loading an Image in a Picture Box using Open File Dialog Control 57
Example 6.3 65
Example 6.4 66
Example 7.1 72
Example 7.2 72
Example 7.3 73
Example 7.4 73
Example 9.1 80
Example 9.3 83
Example 9.4 84
Example 9.5 85
Example 9.6 86
Example 9.7 87
Example 10.1 92
Example 10.2 93
Example 10.3 94
11.2 The usage of Select Case is shown in the following examples 101
Example 20.14 Drawing a pie that sweeps clockwise through 60 degree. 188
Chapter 1
Introduction to Visual Basic 2017
❖ A brief description of Visual Basic 2017
❖ Getting to know the Visual Basic 2017 Integrated Development
Environment
Visual Basic 2017 was released in 2017. It comes as a .NET desktop development
component of the Visual Studio Community 2017 Release Candidate integrated
development environment(IDE). It is used to build windows desktop applications
using the .NET framework. Besides that, Visual Studio Community 2017 RC 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 include the Desktop
Development with C++.
In addition, to cater for the increasing needs of web and cloud-based applications,
VS2017RC 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 and Office/Sharepoint development. Furthermore,
VS2017 also cater for the development of mobile applications by including the
mobile and gaming tools such as 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 the free version of Visual Studio 2017 RC from the following link:
https://www.visualstudio.com/downloads/
After downloading the file, run the VS2017RC community installer file
vs_community__695901156.1467100807 (7).exe.
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’ll see several status screens that show the progress of the installation. After the
installer has finished installing, it’s time to pick 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 desktop development component. Besides that, you
might want to install a particular language by clicking the Language packs. After
making your selections, click install.
Figure 1.2
Upon completion of the installation, you are now ready to launch Visual Studio 2017
RC and start programming in Visual Basic 2017
When you launch Microsoft Visual Studio 2017 Express, you will be presented with
the Start Page of Microsoft VS 2017, as shown in Figure 1.3
Figure 1.3 Visual Studio Express 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. You can also check for the latest news in Visual Studio 2017
Express 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.
To start a new Visual Studio Express 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:
Figure 1.4 Visual Studio 2017 Express 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 Express 2017 IDE Windows will appear, as shown in Figure 1.5. Visual
Basic Express 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.
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.
Figure 1.6 Visual Basic 2017 Express Tool Box
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
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
Express 2017
● In section 1.3, you have learned how to launch the new project dialog and the
Visual Basic Express 2017 IDE. You have also learned how to write your first
program.
Chapter 2
Designing the Interface
❖ Customizing
❖ Adding controls
❖ Setting Control Properties
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 following properties:
Property Value
Name MyForm
Text My First Visual Basic 2017 Program
BackColor Aqua
ForeColor DarkBlue
MaximizeBox False
In fact, you do not have to type in the color manually, you can indeed select a color
from the color drop-down list that comprises three tabs, Custom, Web, and System,
as shown in the 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 ranges from 0 to 255, therefore, by varying
the values of the RGB we can obtain different colors. For example, a RGB value of
128, 255, 255 yield 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.
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 changed to aqua color ,
the text OK color is dark blue and the window cannot be maximized.
Figure 2.3
Figure 2.4
You can also change the properties of the form at run-time by writing the 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 dot or 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,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:
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, namely properties, methods, and events.They can be added to the form
from the Toolbox. Among the controls, the most common ones are the button, label,
textbox, listbox, combobox, 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 tool box, 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 tool box and choose
dock from the pop-up menu. The docked Toolbox that 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.
Figure 2.7
You can also dock the tool box at the bottom, below the default form, as shown in
Figure 2.8. Further, you may also pin the tool box 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 tool box is entirely up to you but we
strongly suggest that you place the tool box alongside or at the bottom of the default
form so that it is easy for you to add controls from the tool box into the form. 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 need to do is double click it or
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
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
❖ Learn the basics of writing code in Visual Basic 2017
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 Visual Basic 2017 code, let us dwell into the
concept of event-driven programming
Visual Basic 2017 is an event-driven programming language which 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 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 program . 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.
Figure 3.1: Events associated with Form
To start writing code in Visual Basic 2017, 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.
The Code
You will notice that above Private Sub structure there is a preceding keyword Public
Class Form1. This is the concept 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 also write code to perform arithmetic calculation. For example, you can use
the MsgBox and the arithmetic operator plus to perform addition of two numbers, as
shown below:
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