Graphical User Interfaces

1
Graphical User Interfaces

• Tonga Institute of Higher Education

2
Introduction

• Programs need to adapt to input from a user.
• User Interface (UI) A set of commands or menus
  through which a user communicates with a program
• Graphical User Interface (GUI) A program that
  displays a user interface in a graphical format
• Visual Basic .NET makes it very easy to create a
  professional UI or GUI

3
Forms

• Form - A window that makes up an application's
  user interface.

4
Controls - 1

• Control - An object in a form
• Provide a user interface
• TextBox
• ComboBox
• CheckBox
• OpenFileDialog
• Etc.
• Provide extra functionality
• ImageList
• Timer
• Etc.

5
Controls - 2

• Label
• Adds text to the window
• TextBox
• Allows user to enter text

Label
Form
TextBox
6
Controls - 3

• ComboBox
• Allows user to select one option from a list of
  options
• The user may see the options when they click on
  the control
• RadioButton
• Allows user to select an option from a group of
  options
• Only one option may be selected at a time
• Lets users see options
• CheckBox
• Allows user to turn one option on or off (True or
  False)

RadioButton
CheckBox
ComboBox
7
Controls - 4

• Group Box
• Contains related controls
• Button
• Initiates code when clicked

Button
Group Box
8
Demonstration

• Adding Controls to your form

9
Properties

• Property - Characteristic of an object
• Use properties to customize how a form or control
  behaves
• Forms have many properties
• Form.Name
• Form.BackColor
• Form.Text
• Form.FormBorderStyle
• And much more
• Controls have many properties
• TextBox.Name
• TextBox.Font
• TextBox.BorderStyle
• TextBox.TextAlign
• And much more

10
Demonstration

• Adding a Button and changing form and control
  properties for WindowsApplication1

11
Class Activity

• Create a Windows application named HelloWorld
• Change the size of the form to have a width of
  200 and a height of 200
• Add a button to the form
• Make the button have a width of 100 and a height
  of 100
• Center the button on the screen
• Change the color of the form to Lavender using
  the Form1.BackColor property
• Change the title of the form to Hello World!
  using the Form1.Text property
• Change the style of the button to be flat using
  the Button1.FlatStyle property
• Run your program

12
Where is the code?

• There is code behind the form.
• To see the code Right-click on the form and
  select View Code.
• Every change you make through Visual Studio.NETs
  graphical user interface is recorded by adding,
  changing or deleting code behind the scenes.
• Most of this code is hidden in the " Windows Form
  Designer generated code region
• Beginners should not modify this code
• Experts can modify this code

13
Demonstration

• Changing a property and seeing the code behind
  the form automatically change