GRAPHICAL
USER
INTERFACE
CONCEPT
LESSON CONTENT
• Graphical User Interface Definitions and Concepts
• Creating Graphical User Interfaces
• The Windows Form
• Event Handling
• Working with labels, TextBoxes and Buttons
• GroupBoxes and Panels
• Checkboxes and radioButtons
• Adding Menus and Other Control
LESSON OBJECTIVES
• Understand the design and principles of GUI;
• Generate Windows form and set its properties;
• Add basic controls to a form and set its properties;
• Handle events and implement methods;
• Use basic containers to arrange controls with similar
functions and ;
• Add menus and their components
WHAT IS GUI?
Graphical User Interface
Allows user to interact visually with a program
It gives a program a distinctive “look” and “feel” enabling user
to get familiar with the application’s environment and learnits
feature more quickly.
Built from different components (also called controls or
widgets)
BASIC GUI CONTROLS
• LABEL
• TEXTBOX
• BUTTON
• RADIO BUTTON
• CHECKBOX
• PANEL
• GROUPBOXES
THE WINDOWS FORM
Used as the base for creating GUIs for program.
It acts as the container for all the controls and components.
EVENT HANDLING
• The GUI allows the user to interact with the program by
generating events. These interactions can be evoked by
moving the mouse, clicking the mouse, selecting menu, typing
in a textbox, calling a method as triggered by the event.
Working with WINDOWS FORM
Create a simple Windows Application. The application contains 2
forms: Form 1 contains a label and four buttons (btnRed, btnBlue,
btnWhite, btnForm2) and Form 2 contains a label and two
buttons (btnForm1 and btnExit).
Public Class Form1
Private Sub Button1_Click(sender As Object, e As EventArgs) Handles
Button1.Click
BackColor = Color.Red
End Sub
Private Sub Button2_Click(sender As Object, e As EventArgs) Handles
Button2.Click
BackColor = Color.Blue
End Sub
Private Sub Button3_Click(sender As Object, e As EventArgs) Handles
Button3.Click
BackColor = Color.White
End Sub
Private Sub Button4_Click(sender As Object, e As EventArgs) Handles
Button4.Click
Form2.Show()
Me.Hide()
End Sub
Working with
LABEL,
TEXTBOXES
and BUTTON
CONTROLS
LABEL – normally used to hold Text on the Form
TEXTBOX – used either to display a text or accept
input from the user.
BUTTON – the corner stone of almost all windows
application. With this control, a user can activate an
event that calls a method or procedure.
COMMON LABEL PROPERTIES
FONT The font used by the text on
the label
TEXT The text that appears on the
label
TEXT ALIGN The alignment of the label’s
text on the control
TEXTBOX PROPERTIES AND EVENTS
TEXTBOX PROPERTIES
AcceptReturn Gets or sets a value indicating whether pressing
ENTER in a multiline textbox control creates new line
of text in the control or activates the default button
for the form
Multiline Gets or sets value indicating whether this is a multiline
Textbox control
PasswordChar Gets or sets the character used to mask characters of
as password in a single line TextBox control
ReadOnly If set to TRUE, the Text cannot be edited. The default
value is FALSE
Scrollbars For multiline textboxes, indicating which scrollbars
appear
Text The text box text content
TEXTBOX COMMON EVENTS
TextChanged Generated when text changes in Textbox
BUTTONS COMMON PROPERTY
Text Specifies text displayed on the Button
COMMON EVENT
Click Generated when user click the control
Case Study
Create a windows
application that accepts
message from the user
(using Textbox). The
PasswordChar is set to
mask each character typed
by the user. On a click
button (btnShow) the
message will be decrypted.
The decrypted message will
be shown using a label
control.
Double click the button and type below codes:
lblMessage.Text = txtMessage.Text
GROUPBOXES AND PANELS
• GroupBoxes and Panels are used to arrange controls. Similar controls
were usually grouped together and placed inside a GroupBox or Panel.
• All controls placed inside a GroupBox or panel move together when
GroupBox or Panel is moved.
GROUPBOX
• has thin borders
• Can display a caption but do not include scrollbars.
PANELS
• Can also have borders by changing their borderstyle property.
• Can include scrollbars but do not include caption.
WORKING
WITH
GROUPBOXES
AND PANELS
CREATE A WINDOWS APPLICATION THAT
CONTAINS A GROUPBOX AND A PANEL.
CHECKBOXES AND RADIO BUTTON
• Controls that can be in the ON/OFF state.
RADIOBUTTONS
• Usually organized into groups and that only one of the
RadioButtons in the group can be selected at any time.
CHECKBOXES
• Small white-square that is either blank or contains
a checkmark.
Label1.Font = New
Font(Label1.Font.Name,
Label1.Font.Size,
Label1.Font.Style Xor
FontStyle.Bold)
Private Sub CheckBox1_CheckedChanged(sender As Object, e As EventArgs) Handles
CheckBox1.CheckedChanged
Label1.Font = New Font(Label1.Font.Name, Label1.Font.Size, Label1.Font.Style
Xor FontStyle.Bold)
End Sub
Private Sub CheckBox2_CheckedChanged(sender As Object, e As EventArgs) Handles
CheckBox2.CheckedChanged
Label1.Font = New Font(Label1.Font.Name, Label1.Font.Size, Label1.Font.Style
Xor FontStyle.Italic)
End Sub
Private Sub RadioButton1_CheckedChanged(sender As Object, e As EventArgs) Handles
RadioButton1.CheckedChanged
Me.BackColor = Color.Red
End Sub
Private Sub RadioButton2_CheckedChanged(sender As Object, e As EventArgs) Handles
RadioButton2.CheckedChanged
Me.BackColor = Color.Yellow
End Sub
Private Sub RadioButton3_CheckedChanged(sender As Object, e As EventArgs) Handles
RadioButton3.CheckedChanged
Me.BackColor = Color.Blue
End Sub
WORKING
WITH MAIN
MENU AND
MENU ITEMS
MENUS
• Are essential elements of GUIs.
• Used to organize set of related commands without cluttering the
interface. Menus contain commands called menu items. Other
menu may contain additional submenus within a menu.
DOUBLE CLICK “ABOUT”
Private Sub AboutToolStripMenuItem_Click(sender As
Object, e As EventArgs) Handles
AboutToolStripMenuItem.Click
MessageBox.Show("This is an Example of using
Menus.", "ABOUT", MessageBoxButtons.OK,
MessageBoxIcon.Information)
End Sub
EXIT
Private Sub
ExitToolStripMenuItem_Click(sender As Object,
e As EventArgs) Handles
ExitToolStripMenuItem.Click
End
End Sub
Private Sub ClearColor()
RedToolStripMenuItem.Checked = False
YellowToolStripMenuItem.Checked
= False
BlueToolStripMenuItem.Checked =
False
End Sub
RED
ClearColor()
lblDisplay.ForeColor = Color.Red
RedToolStripMenuItem.Checked = True
BLUE
ClearColor()
lblDisplay.ForeColor = Color.Blue
BlueToolStripMenuItem.Checked = True
YELLOW
ClearColor()
lblDisplay.ForeColor = Color.Yellow
YellowToolStripMenuItem.Checked = True
Private Sub ClearFont()
TimesNewRomanToolStripMenuItem.Checked =
False
CourierToolStripMenuItem.Checked = False
ComicSansMSToolStripMenuItem.Checked =
False
End Sub
TIMES NEW ROMAN
ClearFont()
TimesNewRomanToolStripMenuItem.Checked =
False
lblDisplay.Font = New Font("Times New
Roman", 30, lblDisplay.Font.Style)
COURIER
ClearFont()
CourierToolStripMenuItem.Checked =
False
lblDisplay.Font = New Font("Courier",
30, lblDisplay.Font.Style)
