Introduction to C# Graphical User Interface

Graphical User Interface
Topic 2
PetershamTAFEC#.NET
1
Learning Objectives
1. Introduction
2. Event-Driven Programming
3. Windows Forms Application
4. Controls
5. Event Handling
6. Message or Dialog Box
PetershamTAFEC#.NET
2
1 - Introduction
PetershamTAFEC#.NET
3
• The user interface (UI) is the part of a software that users
can use to interact with computers.
• The user interface has two components: input and output
• Input is how a user communicates with the computer.
• Output is how the computer reports the results to the user.
• A graphical user interface (GUI) is a user interface that
displays information in a window.
• A GUI can be a simple message box or a complex window
with many interactive visual controls .
• GUIs can include textboxes, buttons, pictures, sounds and
other controls.
2- Event-Driven Programming
PetershamTAFEC#.NET
4
• GUIs like require the use of event-driven programming
• In the event-driven programming model:
1. When the user performs an action (event trigger) at the
user interface level (clicks a mouse or presses a key), this
causes an event to be issued.
2. Events are objects that describe what has happened.
When an event occurs, it sends a message to the
program. The control does not perform actions, but rather
informs another object to perform the action.
3. An event listener is a class provided by the programmer.
Its methods (event handler) contain the instructions that
need to be executed when the events occur.
Event-Driven Programming (continued)
PetershamTAFEC#.NET
5
User presses button
Button
event
object
event
listener
Controls generates event object
Response to user
Registered with control
3 – Windows Forms Application
PetershamTAFEC#.NET
6
Windows Forms Application (continued)
PetershamTAFEC#.NET
7
• You can drag and drop controls from the toolbox onto the
form.
• The Solution Explorer you can see all open projects and
their associated files.
• The Properties Window contain all the properties/events
of the selected item.
• The Toolbox contains a selection of all the controls
available to build the GUI
Windows Forms Application (continued)
PetershamTAFEC#.NET
8
4 - Controls
• Controls inherit from the System.Windows.Forms.Control
class.
• All controls have properties that are used to change the
appearance and behaviour of the control.
• Controls generate events.
• You can drag and drop controls from the toolbox onto the
form.
• All controls have a (name) property:
PetershamTAFEC#.NET
9
Controls (continued)
• Examples: the naming conventions that can be used with
.NET controls (name) property starts with:
Button btn
CheckBox cbx
ComboBox cmb
Container ctr
GroupBox gbx
Label lbl
ListBox lbx
Panel pnl
PictureBox pbx
TextBox txt
PetershamTAFEC#.NET
10
Controls (continued)
• Button - An implementation of a "push" button.
• Label - Used to display text as labels on the screen
• TextBox:
1. display and entry of a single line of text.
2. Multiline property – display and entry of multiple lines of text
3. PasswordChar property - display and entry of a single line of
text but does not show the original characters
PetershamTAFEC#.NET
11
Controls (continued)
PetershamTAFEC#.NET
12
• Radio buttons RadioButton
• For a small set of choices
• only one button can be selected at a time
• When a button is selected, previously selected button in set is
automatically turned off
• Container controls like GroupBox or Panel are used to create a
multiple-exclusion scope for a set of buttons
• Check boxes CheckBox
• Two states: checked and unchecked
• Use a group of check boxes when one selection does not exclude
another
• Combo boxes ComboBox
• For a large set of choices. Combo: combination of a list and a text
field.
• DropDownStyle – Simple, DropDown, DropDownList
5 - Event Handling
PetershamTAFEC#.NET
13
When you double-click the button control Visual Studio
register or associate the event with the method that will
handle the event.
1. An instance of the delegate EventHandler is added to
the event in the InitializeComponent() method.
2. The event handler is added in the code behind the
form. The event handler is called whenever the event
occurs.
6 – Message or Dialog Box
PetershamTAFEC#.NET
14
• Use MessageBox Class with the static Show()
overloaded method to display a message box that can
contain text, buttons, and symbols that inform and
instruct the user.
• MessageBoxButtons Enumeration:
OK, OKCancel, AbortRetryIgnore, YesNoCancel, YesNo,
RetryCancel
• MessageBoxIcon Enumeration:
Hand, Question, Exclamation, Asterisk, Stop, Error, Warning,
Information
• DialogResult Enumeration:
None, OK, Cancel, Abort, Retry, Ignore, Yes, No
Message or Dialog Box (continued)
PetershamTAFEC#.NET
15
Graphical User Interface
PetershamTAFEC#.NET
16
Labs
Additional Resources
PetershamTAFEC#.NET
17
Videos for Visual C#
http://msdn.microsoft.com/en-us/vstudio/bb798022
MSDN The C# tutorials
http://msdn.microsoft.com/en-us/library/aa288436(v=vs.71).aspx
Summary and Review
PetershamTAFEC#.NET
18
Q/A
PetershamTA...