DESIGNING THE FORM

AND OTHER CONTROLS

 LECTURE NOTE

BY
MR. ANTHONY ANDREW
 DESIGN MODE, RUN MODE AND
BREAK MODE
Visual Studio has three modes in which it operates as you
develop and test an application. The three modes are:

1. Design mode

2. Run mode, and

3. Break mode.
DESIGN MODE: This is the mode in which you create an application.
When you are placing controls on an application’s form or writing Visual
Basic code, Visual Studio is operating in design mode. (Design mode is
also known as design time.)

RUN MODE: When you are ready to run an application that you are
developing, you can execute it without leaving the Visual Studio
environment. This puts Visual Studio in run mode (also known as runtime).
The application will be running on the computer, and you can interact with
it as the user.
 RUNNING AN APPLICATION FROM
THE VISUAL STUDIO ENVIRONMENT

There are three ways to run an application from the Visual

Studio environment:

• Click the Start Debugging button ( ) on the toolbar

• Click DEBUG on the menu bar, then select Start Debugging

• Press the F5 key

BREAK MODE: Break mode is a special mode
that allows you to momentarily suspend a running
application for testing and debugging purposes. It is
also the mode that Visual Studio enters when a
running application encounters a runtime error.
 Switching Between The Code Window and
Designer Window
When a form is created in a VB project, the code for that form is stored in a file with the
same name as the form, followed by the .vb extension. For example, the form in the
Directions project is named Form1, so its code will be stored in a file named Form1.vb.
If you have Visual Studio running, you should see the tabs shown in Figure 2-46 at the
top of the Code window. One of the tabs reads Form1.vb, and another one reads
Form1.vb [Design]. (The tabs on your screen might not be in this order.) In the figure,
the tab that reads Form1.vb is highlighted, indicating that the Code window is currently
opened. To switch to the Designer window, click the tab that reads Form1.vb [Design].
Then, to switch back to the Code window, click the tab that reads Form1.vb.
 The Code In The FORMS1.vb Window
The Code window is a text-editing window in which you write code. Notice that some
code already appears in the window when you open it by double-clicking a control.
First, notice that the first and last lines of code read:

Public Class Form1

End Class

These statements are the beginning and the end of a class declaration for the
Form1 form.

You’ll learn more about class declarations later but for now, you just need to
know that all of the code for the Form1 form (and all controls on the Form1
form) must appear inside this class declaration.
Next, notice that inside the class declaration, the following two
lines of code appear:
This is a code template for the btnDisplayDirections button’s Click
event handler. The template, which has been conveniently written for
you, consists of the first and last lines of the event handler’s code. Your
job is to fill in the code that goes between these two lines. Any code that
you write between these two lines will be executed when the
btnDisplayDirections button is clicked.

NOTE: The first line of the event handler template is a very long line of
code. Because this line of code is so long, we have left out the part that
appears inside the parentheses.
The first line starts with the keywords Private Sub. Following that is the name of
the event handler, which in this case is btnDisplayDirections_Click. Following the
name is some code that is enclosed in a set of parentheses. (As previously mentioned,
we have left the contents of the parentheses out, to simplify the figure.) After the
parentheses are the words Handles btnDisplayDirections.Click. This tells us that
the code handles the Click event when it happens to the btnDisplayDirections
control. The last line of the code template reads End Sub. These are keywords that
mark the end of the event handler. Any code that you write between the first and last
lines of the code template are executed, in the order in which they appear, when the
event handler is invoked.
 THE LOAD EVENT
When you run an application, the application’s form is loaded into memory
and an event known as the Load event takes place. The Load event takes
place before the form is displayed on the screen. If you want to execute some
code at this point, you can write the code in the form’s Load event handler.

To create a Load event handler for a form, simply double-click any area of
the form in the Designer window, where there is no other control. The Code
window will open with a template for the form’s Load event handler.
The following is an example of a Load event handler that displays a message
box. When the application runs, the message box will appear before the Form1
form is displayed:

Private Sub Form1_Load(...) Handles MyBase.Load

MessageBox.Show("Prepare to see the form!")

End Sub

Later in this course you will develop an application that displays the current date
and time on the application’s form. You will accomplish this by writing code in
the form’s Load event handler that retrieves the date and time from the system.
 DEFINING AND ASSIGNING VALUE TO THE PROPERTY OF
A CONTROL USING CODE DURING RUN TIME

The property of a control object can be defined by specifying the object’s (control’s)
name followed by a period, as follows:

ObjectName.property

We can then assign a value using the syntax

ObjectName.property = value

For example, to assign the value “Average Mass” to a Label’s text property we do the
following assignment statement:

lblMyLabel.Text = “Average Mass”

Other examples include:
1. lblDirections.Visible = True
2. btnPress.Size = New Size(400, 400)
3. Me.Opacity = 0.85 etc.
CHANGING COLORS WITH CODE
Visual Basic provides numerous values that represent colors and can be assigned to
the ForeColor and BackColor properties in code. The following are a few of the
values:
Color.Black
Color.Blue
Color.Cyan
Color.Green
Color.Magenta
Color.Red
Color.White
Color.Yellow

For example, assume an application has a Label control named

lblMessage. The following code sets the label’s background color to
black and foreground color to yellow:

lblMessage.BackColor = Color.Black

lblMessage.ForeColor = Color.Yellow
 CUSTOMIZING THE FORM’S APPEARANCE
When you start a new Visual Basic project, the VB IDE will display the default form along with the
Solution Explorer window and the Properties window as discussed already. The name of the default
form is Form1. The properties window displays all the properties associate with 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

 size and more

during the design time (Design Mode)

Class Activity 1:
Try customizing your form by changing the properties to the ones shown in
Table 2.1 below.
CUSTOMIZING THE FORM AT RUN TIME

You can also change the properties of the form at

runtime by writing relevant codes. The default form
is an object, and an instant of the form can be
denoted by the name Me. It’s usual practice to use
this name “ME” rather than giving the form another
name.
 Activity 2
In this example we change the properties of the form at run time.
Private Sub Form1_Load(sender As Object, e As EventArgs) Handles_ MyBase.Load

Me.Text = "My First Visual Basic 2022 Application" ‘Change the title of the form at run time

Me.BackColor = Color.Turquoise ‘Give the form this background color

Me.ForeColor = Color.Ivory ‘Give it this forecolor

Me.MaximizeBox = False ‘Do not allow form to be maximized at run time

Me.MinimizeBox = True ‘Allow form to be minimize at run time

End Sub
 THE FormBorderStyle Property
Sometimes you may want to prevent users from resizing your application’s form at runtime,
because doing so would distort the appearance of your user interface.

Here are two values you can assign to a form’s FormBorderStyle property that you may find
useful:

• Sizable—This is the default setting for FormBorderStyle. The form is displayed with
Minimize, Maximize, and Close buttons on its title bar. The form may be resized, but the
controls will not move unless you set certain property values.

• FixedSingle—The form’s size is fixed and uses a border that is a single line. The form is
displayed with Minimize, Maximize, and Close buttons on its title bar. Although the form
may be maximized and minimized, it may not be resized by its edges or corners
MinimizeBox, MaximizeBox, and ControlBox

Windows forms have three possible buttons in the upper-right corner:

a Minimize button that turns hides the window and displays an icon
on the Windows task bar, a Maximize button that fills the entire
display with the current window, and a Close button that closes the
window completely. A sample is shown in Figure in the next two
slides. You can use Form properties to control whether these buttons
appear when your application is running. See explanation on the next
slide.
• The form’s MinimizeBox property can be set to True or False, depending on whether or
not you want the Minimize button to appear.

• The form’s MaximizeBox property can be set to True or False, depending on whether or
not you want the Maximize button to appear.

The two buttons depend on each other—if MinimizeBox is True and MaximizeBox is False,
both buttons will appear and Maximize will be disabled. Conversely, if MinimizeBox is
False and MaximizeBox is True, both buttons will appear and Minimize will be disabled.

The form’s ControlBox property can be set to True or False. When False, all buttons
disappear from the upper-right corner of the form. This property overrides the values of
MinimizeBox and MaximizeBox.
 Activity 3
In this example we set more properties of the form at run time.

Private Sub Form1_Load(sender As Object, e As EventArgs) Handles_ MyBase.Load

Me.Text = "My First Visual Basic 2022 Application"

Me.ControlBox = False

Me.FormBorderStyle = FormBorderStyle.FixedSingle

Me.Opacity = 0.85

Me.Size = New Size(400,400)

Me.CenterToParent()

End Sub
 Locking Controls
Once you have placed all the controls in their proper positions on a form, it
is usually a good idea to lock them. When you lock the controls on a form,
they cannot be accidentally moved at design time. They must be unlocked
before they can be moved.

To lock all the controls on a form, place the cursor over an empty spot on
the form and right-click. A small menu pops up. One of the selections on
the menu is Lock Controls.
 Ending an Application with Me.Close()
An application’s form (which is an object) has a method named
Close. When a form’s Close method is called, it causes the form to
close. If an application has only one form, closing the form also
ends the application’s execution.

In the statement Me.Close(), the keyword Me, which appears to the

left of the period, is shorthand for referring to the current form. On
the right side of the period, the word Close is the name of the
method we are calling.
NOTE:

Most of the properties that can be set at Design time

can also be set at Run time using code. The
properties demonstrated so far are just a few of them.

To learn more please consult the MSDN online

reference Documentation or check the help section
in the visual studio editor.
 ADDING CONTROLS TO THE FORM
In this section, we will learn how to add controls to the form and set some
properties of these forms at the Design time and at Run time using codes.
The controls are objects that consist of three elements, namely:

• properties

• methods, and

• Events

We can add controls to the form from the Toolbox by double-clicking them
or by Dragging and dropping them on the form.
Some of the most commonly used Controls that we will be discussing are:

• Textbox Control

• Label Control

• Button Control

• List box Control

• Combo Box Control

• Picture Box Control

• Check Box Control

• Radio button Control

• Group Box Control etc

Viewing the Events Associated with a Control

Every control you place on the form has a set of events associate
with it. To view the events, double-click the control on the form to
enter the code window. The default event will appear at the top
right side of the code window. You must click the default event to
view other events associated with the control. The code appearing
on the left side is the event procedure associated with the control
event of the control added to the form. The next slide shows the
pictorial view.
 The TextBox Control
TextBox is the standard control for accepting inputs from the user as well as to display
the outputs. It can handle string and numeric data but not images or pictures.

A text box is a rectangular area on a form that accepts keyboard input. As the user types,
the characters are stored in the text box. In Visual Basic, you create a text box with a
TextBox control.

Whatever the user types into the TextBox control is stored, as a string, in its Text
property. We will learn how to convert this string to different data types in the coming
weeks but for now you can use the val() function to convert it to Numeric data.
When you add a TextBox to a form, the Name given to the TextBox will
be TextBox1. You can choose to rename it to what the TextBox is to do.

By convention, you start the name of a TextBox with a “txt” followed by

the name you give it. For example, if a TextBox is to get the username of
a user, then the TextBox Name can be given as “txtUserName”.

You can also set other properties of the TextBox in Design time using the
property Window.
 Using the Text Property of the TextBox at Run Time
Using Code

You access a TextBox control’s Text property in code using the syntax:

ControlName.Text

For example, suppose an application has a Label control named lblResult

and a TextBox control named txtUserName.

The following statement assigns the contents of the TextBox control’s Text
property into the Label control’s Text property.

lblResult.Text = txtUserName.Text
The following statement shows another example. It
displays the contents of the txtUserName control’s Text
property in a message box:

MessageBox.Show(txtUserName.Text)
 Clearing the Content of a TextBox
To clear the content of a TextBox you use the clear() method. The syntax is given as:

TextBoxName.Clear()

where TextBoxName is the Name of the TextBox Control.

For example, to clear the text in the txtUserName TextBox we do this:

txtUserName.Clear()

You can also clear a text box by assigning the predefined constant String.Empty to its
Text property. Here is an example:

txtUserName.Text = String.Empty
 String Concatenation
The ampersand(&) is used to combine two or more strings in visual basic. This is
what is referred to as string concatenation.

The & operator creates a string that is a combination of the string on its left and
the string on its right. Specifically, it appends the string on its right to the string
on its left.

For example, assume an application uses a Label control named lblMessage. The
following statement assigns the string “ Your user name is “ to the string obtained
from the input by the user in a TextBox’s Control:

lblMessage = “Your Username is “ & txtUserName

 ACTIVITY: Date String App
In this tutorial you will create an application that lets the user enter the
following information about today’s date:

• The day of the week

• The name of the month

• The numeric day of the month

• The year

When the user enters the information and clicks a button, the application
displays a date string such as Friday, December 6, 2013.
 Controlling a Form’s Tab Order with the
TabIndex Property
In Windows applications, pressing the tab key changes the focus from one control
to another. The order in which controls receive the focus is called the tab order.

When you place controls on a form in Visual Basic, the tab order will be the same
sequence in which you created the controls. In many cases this is the tab order you
want, but sometimes you rearrange controls on a form, delete controls, and add
new ones. These modifications often lead to a disorganized tab order, which can
confuse and irritate the users of your application. Users want to tab smoothly from
one control to the next, in a logical sequence.
You can modify the tab order by changing a control’s TabIndex
property. The TabIndex property contains a numeric value, which
indicates the control’s position in the tab order. When you create a
control, Visual Basic automatically assigns a value to its TabIndex
property. The first control you create on a form will have a TabIndex of
0, the second will have a TabIndex of 1, and so on. The control with a
TabIndex of 0 will be the first control in the tab order. The next control
in the tab order will be the one with a TabIndex of 1. The tab order
continues in this sequence.
To change the tab order of a form’s controls, click VIEW on the menu
bar, and then click Tab Order. This causes the form to be displayed in tab
order selection mode. Each control’s existing TabIndex value is
displayed on the form. Then you create a new tab order by clicking the
controls in a specific order. When you are finished, exit tab order
selection mode by pressing the Esc key. The following figure shows the
Tab order for the string date app.

NOTE: The Label controls cannot receive the focus, so do not be concerned
with the TabIndex values displayed for them.
 Using ControlChars.CrLf to Display Multiple Lines

If you want to display multiple lines of information in a message box, use the
constant ControlChars.CrLf (CrLf stands for carriage return line feed).
Concatenate it with the string you wish to display, where you wish to begin a
new line (as shown in this example):

MessageBox.Show("This is line 1" & ControlChars.CrLf & "This is line 2")

This statement causes two lines of output to appear in a message box.

 ACTIVITY 4
In this example, we create a simple App that asks the user to enter his
username. The App then displays the message:

“Your username is profdrew”

assuming the user entered profdrew as his username.

The app has 2 label controls: label1 and lblMessage. one TextBox
control named txtUserName and 3 Button Controls named btnShow,
btnClear and btnExit.
The code for the show button
The Code for the Clear and Exit Button
 The Focus() Method
When an application is running and a form is displayed, one of the form’s
controls always has the focus. The control having the focus is the one that
receives the user’s keyboard input. For example, when a TextBox control has the
focus, it receives the characters that the user enters on the keyboard. When a
button has the focus, pressing thee key executes the button’s Click event handler.

You can tell which control has the focus by looking at the form at runtime. When
a TextBox control has the focus, a blinking text cursor appears inside it, or the
text inside the TextBox control appears highlighted. When a button, radio button,
or check box has the focus, a thin dotted line appears around the control.
Often, you want to make sure a particular control has the focus. When the Clear
button is clicked, the focus should return to one of the TextBox control etc.
This would make it unnecessary for the user to click the TextBox control in
order to start entering another set of information.

In code, you move the focus to a control by calling the Focus method. The
method’s general syntax is:

ControlName.Focus()

where ControlName is the name of the control. For example,

txtUserName.Focus().
 THE LABEL CONTROL
Label is used for multiple purposes like providing instructions and
guidelines to the users, displaying outputs and more. It is different
from the TextBox because it is read only, which means the user
cannot edit its content at runtime. Using the syntax 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.
 The Unit Converter App
This App converts 1 kilometer to units such as Inches, Feet, Yards
and Miles. It then displays the result in a label.

It has four buttons whose names are btnInches, btnFeet, btnYards

and btnMiles.Their Text Property is set to Inches, Feet, Yards and
Miles respectively.

It also has a label button whose name is lblShowConversion. It has

an exit button btnExit whose Text property is set to Exit. It also has
an Info label whose default name is retained.
The Code
 The AutoSize, BorderStyle and TextAlign Properties
The AutoSize Property

The Label control’s AutoSize property determines whether a label will change size
automatically to accommodate the amount of text in its Text property, or remain a fixed
size.

The AutoSize property is a Boolean property that is set to True by default. When a label’s
AutoSize property is set to True, the label’s bounding box will automatically resize to
accommodate the text in the label’s Text property.

When AutoSize is set to False, however, you can use the label’s sizing handles to change
its size in the Designer window. When the application is running, the Label control will
remain the size that it was given at design time.
The BorderStyle Property

The BorderStyle property allows you to set a border around a Label control. The Label
control’s BorderStyle property may have one of three values: None, FixedSingle, and
Fixed3D. The property is set to None by default, which means the label will have no border.

If BorderStyle is set to FixedSingle, the label will be outlined with a border that is a single
pixel wide. If BorderStyle is set to Fixed3D, the label will have a recessed 3D appearance.
The Figure on the next slide shows an example of three Label controls: one with
BorderStyle set to None, one with BorderStyle set to FixedSingle, and one with
BorderStyle set to Fixed3D.

Quite often you will want to display output, such as the results of a calculation, in a Label
control with a border.
The TextAlign Property

The TextAlign property determines how the text is aligned within the label.
When you set a label’s AutoSize property to False and then manually resize
the label, it sometimes becomes necessary to change the way the label’s text
is aligned. By default, a label’s text is aligned with the top and left edges of
the label’s bounding box.

We can change the text’s alignment in the label with the TextAlign property.
The TextAlign property may be set to any of the following values: TopLeft,
TopCenter, TopRight, MiddleLeft, MiddleCenter, MiddleRight, BottomLeft,
BottomCenter, or BottomRight.
 Changing a Label’s TextAlign
Property with Code
At design time, you set the TextAlign property’s value in the Properties
window. You can also set the property with code at runtime. You do this
by using an assignment statement to assign one of the following values to
the property:

ContentAlignment.TopLeft

ContentAlignment.TopCenter

ContentAlignment.TopRight
ContentAlignment.MiddleLeft

ContentAlignment.MiddleCenter

ContentAlignment.MiddleRight

 ContentAlignment.BottomLeft

ContentAlignment.BottomCenter

 ContentAlignment.BottomRight

• For example, assume an application uses a Label control named lblReportTitle.

The following statement aligns the control’s text with the middle and center of
the control’s bounding box.
 DISPLAYING USER MESSAGES
Displaying Message Boxes

A message box is a small window, sometimes referred to as a dialog box, that displays a
message. Sometimes you need a convenient way to display a message to the user. In Visual
Basic, you can call the MessageBox.Show method to pop up a message box.

The Figure on the next slide shows an example of a message box, displaying the message
Hello World!. Notice that the message box also has an OK button. The user must click the
OK button to close the message box.

The following statement shows an example of how you would call the MessageBox.Show
method to display the message box shown in Figure on the next slide:

MessageBox.Show("Hello World!")
ACTIVITY: Displaying the unit Converter App in a
Message Box
Remember the Unit Converter App? We will display the conversion in a
message box as shown below. See the code on the next slide
 The StatusStrip
The StatusStrip control uses a Label to display program status information
and messages to the user. However, a message displayed in a StatusStrip
control appears in such a way that the user is not interrupted.

In the previous version of this program (with pop-up message boxes), the
user had to click once on a number to display the message box with the
French word, and then click a second time to remove the message box from
the screen. In this new version, the user clicks only once to select a number.
This approach helps the user to move quickly between the numbered buttons.
A StatusStrip control offers an ideal way to display messages under the
following conditions:

1. The message being displayed is not a critical system error that

forces the user to interrupt what he or she was doing.

2. The user will be clicking buttons multiple times within a short

period of time. By not using a message box, you avoid forcing the

user to click a second time just to clear the box from the screen.
 Adding a StatusStrip and a Label to a Form
Two steps are involved in setting up a StatusStrip control with a label to hold
messages:

1. Drag the StatusStrip control from the Menus & Toolbars section of
the Toolbox window onto an existing form, as shown in the Figure on the
next slide. The StatusStrip will attach itself to the bottom of the form. This is
called docking the control.

2. Click the area on the left side of the StatusStrip, and a drop-down
list will appear with the names of several types of controls, as shown in
the Figure on the next slide. Select the StatusLabel member of this list.
ACTIVITY: Yoruba Language App
• Public Class Form1
• Private Sub StatusStrip1_ItemClicked(sender As Object, e As
ToolStripItemClickedEventArgs)

• End Sub

• Private Sub btnOne_Click(sender As Object, e As EventArgs) Handles btnOne.Click

• ' Display 1 in yoruba
• lblStatusStrip.Text = "Eni"
• End Sub

• Private Sub btnExit_Click(sender As Object, e As EventArgs) Handles btnExit.Click

• 'Close the form
• Me.Close()
• End Sub

• Private Sub Button2_Click(sender As Object, e As EventArgs) Handles Button2.Click

• 'Display two in yoruba
• lblStatusStrip.Text = "Eji"
• End Sub
 Private Sub Button3_Click(sender As Object, e As EventArgs) Handles Button3.Click
'Display two in yoruba
lblStatusStrip.Text = "Eta"
End Sub

Private Sub Button4_Click(sender As Object, e As EventArgs) Handles Button4.Click

'Display two in yoruba
lblStatusStrip.Text = "Eerin"
End Sub

Private Sub Button5_Click(sender As Object, e As EventArgs) Handles Button5.Click

'Display two in yoruba
lblStatusStrip.Text = "aarun"
End Sub
End Class
 THE BUTTON CONTROL
The button controls are the controls in a form that the user can click
in other to effect an event. The button controls have so many uses in
a form which includes: Ok button, Cancel button, Exit button,
Accept button, Clear button and Customized buttons.

To add a button control to your form, double click it in the Toolbox

or drag and drop it on the form.

Majority of the codes are written inside this control if present in a

form.
 The EXIT Button

The Exit Button is used to exit or Close the form by the user when he or
she no longer interested in using the application.

The code inside the Exit Button is usually very short and uses the Me
method of the form control.

The syntax is: Me.Close()

 The Clear Button
As the name implies, this button is used to clear the content of a TextBox when
the user wants to enter another set of data in the application.

You would usually put the Clear() method under this method. For example, let
say we have a TextBox named txtUserName in our form and we want to clear
the contents inside it, we use the syntax

txtUserName.Clear()

Or txtUserName.Text = String.Empty

We usually always have the Focus() method written inside this button to
give one of the TextBox or button etc focus in the form
 The Customized Button
The Customized button is the button you give a name depending on the
purpose of the application. For example, lets say you have an app that
calculates the average of the score of five subjects which a student took in an
examination. The button in this type of form should be named as
btnCalculate or any other name depicting the purpose of the button.

The customized button usually have majority of the code written inside it as
seen from previous examples and the ones we will see in new examples.
 Assigning Keyboard Access Keys to Buttons

An access key, also known as a mnemonic, is a key pressed in combination with the
“alt” key to access a control such as a button quickly.

When you assign an access key to a button, the user can trigger a Click event either by
clicking the button with the mouse or by using the access key. Users who are quick
with the keyboard prefer to use access keys instead of the mouse.

You assign an access key to a button through its Text property. For example, assume
an application has a button whose Text property is set to Exit. You wish to assign the
access key alt+X to the button, so the user may trigger the button’s Click event by
pressing alt+X on the keyboard.
To make the assignment, place an ampersand (&) before the letter x in the
button’s Text property: E&xit. The figure below shows how the Text
property appears in the Property window.
Although the ampersand is part of the button’s Text property, it is not
displayed on the button. With the ampersand in front of the letter x, the
letter will appear underlined as shown below. This indicates that the
button may be clicked by pressing alt+X on the keyboard. (On many
systems the underlining will not appear until the user presses the Alt
key.)
NOTE:

1. Access keys do not distinguish between uppercase and lowercase

characters. There is no difference between alt+X and alt+x.

2. Suppose we had stored the value &Exit in the button’s Text property. The
ampersand is in front of the letter E, so alt+E becomes the access key.
The button will appear as shown below.
Displaying the & Character on a Button

If you want to display an ampersand character on a button use two

ampersands (&&) in the Text property. Using two ampersands causes a
single ampersand to display and does not define an access key. For
example, if a button has the Text property Save && Exit the button will
appear as shown below.
 Accept Buttons and Cancel Buttons

An accept button is a button on a form that is automatically clicked when the user
presses the Enter key.

A cancel button is a button on a form that is automatically clicked when the user
presses the Esc key.

Forms have two properties, AcceptButton and CancelButton, which allow you to
designate an accept button and a cancel button. When you select these properties in
the Properties window, a down-arrow button appears, which allows you to display
a drop-down list. The list contains the names of all the buttons on the form. You
select the button that you want to designate as the accept button or cancel button.
 The PictureBox Control
The PictureBox allows you to display a graphic image on the form. A
PictureBox control can display images that have been saved in the bitmap,
GIF, JPEG, metafile, or icon graphics formats. When a PictureBox control is
placed on a form, it appears as an empty rectangle in which the image will be
displayed. You can adjust the PictureBox control’s size to make the image any
size that you want.

The PictureBox control has several properties, but the following two
properties are of particular interest:
• The Image property specifies the image file that is to be displayed by the control.

• The SizeMode property specifies how the image is to be displayed. It can be set
to one of the following values:

• Normal This is the default value. The image will be positioned in the upper-left

corner of the PictureBox control. If the image is too big to fit in the PictureBox

control, it will be clipped.

• StretchImage The image will be resized both horizontally and vertically to fit

in the PictureBox control. If the image is resized more in one direction than the

other, it will appear stretched.

• AutoSize The PictureBox control will be automatically resized to fit
the size of the image.

• CenterImage The image will be centered in the PictureBox control,

without being resized.

• Zoom The image will be uniformly resized to fit in the PictureBox

without losing its original aspect ratio. (Aspect ratio is the image’s
width to height ratio.) This causes the image to be resized without
appearing stretched.
 Inserting a Picture Control
Step 1: Locate the PictureBox icon in the Toolbox. You will find it in the
Common Controls group. When you locate the PictureBox tool, double-click
it. An empty PictureBox control appears on the form. Move the control to a
position approximately in the center of the form.

Step 2: Locate the PictureBox control’s Image property in the Properties

window. The Image property is currently set to (none), which means that no
image is displayed. Click the property and notice that a Browse button (… )
appears next to the property setting. Click the Browse button. The Select
Resource window, shown in Figure on the next slide should appear.
Step 3:As indicated in the previous Figure, in the Select Resource window select Local
Resource, and then click the Import button. When the Open dialog box appears, navigate
to the folder on your computer where the image you want to use is then select it. After you
click the OK button, you should see the graphic shown in the Select Resource window.
Click the OK button to accept the image, and you will see it displayed in the PictureBox
control.

Step 4: Make sure the PictureBox control is selected, and locate the SizeMode property in
the Properties window. Notice that the SizeMode property is currently set to Normal. Click
the down arrow and a drop-down list appears. The list shows all of the possible values for
the SizeMode property. Select Zoom from the list. This setting will resize the image so it
fits within the bounding box of the PictureBox control, without losing the image’s original
aspect ratio.
 GROUP BOXES
A group box is a rectangular border with an optional title that appears in the
border’s upper left corner. Other controls may be placed inside a group box.
You can give forms a more organized look by grouping related controls
together inside group boxes.

You use the GroupBox control to create a group box with an optional title.
The title is stored in the GroupBox control’s Text property. The figure on the
next slide shows a GroupBox control. The control’s Text property is set to
Personal Data, and a group of other controls are inside the group box.
 Creating a Group Box and Adding Controls to It
To create a group box, select the GroupBox control from the Containers
section of the Toolbox window and then draw the group box at the desired
size on the form. To add another control to the group box, select the
GroupBox control that you placed on the form, and then double-click the
desired tool in the Toolbox to place another control inside the group box.

The controls you place inside a group box become part of a group. When
you move a group box, the objects inside it move as well. When you delete
a group box, the objects inside it are also deleted.
 Moving an Existing Control to a Group Box

If an existing control is not inside a group box, but you want to

move it to the group box, follow these steps:

1. Select the control you wish to add to the group box.

2. Cut the control to the clipboard.

3. Select the group box.

4. Paste the control.

 Group Box Tab Order
The value of a control’s TabIndex property is handled differently when the
control is placed inside a GroupBox control. GroupBox controls have their own
TabIndex property, and the TabIndex value of the controls inside the group box
are relative to the GroupBox control’s TabIndex property. For example, Figure
3-40 shows a GroupBox control displayed in tab order selection mode. As you
can see, the GroupBox control’s TabIndex is set to 2. The TabIndex of the
controls inside the group box are displayed as 2.0, 2.1, 2.2, and so on.

NOTE: The TabIndex properties of the controls inside the group box will not
appear this way in the Properties window. They will appear as 0, 1, 2, and so on.
QUESTIONS