13.

1 Introduction

Graphical User Interface (GUI)

Gives a program distinctive look and feel

Built from GUI controls (Fig. 13.2)

Objects that can display information on the screen or enable users to interact with an
application
Implements IComponent interface

GUI (HU 2015/16)

 Common GUI events:

mouse move
mouse click
mouse double-click
key press
button click
change in focus
window activation

Cont.

GUI (HU 2015/16)

13.2 Windows Forms

Windows Forms

Used to create GUIs for programs

Graphical element that appears on your computers desktop
Active window is the front most window
A Form is a container for controls and components
In visual programming, Visual Studio generates much of the GUI-related code

GUI (HU 2015/16)

Form Properties
Property

Description

Size

Size of form in pixels

Location
Text

AutoScaleDimensions
BackColor
ForeColor

ClientSize
Controls

Point of to left corner

Text displayed or caption

DPI resolution of display it was built for. Will be scaled to look correct
on other displays.
Background color

Foreground or drawing color

Size of drawing area without borders or scrollbars

A collection of controls owned by the form

WindowState

Whether maximized, minimized or normal

MinimumSize

Minimum size window can be resized to

DefaultSize

MaximumSize

Size when initially created

Maximum size window can be resized to

GUI (HU 2015/16)

Form Events
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

GUI (HU 2015/16)

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

GUI (HU 2015/16)

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

GUI (HU 2015/16)

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

GUI (HU 2015/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

GUI (HU 2015/16)

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

GUI (HU 2015/16)

10

Radio Buttons

Checked get/set Boolean indicating if the button is checked

CheckedChanged delegate invoked when the button is
checked or unchecked

GUI (HU 2015/16)

11

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
GUI (HU 2015/16)

12

TextBox

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

GUI (HU 2015/16)

13

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

GUI (HU 2015/16)

14

File Dialog

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

GUI (HU 2015/16)

15

File Dialog
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;
}

GUI (HU 2015/16)

16

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

GUI (HU 2015/16)

17

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

GUI (HU 2015/16)

18

ToolTips

These are the small pop-up boxes which explain the purpose of a
control
To use
Create a new tooltip in the designer
Drop the tooltip onto the form
The tooltip will appear on a tray below the form

GUI (HU 2015/16)

19

ToolTips

GUI (HU 2015/16)

20

ToolTips

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

GUI (HU 2015/16)

21

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

GUI (HU 2015/16)

22

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
GUI (HU 2015/16)

23

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

GUI (HU 2015/16)

24

System.DateTime Structure
A structure representing a date and time
Constructors

DateTime(int d, int m, int y)

DateTime(int d, int m, int y, int h, int m, int s)

Properties

Now returns a DateTime object set to the current local time

GUI (HU 2015/16)

25

DateTime

Day day from 1-31

Month month from 1-12
Year tear from 1-9999
Hour from 0-23
Minute minute from 0 -59
Second second from 0 -59
Millisecond millisecond from 0-999
GUI (HU 2015/16)

26

DateTime
DayOfWeek get enumeration of Sunday, Monday,
DayOfYear day of year from 1 366

Methods

DateTime
DateTime
DateTime
DateTime
DateTime
DateTime

AddYears(double value)
AddMonths(double value)
AddDays(double value)
AddHours(double value)
AddSeconds(double value)
AddMilliseconds(double value)
GUI (HU 2015/16)

27

DateTime

TimeSpan Subtract(DateTime)
int CompareTo(DateTime)
static DateTime Parse(string)
ToLongDateString()
ToShortDateString()
ToLongTimeString()
ToShortTimeString()

GUI (HU 2015/16)

28

ListBox

The ListBox presents a list of items which can be

selected
A scrollbar is displayed if needed

MultiColumn displays list as multiple columns

SelectedIndex index of selected item
SelectedIndices collection of selected indices
SelectedItem the selected item

GUI (HU 2015/16)

29

ListBox

SelectedItems collection of selected items

SelectionMode how items can be selected

None no selection
One single selection
MultiSimple each click selects additional item
MultiExtended uses shift and control keys

Sorted if true the items will be sorted alphabetically

GUI (HU 2015/16)

30

ListBox

Items a collection of items in the list box

ClearSelected method to clear selection
GetSelected returns true if the parameter passed is selected
SelectedIndexChanged event when selection changes

GUI (HU 2015/16)

31

Populating a ListBox

Any object can be placed into a ListBox

The display is generated by ToString()
for(int i = 0; i < 50; i++) {
listBox1.Items.Add(
"Item " + i.ToString());
}

GUI (HU 2015/16)

32

ComboBox

A combo box is like a list but lets you displays a selected value.
The list pulls down when a selection is being made.
Options allow the selected text to be editable or to require it to be
selected from the drop-down list

GUI (HU 2015/16)

33

ComboBox

DropDownStyle

Simple text is editable & list always visible

DropDown default indicating text is editable & user must click to see list
DropDownList value is not editable & user must click to see list

Items the collection of items in the list

GUI (HU 2015/16)

34

ComboBox

MaxDropDownItems max number of items in pulldown before

scrollbar used
SelectedIndex index of selection
SelectedItem selected item
Sorted whether entries are sorted
SelectedIndexChanged event raised when selection changes

GUI (HU 2015/16)

35

Code-behind

Events are handled by methods that live behind GUI

our job is to program these methods

GUI (HU 2015/16)

36