02.

User Interface Design

Objective
 To introduce some basic controls and
properties that are useful for designing a
graphical user interface

2
Outline
 Message Box
 Text Box
 Picture Box
 Check Box
 Radio Button
 Group Box
 Keyboard Accessing Key
 Tab Order
 Setting Form’s Screen Location
 Tooltips

3
Message Box
 MessageBox.Show(…) display a message box

 The MessageBox.Show() method is an overloaded method, which has more

than one argument list (signature)
 MessageBox.Show(TextMessage)
 MessageBox.Show(TextMessage, TitlebarText)
 MessageBox.Show(TextMessage, TitlebarText, MessageBoxButtons)
 MessageBox.Show(TextMessage, TitlebarText, MessageBoxButtons, MessageBoxIcon)

4
Message Box
 TextMessage
◦ String literal or variable that displays message

 TitlebarText
◦ String that appears in title bar of message box

 MessageBoxButtons
◦ MessageBoxButtons.OK
◦ MessageBoxButtons.OKCancel
◦ MessageBoxButtons.RetryCancel
◦ MessageBoxButtons.YesNo
◦ MessageBoxButtons.YesNoCancel
◦ MessageBoxButtons.AbortRetryIgnore

 We will talk about how to know which button is clicked by the user in later lecture

5
Message Box
 MessageBoxIcon
◦ MessageBoxIcon.Asterisk
◦ MessageBoxIcon.Error
◦ MessageBoxIcon.Exclamation
◦ MessageBoxIcon.Hand
◦ MessageBoxIcon.Information
◦ MessageBoxIcon.None
◦ MessageBoxIcon.Question
◦ MessageBoxIcon.Stop
◦ MessageBoxIcon.Warning

 The order of the arguments is important

6
Forms, Controls, and Properties
 Forms can have several different types of
controls such as text boxes, picture boxes,
check boxes, radio buttons, and group boxes

 Each class of controls has its own set of

properties

 To see a complete list of the properties for

any class of control, we can place a control
on a form and examine the properties list

7
Text Box (Properties)
 Allows for user input
◦ A form can have more than one text box

 Text property
◦ Set what is displayed in the text box initially
◦ Indicate what the user entered in the text box
 MessageLabel.Text = InputTextBox.Text
 (if input is “Hello”, the property of the InputTextBox.Text is “Hello”)

 TextAlign property
◦ Controls alignment of text in the text box
 InputTextBox.TextAlign = HorizontalAlignment.Left

 ReadOnly property
◦ True: cannot be edited by the user directly
 But it can still be edited by the VB code
◦ False: can be edited by the user directly

8
Clearing Text Boxes and Labels
 Set Text property equal to an Empty String
InputTextBox.Text = ""
◦ An empty string is two double quotation marks with no
space between them (i.e., "")
◦ It is also called a null string or zero-length string

 Alternatively, we can set Text property to

String.Empty or use the Clear() method of a Text
Box
InputTextBox.Text = String.Empty
InputTextBox.Clear()

9
Picture Box
 Displays or contains an image

 Image property
◦ Complete path and filename of the image
◦ Some possible extensions of the image:
 .gif, .jpg, .jpeg, .bmp, .wmf, .png

 SizeMode property
◦ StretchImage: causes the picture to be resized to match the size of the control

 Visible property
◦ True / False: make the picture appear / disappear
◦ LogoPictureBox.Visible = True

10
Check Box
 Allows the user to select or deselect zero or more items in any group

 Use the Text property for the text we want to appear next to the box

 Checked property
◦ True: the check box is checked
◦ False: the check box is not checked

 We can write an event procedure for the CheckedChanged event, which

executes when the Checked property of the check box is changed
◦ E.g., add the following in CheckBox1_CheckedChanged()
 Messagebox.Show("Selection changed")
 MessageLabel.Text = CheckBox1.Checked

11
Radio Button
 User may select at most one in any group

 Use the Text property for the text we want to appear next to the
button

 Checked property
◦ True: the radio button is selected
◦ False: the radio button is not selected

 We can write an event procedure for the CheckedChanged event,

which executes when the Checked property of the radio button is
changed
◦ E.g., add Messagebox.Show("Selection changed")

12
Radio Button
 If we want to have two groups of radio
buttons, we have to
◦ First, create two group boxes (see next page)
◦ Then, create radio buttons inside each group box

13
 Group Box
 Improves readability of the form by separating the
controls into logical groups

 Used as a container for other controls such as

radio buttons and check boxes
◦ Hence, a group box is not just for appearance

 Grouped box -> to separate diff gp of radio

buttons

14
Keyboard Access Keys
 Some people prefer to use the
keyboard (rather than the mouse)
for most operations
◦ Hot Keys (press Alt + hotkey)

 Defined using Text property

◦ Type an ampersand(&) in front of the
character we want for the hot key

Text=&OK
Text=E&xit

15
Setting the Tab Order for Controls (1
of 3)
 The control that has the focus can receive input from the keyboard
◦ At each time, at most one control can have the focus
◦ We can change the focus by pressing “Tab” on the keyboard

 Not all control types can receive the focus

◦ Text boxes, buttons, radio buttons, check boxes – focus
◦ Picture boxes, labels – no focus

 TabStop property can be applied only for controls that are capable
of receiving the focus by using “Tab”
◦ True: allow it to receive the focus
◦ False: do not allow it to receive the focus

16
Setting the Tab Order for Controls (2
of 3)
 Users should be able to use the
Tab key to move the focus
through a form in an organized
manner
◦ Top to bottom and left to right

 TabIndex property determines

the order the focus moves as
the Tab key (on the keyboard)
is pressed
◦ Number in tab sequence
◦ 0 (not 1) for the first control to
receive the focus when the form
loads

17
Setting the Tab Order for Controls (3
of 3)
 Instead of modifying
the properties of each
control one by one,
we can use Tab Order
in the View menu
◦ Click on each control in
sequence to set
TabIndex property of
the controls

18
Setting the Form’s Screen Location
 We can set the form’s screen position by
setting the StartPosition property of the Form

 To set the start position manually

◦ StartPosition = Manual
◦ Enter the initial position in the Location property of
the Form
◦ Location: based on the resolution of the screen
 (E.g. Location: 0,0 = top left )

19
Creating ToolTips
 Small label that is displayed when the user
pauses the mouse pointer over a control
◦ Add a ToolTip control to a Form
◦ The new control appears in a Component Tray,
which opens at the bottom of the Form Designer
◦ After we add the component to the form, each of
the form’s controls has a new property
◦ Select ToolTip on ToolTip1 property of each control
and add Tool Tip comments

20
Component Tray

Component Tray

21
Tips for Designing the User Interface
 The design of the screen should be easy to understand and
“comfortable” for the user
◦ Follow industry standards for the color, size, and placement of controls
◦ Match other Windows applications

 The interface should be clear and consistent

 To the user, the interface should be

◦ Familiar
◦ Comfortable
◦ Organized
 Group controls
◦ Keyboard accessible

22
References and Readings
 Programming in Visual Basic 2010.
◦ Bradley and Millspaugh, McGraw-Hill
◦ Chapter 2: User Interface Design.

23