Hawassa University
Chapter 4
Designing Graphical User
Interface (GUI)
1
Chapter Outline
• Introduction to GUI
• Naming controls
• Some basic controls and their properties
• Interface styles
2
Introduction
GUI (Graphical User Interface) allows the user to interact
visually with a program.
Windows applications use different GUI controls to interact with
the user.
They display information on the screen, or enables users to
interact with an application via the mouse, keyboard or other
form of input
• Windows application development uses System.Windows.Forms
namespace to create forms and other GUI controls.
• This namespace contains all of the controls used on the average
Windows interface
• The commonly used GUI controls include Form, Label,
TextBox, Button, Menu, CheckBox, ComboBox, ListBox,
Treeview, ListView, e.t.c
• Each control has properties (and some methods). E.g. properties:
Enable, Font, Text, Visible; E.g. methods: Hide, Select, Show
3
4
Naming Controls
• In C#, default names for controls/components are:
button1, label1, textbox1, etc. not very descriptive
(“generic”)
• Use better, descriptive names—Names to have
meanings that make sense
• Conventions for naming controls - start the control
name with short notation of the name of the control
5
Naming Controls(cont..)
• Control • Begin name with
– Button – btn
– TextBox – txt
– ListBox – lbox
– Label – lbl
– SaveFileDialog – Sfd
– Form – frm
Examples of Naming Controls
– A button used to calculate a total:
– btnCalcTotal
– A textbox that allows a user to enter her name:
– txtEnterName
6
Form Class
• This is the top-level window class
• This class contains all other controls
• Normally, your top-level form inherits from the Form
class
• Although the class has numerous methods, most of the
time you interact with it via properties and delegates
7
Form Properties
Property Description
Location Point of to left corner
Size Size of form in pixels
Text Text displayed or caption
AutoScaleDimensions DPI resolution of display it was built for. Will be scaled
to look correct on other displays.
BackColor Background color
ForeColor Foreground or drawing color
ClientSize Size of drawing area without borders or scrollbars
Controls A collection of controls owned by the form
WindowState Whether maximized, minimized or normal
DefaultSize Size when initially created
MinimumSize Minimum size window can be resized to
MaximumSize Maximum size window can be resized to
8
Form Events
• Forms provide support for a large number of events
• You add one or more delegates to these events
• When the event happens, the delegates are invoked
• The delegates must have the signature of an event handler
• void EventHandler(object sender, EventArgs e)
9
Form Events(cont..)
Event Description
Load Just before form is loaded the first time
Closing Just before the form is closed
Closed When the form is actually closed
Shown Occurs when a form is first displayed
ResizeBegin Resize operation has begun
ResizeEnd Resize operation has ended
10
Form Methods
Method Description
Activate Activates the window and gives it focus
Close Closes the form
Show Makes the form visible
BringToFront Moves to top of stacking order
Hide Makes the form invisible
Focus Gives the form focus
11
Label
• Labels are one of the most frequently used C#
control.
• We can use the Label control to display text in a set
location on the page.
• Label controls can also be used to add descriptive
text to a Form to provide the user with helpful
information.
• The Label class is defined in the
System.Windows.Forms namespace
12
TextBox
• This is a single line or multi-line text editor
• Multiline – get/set Boolean to make multiline
• AcceptsReturn – in a multiline box, if true then
pressing Return will create a new line. If false then
the button referenced by the AcceptButton
property of the form, will be clicked.
• PasswordChar – if this is set to a char, then the box
becomes a password box
• Text– get/set text from/to textbox.
• e.g. textBox1.Text = “http://www.gmail.com";
• string var = textBox1.Text;
13
TextBox(cont..)
• ReadOnly – if true, the control is grayed out
and will not accept user input
• ScrollBars – determines which scrollbars will
be used: ScrollBars.None, Vertical, Horizontal,
Both
• TextAlign – get/set HorizontalAlignment.Left,
Center, or Right
• TextChanged – event raised when the text is
changed
14
CheckBoxes
• Labeled boxes which can be checked or unchecked
• Checked – get/set Boolean to determine if
box is checked
• CheckedChanged – delegate called when
the box is checked or unchecked
15
GroupBox
• Displays a border around a group of controls
• Can have optional label controlled by Text property
• Controls can be added by
• Placing them within the group box in the designer
• Adding to the Controls list programmatically
16
Panels
• A panel is like a group box but does not have a text label
• It contains a group of controls just like group box
• BorderStyle – get/set border style as
• BorderStyle.Fixed3D
• BorderStyle.FixedSingle
• BorderStyle.None
17
Radio Buttons
• Radio buttons are similar to checkboxes, but
• Appear slightly different
• Allow buttons to be grouped so that only one can be
checked at a time
• A group is formed when the radio buttons are in the same
container – usually a group box or panel
• Checked – get/set Boolean indicating if the
button is checked
• CheckedChanged – delegate invoked when the
button is checked or unchecked
18
File Dialog
• The file dialog allows you to navigate through
directories and load or save files
• This is an abstract class and you use
• OpenFileDialog
• SaveFileDialog
• You should create the dialog once and reuse it so
that it will remember the last directory the user had
navigated to
19
File Dialog(cont...)
• InitialDirectory – string representing
the directory to start in
• Filter – a string indicating the different
types of files to be displayed
• A set of pairs of display name and pattern separated by
vertical bars
• Windows Bitmap|*.bmp|JPEG|*.jpg|GIF|*.gif
• FilterIndex – the filter to use as an origin 1
index
20
File Dialog(cont..)
• FileName – the name of the file selected
• ShowDialog – a method to show the dialog and
block until cancel or OK is clicked
if (openDialog.ShowDialog() == DialogResult.OK) {
Image img = Image.FromFile(openDialog.FileName);
pictureBox1.Image = img;
}
21
Image Class
• An abstract class that can store an image
• Several concrete classes are used for
image types such as BMP, GIF, or JPG
• FromFile(string fname) – loads any supported
image format from a file
• FromStream(stream) – loads an image from a
stream
• Height – image height
• Width – image width
22
PictureBox Class
• This displays an image
• Image – assigned an Image object to display
• SizeMode – determines what to do if the image does
not fit into the window
• Normal
• StretchImage
• AutoSize
• CenterImage
• Zoom
23
ToolTips
• These are the small pop-up boxes which explain the
purpose of a control
• To use
• Create a new tooltip control in the designer
• Drop the tooltip onto the form
• The tooltip will appear on a tray below the form
24
ToolTips(cont..)
• After the tooltip appears in the tray, a new tooltip property
appears for every component
• This can be assigned different text for each component
• That text will be displayed when the mouse hovers over
that component
private void toolTip1_Draw(object sender, DrawToolTipEventArgs e) {
//change tooltip method to toolTip_Draw using property window
e.DrawBackground();
e.DrawBorder();
e.DrawText(); }
Under each component, write a code to display its name;
private void textBox1_MouseHover(object sender, EventArgs e){
toolTip1.OwnerDraw = true;//used for other components too
toolTip1.Show("This is textBox1", textBox1);
toolTip1.BackColor = Color.Purple;//used for other components too
toolTip1.ForeColor = Color.Red;//similarly }
toolTip1.Show("This is textBox2", textBox2);// under textbox2, … etc
25
NumericUpDown
• This allows the selection of an integer from a limited range
• Also called a spinner
• Minimum – smallest selectable value
• Maximum – largest selectable value
• Increment – size of increment per click
• Value – the selected value
• ValueChanged – event raised when the value changes
26
MonthCalendar
• A control which displays a calendar for the selection
of a range of dates
• MinDate – the first selectable date
• MaxDate – the last selectable date
• SelectionStart – DateTime of start of selection
• SelectionEnd – DateTime of end of selection
• DateChanged – event raised when date is changed
27
DateTimePicker
• Similar to a month calendar but
• Calendar pulls down and selection displayed
• More configurable
• Selects a single value, not a range
• Properties/methods
• Format – Long, Short, Time, Custom
• Value – DateTime value selected
• ValueChanged – event which fires when date or
time changes
28
Menus
• Pulldown menus provide a way to select
commands and options
• Normally these are in a MenuStrip across the
top of the application
• Begin by placing a MenuStrip across the
application
• It displays boxes into which menu items and
cascading menus can be typed
29
Menus(cont..)
• The type here text allows new
items to be added
• When you click on type here a
pull down appears letting you
select
• Menu item
• ComboBox
• Separator
• TextBox
30
MenuItem Properties
• Checked – if true displays check mark
• CheckOnClick – check state changes
when clicked
• CheckState – one of
• CheckState.Checked
• CheckState.Unchecked
• CheckState.Indeterminate
• ShortcutKeys – a member of the
Shortcut enumeration indicating the
shortcut key
31
MenuItem
• Click – event which is raised when the
menu item is clicked
• Menu items are similar to buttons and are
handled in the same way
32
ComboBox Menu Items
• You can use a ComboBox as a menu item
• Use the designer to add a set of Items to the combo box
• You can then select a value
• The click event is raised only when you click on the
selected value, not when you change the selection
• If you have nothing selected, the selected item will be
null
33
TreeView
• Presents a hierarchical tree view of the
data
• Nodes can be
• Selected
• Expanded and collapsed
• Text of nodes can be edited
• Nodes can be added or deleted
programmatically
34
TreeNode
• All nodes in the tree are instances of TreeNode
• Constructors
• TreeNode(string displayText)
• Properties
• Nodes – get TreeNodeCollection of all
children of this node
• Text – the displayed text
• Checked – true if the node is checked
• FullPath – the labels of all nodes from the
root to this node separated by “\\”
35
TreeNode(cont..)
• NextNode – returns next sibling
• PrevNode – returns previous sibling
• Methods
• Collapse – collapses the node
• Expand – expands the node
• ExpandAll – expands all children of this node
• GetNodeCount – returns the number of child
nodes
36
TreeView
• This is the actual control
• Properties
• Nodes – get TreeNodeCollection of all children
of this node
• CheckBoxes – if true, displays checkboxes
beside tree nodes
• SelectedNode – the selected node
• LabelEdit – if true, node text can be edited
37
TreeView
• Events
• AfterSelect – after a node is selected
• AfterExpanded – after a node is expanded
• AfterCollapsed – after a node is
collapsed
• AfterEdited – after a node is edited
38
TabControl
• Displays a series of tabs
• Each tab is a different page with
its own controls on it
• Each tab is like a group box or
panel
• Create
• In Visual Studio
• Drop controls into the tab pages
• Set the text property of every page to
change the label
• Right click on a tab and select “Add Tab”
to add a new tab
39
TabControl(cont..)
• Multiline – if true tabs can be in several
lines
• SelectedIndex – index of selected tab
• SelectedTab – the selected tab
• TabPages – collection of TabPages
• SelectedIndexChanged – event raised
when a different tab is selected
40
Automatic Layout
• All of the forms we have seen so far have been laid
out based on X-Y coordinates
• If the outer form is resized, the contents stay at the
same size and position
• There are three ways to change this
• The Dock property
• The FlowLayoutPanel
• The TableLayoutPanel
41
The Dock Property
• Every control has a Dock property which
can be set to
• None – no docking
• Left – docked to left side of container
• Right – docked to right side of container
• Top – docked to top of container
• Bottom – docked to bottom of container
• Fill – fills all available space
42
The Dock Property(cont..)
• When controls are docked to the sides of their
containing form, resizing the form resizes the controls
inside as well
43
FlowLayoutPanel
• Arranges its contents into horizontal or
vertical rows
• As form is resized, controls are
arranged into new rows or columns
• Created in designer by dropping
controls into it
• In designer it has small arrow on the
top that activates menu of editing
actions
44
FlowLayoutPanel(cont..)
• FlowDirection – layout direction
• BottomUp
• TopDown
• LeftToRight
• RightToLeft
• WrapContents – whether the contents
should be wrapped to a new row or
column or clipped
45
TableLayoutPanel
• Arranges the controls within it into rows and columns
• Automatically resizes contents when the surrounding
form is resized
• The pull-out menu in designer can be used to add or
delete rows and columns
• ColumnCount – get/set number of columns
• RowCount – get/set number of rows
46
MessageBox
• A pop-up dialog which displays a message
• MessageBox.Show("Yes No Cancel Message Box Click
one?", "Yes No Cancel Buttons",
MessageBoxButtons.YesNoCancel,MessageBoxIcon.Questi
on);
• The following are the different messagebox
47
DialogResult
• Is used to get the type of button clicked on the messagebox
• The following are the results that can be retrieved using
• Abort DialogResult dr=new DialogResult ();
• Cancel dr=MessageBox.Show("Yes No Cancel Message
Box Click one?", "Yes No Cancel Buttons",
• Ignore MessageBoxButtons.YesNoCancel,
MessageBoxIcon.Question);
• No if (dr == DialogResult.Yes)
• None {
MessageBox.Show("Yes Button Clicked!");
• OK }
• Retry else if (dr == DialogResult.No)
{
• Yes MessageBox.Show("No Button Clicked!");
}
else if (dr == DialogResult.Cancel)
{
MessageBox.Show("Cancel Button Clicked!");
}
48
49
