Graphical User Interfaces

Tonga Institute of Higher Education

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

Forms Form - A window that

makes up an application's user interface.

Controls - 1 Control - An object in a

form Provide a user interface

TextBox ComboBox CheckBox OpenFileDialog Etc.

Provide extra functionality ImageList Timer Etc.

Controls - 2 Label

Adds text to the window TextBox

Allows user to enter text

TextBox

Label

Form

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)

ComboBox

RadioButton

CheckBox

Controls - 4 Group Box

Contains related controls Button

Initiates code when clicked

Group Box

Button

Demonstration

Adding Controls to your form

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

Demonstration

Adding a Button and changing form and control properties for WindowsApplication1

Class Activity

1. Create a Windows application named “HelloWorld”

2. Change the size of the form to have a width of 200 and a height of 200

3. Add a button to the form4. Make the button have a width of

100 and a height of 1005. Center the button on the screen6. Change the color of the form to

Lavender using the Form1.BackColor property

7. Change the title of the form to “Hello World!” using the Form1.Text property

8. Change the style of the button to be flat using the Button1.FlatStyle property

9. Run your program

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.NET’s 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

Demonstration

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