Visual Basic 2015 Lesson 2: Building the Interface1- Customizing the Form

[Lesson 1]<<[Contents]>>[Lesson 3]

The first step in developing a Visual Basic 2015 application is to build a graphical user interface. To build a graphical user interface, add controls from the toolbox to the form and then customize their properties. Note that the default form is also a control by itself and you can change its properties first before adding additional controls. After adding controls to the form, you then need to write code for all the controls so that they can response to events triggered by the user’s actions such as clicking the mouse. Therefore, Visual Basic 2015 is also an event-driven programming language. We will learn more about the concept of event-driven programming and coding in later lessons.






2.1 Customizing the Properties of the Default-Form using the Properties Window

When you start a new Visual Basic 2015 project, the IDE will display the default form along with the Solution Explorer window and the Properties window on the far right,  as shown in Figure 2.1.

vb2015_fig2.1

Figure 2.1: Initial Visual Basic 2015 IDE

The properties window comprises an object drop-down list, a list of properties and the bottom section that shows a description of the selected property. As the only object on the IDE is the default form by the name of Form1 , the properties window displays all properties related to Form1 and their corresponding attributes or values, as shown in Figure 2.2.

You can change the name of the form, the title of the form, the background colour, the foreground color , the size and more. Properties can be changed by typing a value or select a value from a drop-down list .For colour setting, you just need to select a colour rectangle or from a colour palette. Now customize the following properties for Form1:

vb2015_fig2.2

Figure 2.2: The Properties window

  

Property Value
Name MyForm
Text My First VB2015 Project
BackColor 128, 255, 255
MaximizeBox False
Font Arial, 9.75pt

  
* The value for Backcolor (background colour) 128,255,255 is actually the RGB colour code for Cyan. Instead of typing the RGB value, you can indeed select colour from the colour drop-down list that comprises three tabs, Custom, Web and System. Clicking on the drop-down arrow will bring out a colour palette or a list of colour rectangles where you can select a colour, as shown the figures below:

 vb2015_fig2.3
Figure 2.3: Custom Palette
 vb2015_fig2.4
Figure 2.4: Web Colours
 vb2015_fig2.5
Figure 2.5: System Colours

The runtime interface is shown in Figure 2.6. Notice that the title of the form has been changed from Form1 to My First VB2015 Project, background changed to cyan colour and the window cannot be maximized.

vb2015_fig2.6 Figure 2.6: The Runtime Interface



2.2 Changing the Properties of the Default-Form at Run-Time

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 colour of the form to cyan using the following code

Me.BackColor=Color.Cyan

To achieve the same interface as in Figure 2.6, type in the following code by clicking the form to enter the code window:

Public Class Form1

Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load

Me.Text = “My First VB2015 Project”

Me.BackColor = Color.Cyan

Me.MaximizeBox=False

Me.MinimizeBox = True

End Sub

End Class




[Lesson 1]<<[Contents]>>[Lesson 3]