1

T U T O R I A L

Welcome
3
Application
Introduction to
Visual Programming
https://www.facebook.com/groups/252543721572219

 2009 Pearson Education, Inc. All rights reserved.

 2

Outline

3.1 Test-Driving the Welcome Application

3.2 Constructing the Welcome Application
3.3 Objects Used in the Welcome Application

 2009 Pearson Education, Inc. All rights reserved.

 3

Objectives

In this tutorial you will learn:

■ Set the text in the Form’s title bar.
■ Change the Form’s background color.
■ Place a Label control on the Form.
■ Display text in a Label control.
■ Place a PictureBox control on the Form.
■ Display an image in a PictureBox control.
■ Execute an application.

 2009 Pearson Education, Inc. All rights reserved.

 4

Introduction

■ Users prefer software with interactive graphical

user interfaces (GUIs) that respond to actions
(events) such as Button clicks, data input and
much more (4th generation language).
■ The majority of Windows applications are GUI
based.
■ With Visual Basic, you can create Windows
applications that input and output information in
a variety of ways.
■ Visual Basic uses objects (properties and
methods).
 2009 Pearson Education, Inc. All rights reserved.
 5

Introduction (Cont.)
an object is a programming structure that encapsulates data
(properties) and functionality (methods) as a single unit

(Object) Button1 (instance of button)

Button1.ButtonText = “OK” (set property)

X = Button1.ButtonText (get property)
(Properties)

Button2 (instance of button)

Button2.ButtonText = “Cancel”

Setting and Getting properties can be done at design time

and run time
 2009 Pearson Education, Inc. All rights reserved.
 6

3.1 Test-Driving the Welcome Application

Application Requirements

Recall that a software company (Deitel & Associates)

has asked you to develop a simple Welcome
application that includes the greeting “Welcome to
Visual Basic 2008!” and a picture of the company’s bug
mascot. Now that you’re familiar with the Visual Basic
IDE, your task is to develop this application to satisfy the
company’s request.

 2009 Pearson Education, Inc. All rights reserved.

 7

Test-Driving the Welcome Application

■ Open Windows Explorer (Fig. 3.1) and navigate to the C:\

Examples\Tutorial03\CompletedApplication\
Welcome directory. Select Welcome.sln and click the
Open Button (Fig. 3.2).

Open Project... command (selected)

opens an existing project

Figure 3.1 | Opening an existing project with the File menu’s

Open Project... command.

 2009 Pearson Education, Inc. All rights reserved.

 8
Test-Driving the Welcome
Application (Cont.)

Open Project dialog

Welcome solution file

Figure 3.2 | Open Project dialog displaying the contents of the Welcome solution.

 2009 Pearson Education, Inc. All rights reserved.

 9
Test-Driving the Welcome
Application (Cont.)

■ Double click Welcome.vb in the Solution Explorer to

open the Welcome application’s Form in Design view
(Fig. 3.3).

Figure 3.3 | Welcome application’s Form in Design view.

 2009 Pearson Education, Inc. All rights reserved.

 10
Test-Driving the Welcome
Application (Cont.)

■ Running the Welcome application. Select Debug >

Start Debugging (Fig. 3.4). The Start Debugging
command runs the application.

Start Debugging command

(selected) runs the application

Figure 3.4 | Running the Welcome application using the Debug menu’s
Start Debugging command.

 2009 Pearson Education, Inc. All rights reserved.

 11
Test-Driving the Welcome
Application (Cont.)

■ The Welcome Form shown in Fig. 3.5 appears.

Close
box

Figure 3.5 | Welcome application running.

■ Close the running application and then close the project.

 2009 Pearson Education, Inc. All rights reserved.

 12
Changing the Form’s File Name
and Title Bar Text

■ Open the C:\SimplyVB2008\Welcome\Welcome.sln

file that you created in Tutorial 2.
■ Double click Form1.vb in the Solution Explorer
window (Fig. 3.6) to display the blank Form.

IDE title bar

Solution Explorer window

Toolbar

Form title bar Project name

Form file name

Blank Form

Figure 3.6 | Blank Form.

 2009 Pearson Education, Inc. All rights reserved.

 13
Changing the Form’s File Name
and Title Bar Text (Cont.)

■ Select Form1.vb in the Solution Explorer window to

display the file’s properties in the Properties window.
■ Double click the field to the right of the File Name
property’s box to select the current file name, and type
Welcome.vb­(Fig. 3.7).

File properties

New file name

Selected property New property

value

Selected property description

Figure 3.7 | Changing the Form’s file name.

 2009 Pearson Education, Inc. All rights reserved.

 14

Good Programming Practice

Change your application’s Form file name (Form1.vb)
to a name that describes the application’s purpose.

 2009 Pearson Education, Inc. All rights reserved.

 15
Changing the Form’s File Name
and Title Bar Text (Cont.)

■ The title bar is the top portion of the window that contains the window’s
title.
■ To change this text, use the Properties window (Fig. 3.8).
– Click the gray area in the Form.
– Double click the field to the right of the Text property in the
Properties window to edit the field.
– Press the Enter key to update the Form’s title bar (Fig. 3.9).

Updated title bar

Selected property
Property value

Selected property Figure 3.9 | Title bar for the Welcome

description
application.

Figure 3.8 | Setting the Form’s Text property.

 2009 Pearson Education, Inc. All rights reserved.

 16

GUI Design Tip

Choose short, descriptive Form titles. Capitalize words
that are not articles, prepositions or conjunctions. Do
not use punctuation.

 2009 Pearson Education, Inc. All rights reserved.

 17
Changing the Form’s File Name
and Title Bar Text (Cont.)

■ There are several ways to resize the Form.

– You can click and drag one of the Form’s enabled sizing
handles (the small white squares that appear around the Form
Fig. 3.10). Selected property

File properties Enabled sizing handles

Figure 3.10 | Form with sizing handles.

 2009 Pearson Education, Inc. All rights reserved.

 18

Setting the Form’s Size Property

■ To resize the Form and its controls with the Size property,
click the Form to select it.
■ Then locate the Form’s Size property in the Properties
window (Fig. 3.11).
■ Click the plus box, , next to this property.
– Type 616 for the Width property value and press Enter.
– Type 440 for the Height property value and press Enter.
– You also can enter the width and height (separated by a
comma) in the Size property’s value field.

 2009 Pearson Education, Inc. All rights reserved.

 19

Setting the Form’s Size Property (Cont.)

Size property values

Figure 3.11 | Size property values for the Form.

 2009 Pearson Education, Inc. All rights reserved.

 20

Setting the Form’s Background Color

■ Click the Form to display its properties in the Properties

window.
■ When you click the BackColor property’s value in the
Properties window, a down-arrow ( ) Button appears
(Fig. 3.12).
■ The down-arrow Button displays three tabs: System,
Web and Custom.
■ Click the Custom tab to display its palette (Fig. 3.12).

 2009 Pearson Education, Inc. All rights reserved.

 21
Setting the Form’s
Background Color (Cont.)

Down-arrow Button

Tabs
Custom palette

Current color

Custom colors can be

added to the white boxes

Figure 3.12 | Viewing the Custom palette in the Form’s BackColor property value
field.

 2009 Pearson Education, Inc. All rights reserved.

 22
Setting the Form’s
Background Color (Cont.)

■ Right click any one of the white boxes at the bottom of the
Custom palette to display the Define Color dialog
(Fig. 3.13).
■ Colors can be created by selecting a color in the rainbow
window and sliding the black arrow up and down.
■ The values for the Red:, Green: and Blue: TextBoxes
describe the amount of red, green and blue and are
commonly called RGB values.
– Each red, green and blue value is in the range 0–255, inclusive.

 2009 Pearson Education, Inc. All rights reserved.

 23
Setting the Form’s
Background Color (Cont.)

Red component (255)

Color preview
Green component (237)
Blue component (169)

Adds a color to Custom palette

Figure 3.13 | Adding a color to the Custom palette.

 2009 Pearson Education, Inc. All rights reserved.

 24
Setting the Form’s
Background Color (Cont.)

■ Clicking the Add Color Button closes the dialog and

changes the Form’s background color (Fig. 3.14).
■ The color is also added to the custom palette.

Form background set to new custom

color

Custom color added to palette

Figure 3.14 | Properties window after the new custom color has been added.

 2009 Pearson Education, Inc. All rights reserved.

 25

GUI Design Tip

Use colors in your applications, but not to the point
of distracting the user.

 2009 Pearson Education, Inc. All rights reserved.

 26

Adding a Label to the Form

■ Click the Common Controls group in the Toolbox (Fig. 3.15) if it

is not already expanded.
■ Double click the Label control in the Toolbox.
■ When a Label control is added to the Form, the IDE initially sets the
control’s BackColor property value to the Form’s BackColor
property value.

Common Controls group

Label control

Figure 3.15 | Clicking the Common Controls tab in the Toolbox.

 2009 Pearson Education, Inc. All rights reserved.

 27

GUI Design Tip

Use Labels to display text that users cannot change.

 2009 Pearson Education, Inc. All rights reserved.

 28

Adding a Label to the Form (Cont.)

■ A Label appears in the upper-left corner of the

Form (Fig. 3.16). You can also drag the Label
from the Toolbox and drop it on the Form.
■ Visual Basic by default does not provide sizing
handles (Fig. 3.16) for you to resize a Label.

Label control

Sizing handles (enabled)

New background color

Figure 3.16 | Adding a Label to the Form.

 2009 Pearson Education, Inc. All rights reserved.

 29

Adding a Label to the Form (Cont.)

■ To enable manual resizing, set the Label’s AutoSize

property to False (Fig. 3.17).

AutoSize property

Figure 3.17 | Setting a Label’s AutoSize property to False.

 2009 Pearson Education, Inc. All rights reserved.

 30

Adding a Label to the Form (Cont.)

■ The Label’s Text property specifies the text that the

Label displays (Fig. 3.18).

Updated Text property value too large for Label

Figure 3.18 | Label after updating its Text property.

■ Edit the Text property, then use the sizing handles to

enlarge the Label so all the text is displayed (Fig. 3.19)

Label resized horizontally

Figure 3.19 | Label after it has been resized.

 2009 Pearson Education, Inc. All rights reserved.

 31

GUI Design Tip

Ensure that all Label controls are large enough to
display their text.

 2009 Pearson Education, Inc. All rights reserved.

 32

Adding a Label to the Form (Cont.)

■ Drag the Label to the top center of the Form. You

also can center the Label by selecting Format >
Center In Form > Horizontally (Fig. 3.20).

Centered Label

Figure 3.20 | Centered Label.

 2009 Pearson Education, Inc. All rights reserved.

 33

Adding a Label to the Form (Cont.)

■ Click the value of the Font property to cause an

ellipsis Button to appear (Fig. 3.21).

Ellipsis Button

Figure 3.21 | Properties window displaying the Label’s properties.

 2009 Pearson Education, Inc. All rights reserved.

 34

Adding a Label to the Form (Cont.)

■ Click the ellipsis Button to display the Font dialog

(Fig. 3.22).
■ In this dialog, you can select the font name, font style
and font size.
Font dialog

current font

Font sample

Figure 3.22 | Font dialog for selecting fonts, styles and sizes.

 2009 Pearson Education, Inc. All rights reserved.

 35

GUI Design Tip

Use 9pt Segoe UI font to improve readability for
controls that display text.

 2009 Pearson Education, Inc. All rights reserved.

 36

Adding a Label to the Form (Cont.)

■ To align text inside a Label, use the Label’s Text­

Align property.
– Click the down-arrow Button to display a three-by-three grid
of Buttons (Fig. 3.23).
– Click the middle-center Button.

Text alignment options

Middle-center alignment
option

Figure 3.23 | Centering the Label’s text.

 2009 Pearson Education, Inc. All rights reserved.

 37
Inserting an Image and Running the
Welcome Application

■ To add a PictureBox control to the Form, double click

the PictureBox control icon in the ToolBox.

■ When the PictureBox appears, drag it below the Label

and center it on the Form (Fig. 3.24).

Updated Label

PictureBox

Figure 3.24 | Inserting and aligning the PictureBox.

 2009 Pearson Education, Inc. All rights reserved.

 38

GUI Design Tip

Use PictureBoxes to enhance GUIs with graphics
that users cannot change.

 2009 Pearson Education, Inc. All rights reserved.

 39
Inserting an Image and Running the
Welcome Application (Cont.)

■ Click the PictureBox to display its properties.

– Locate the Image property.
– Click the value of the PictureBox’s Image property
to display an ellipsis Button (Fig. 3.25).

Image property value

(no image selected)

Ellipsis Button

Image preview box (no

image currently
displayed)

Choose Image link

Figure 3.25 | Image property of the PictureBox.

 2009 Pearson Education, Inc. All rights reserved.

 40
Inserting an Image and Running the
Welcome Application (Cont.)

■ Click the ellipsis Button to display the Select Resource

dialog (Fig. 3.26).
■ The Select Resource dialog is used to import files to
an application.
– You can use any of several popular image formats, including
PNG, GIF, JPEG and BMP.

Figure 3.26 | Select Resource dialog to select an image for the PictureBox.
 2009 Pearson Education, Inc. All rights reserved.
 41
Inserting an Image and Running the
Welcome Application (Cont.)

■ Click the Import… Button to browse for an image to

insert.
■ Navigate to the C:\Examples\Tutorial03\
CompletedApplication directory and select the file
bug.png (Fig. 3.27).

bug.png file (may

display
bug depending on
whether your computer
is set to
display file-name
extensions)

Figure 3.27 | Open dialog used to browse for a PictureBox image.

 2009 Pearson Education, Inc. All rights reserved.

 42
Inserting an Image and Running the
Welcome Application (Cont.)

■ Click OK (Fig. 3.28) to place the image in your

application.

Figure 3.28 | Select Resource dialog displaying a preview of selected image.

 2009 Pearson Education, Inc. All rights reserved.

 43
Inserting an Image and Running the
Welcome Application (Cont.)

■ To size the image to fit in the PictureBox

(Fig. 3.29):
– change the SizeMode property to StretchImage.
– This scales the image to the size of the PictureBox.

PictureBox too
small for image

Figure 3.29 | Newly inserted image.

 2009 Pearson Education, Inc. All rights reserved.

 44

GUI Design Tip

Images should fit inside their PictureBoxes. This can
be achieved by setting PictureBox property SizeMode
to StretchImage.

 2009 Pearson Education, Inc. All rights reserved.

 45
Inserting an Image and Running the
Welcome Application (Cont.)

■ To resize the PictureBox, change the Size property

to 500, 250.
■ Center the image horizontally. The Form should now
look like Fig. 3.40.

Newly inserted image

Figure 3.40 | PictureBox displaying an image.

 2009 Pearson Education, Inc. All rights reserved.

 46
Inserting an Image and Running the
Welcome Application (Cont.)

■ To ensure that the controls remain in position, select

Format > Lock Controls (Fig. 3.41).
■ You can lock individual controls by setting the control’s
Locked property to True.
■ Additional capabilities are available by right clicking the
Form in Design view.

Lock Controls option

Figure 3.41 | Locking controls by using the Format menu.

 2009 Pearson Education, Inc. All rights reserved.

 47
Inserting an Image and Running the
Welcome Application (Cont.)

■ When a Visual Basic application is run in the IDE,

the project files are automatically saved for you.
■ While in design mode, you have access to all the
IDE windows, menus and toolbars.
■ In run mode you can interact with fewer IDE
features. Select Debug > Start Debugging
to run the application (Fig. 3.42) and note that
many toolbar icons and menus are disabled.

 2009 Pearson Education, Inc. All rights reserved.

 48
Inserting an Image and Running the
Welcome Application (Cont.)

IDE title bar displaying (Running)

Form

Running application

Figure 3.42 | IDE in run mode with the application running

in the foreground.

 2009 Pearson Education, Inc. All rights reserved.

 49
Inserting an Image and Running the
Welcome Application (Cont.)

■ In the .NET Framework Class Library, classes are

organized into directory-like entities called namespaces.
– The class types used in this application (Fig. 3.43)
have namespace System.Windows.Forms (Fig. 3.44).
– This namespace contains control classes and
the Form class.
Name of object
(Welcome) Namespace
(System.Windows.Forms)
Welcome Class type of object
application GUI (Form)
objects

Figure 3.43 | Component object box expanded to show Figure 3.44 | The name and class of an object are
the Welcome application’s objects. displayed in the component object box .

 2009 Pearson Education, Inc. All rights reserved.