graphical user interfaces tonga institute of higher education
TRANSCRIPT
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