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 TextBox Label Form

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) ComboBox RadioButton CheckBox

7. Controls - 4 Group Box  Contains related controls Button  Initiates code when clicked Group Box Button

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 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 form 4. Make the button have a width of 100 and a height of 100 5. Center the button on the screen 6. 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

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.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

13. Demonstration Changing a property and seeing the code behind the form automatically change