Lesson 5 Working with Controls

In Visual Basic 2019, there are many kinds of controls that you can use to build a VB 2019 app. The controls can be divided into many categories, namely Common Controls, Containers, Menus and Toolbar, Data, Components, Printing, Dialogs and WPF Interoperability. The controls are available in the Toolbox, as shown in Figure 5.1.

5.1 TextBox

In this lesson, you will learn how to work with some of the common controls in Visual Basic 2017. Among the common controls are the label, text box, button, list box, combo box, PictureBox, timer and more. However, we shall only deal with the text box and the label in this lesson. The text box is for accepting input 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 text box can be converted to a numeric data by using the function Val(text). The label control is only for displaying a caption/title or to display an output.

Example 5.1

In this application, add two text boxes and a button to the Form. Change the text of the button to ADD. Next, click on the button and enter the following code:

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

This program will add the value in TextBox1 and the value in TextBox2 and displays the sum in a message box.

The output UI

After clicking the Add button, you will get the answer in a message box, as shown in Figure 5.3:

5.2 The Label

The label can be used to provide instructions and guides to the user as well as to display the output. It is different from the TextBox because it can only display static text, which means the user cannot change the text. Using the syntax Label.Text, it can display text and numeric data. You can change its text in the properties window or program it to change at runtime.

Example 5.2

In this visual basic 2019 application, instead of showing the sum in a message box, we want to display the sum on a Label. This is a simple calculator program that can calculate the sum of two numbers entered by the user. To design the interface,  you add two TextBox control, three Label controls and a Button on the Form. Under the respective properties windows, change the name of the first text box to txtNum1 and the name of the second TextBox to txtNum2. Next, change the text of the first Label to +, the text of the second Label to =. For the third Label, change the autosize property to false and the name to LblAns. Drag the third Label to an appropriate size and set its background to yellow color. For the Button, change its name to BtnCal and its text to Calculate.  Lastly, change the text of the Form to Simple Calculator. The two text boxes are used to accept inputs from the user. The Button is programmed to calculate the sum of the two numbers using the plus operator.

The Code

Public Class Form1
Private Sub BtnCal_Click(sender As Object, e As EventArgs) Handles BtnCal.Click
Dim num1 As Single = Val(TxtNum1.Text)
Dim num2 As Single = Val(TxtNum2.Text)
Dim Sum As Single = num1 + num2
LblAns.Text = Sum.ToString

End Sub
End Class

The Dim keyword is to declare a number as a single precision number and the function Val is to convert a string to a number. The method ToString is to display output as a string. We shall learn more about Dim in a later lesson.