Visual programming

Chapter 4: GUI (Graphical User

Interface) Part II
Eman Alnaji
Dareen Hamoudeh
Contents
Mouse Events ListBox
Keyboard Events ComboBox
NumericUpDown List View
ToolTip Image List
LinkLabel TreeView
Menus Multiple Forms

2
Mouse Events
Mouse Events: Are those events that associated to
mouse actions. And can be related to the form as a
whole, or to a certain control.

3
Mouse Events
MouseMove: occurs when the mouse cursor moves over a form or a
certain control.
MouseClick: occurs when the user clicks on the form or on certain
control with the mouse button (any button click will cause this event).
MouseEnter: occurs when the mouse cursor enters in the borders of a
form or a certain control.
MouseLeave: occurs when the mouse cursor leaves the area of a form or a
certain control.
MouseDown: occurs when the user presses over a mouse button, and
keeps pressing. (any button).
MouseUp: occurs when the user releases the mouse button. (any button).
MouseHover: occurs when the mouse cursor hovers over a form or a
certain control.

4
Mouse Events Arguments
According to the mouse event handled, certain events
arguments are used.
One of two event arguments classes would appear in
the header of the Mouse Event Handler.
MouseEventArgs: This event arguments class will be
used in the events (MouseClick, MouseMove,
MouseDown and MouseUp), and it contains special
properties of the mouse.
EventArgs: The ordinary event arguments class, that is
usually associated with any event handler. It doesn’t
contain any special properties of the mouse.
5
MouseEventArgs
This class will appear in the header of the mouse
events: MouseClick, MouseMove, MouseDown and
MouseUp.

The argument “e”, which is of class “MouseEventArgs”

will contain the following mouse properties:

6
MouseEventArgs
X: of type int; and returns the X coordinate of the
mouse cursor over a form or a certain control.
Y: of type int; and returns the Y coordinate of the
mouse cursor over a form or a certain control.
Button: of type MouseButtons; which is a
enumeration that has the values (Left, Right and
Middle), which indicate which mouse button was
clicked and caused the event.

7
Keyboard Events
Keyboard Events: Are events associated with the
keyboard keys. Whenever a user presses on any key on
the keyboard, these events take place.

8
Keyboard Events
KeyPress: occurs when the user presses on a certain
key in the keyboard.

KeyDown: occurs when the user presses on a certain

key in the keyboard and keeps pressing.

KeyUp: occurs directly when the user releases the key

in the keyboard.

9
Keyboard Events Arguments
According to the keyboard event handled, certain
events arguments are used.
One of two event arguments classes would appear in
the header of the keyboard Event Handler.
KeyPressEventArgs: This event arguments class will be
used in the event KeyPress, and it contains special
properties of the key.
KeyEventArgs: This event arguments class will be used
in the event KeyDown and KeyUp, and it contains
special properties of the key.

10
KeyPressEventArgs
 The main property retrieved by this class is: KeyChar.

 KeyChar: of type char; it retrieves the actual character printed by the

key pressed. (only printable characters, non-printable characters won’t
retrieve data in this property).

11
KeyEventArgs
Exists in both KeyDown and KeyUp event handlers.

Properties enclosed in this class:

KeyCode: of type Keys; which is an enumeration that contains all
possible keys on the keyboard (printable and non-printable).
KeyData: of type Keys; but it differs that KeyCode. KeyCode will return
the last pressed key, while KeyData will return all keys pressed at the
same time.
KeyValue: of type int; returns an integer value that represents the key
on the keyboard.
Alt: of type bool; returns true if Alt key is pressed, false if not.
Shift: of type bool; returns ture if Shift key is pressed, false if not.
Control: of type bool; returns true if Ctrl key is pressed, false if not.

12
NumericUpDown
NumericUpDown: is used as a counter, it has a
numeric value that can be incremented and
decremented using arrows, and the user can also write
a certain value in it, as long as it is within the
minimum and maximum values.

13
NumericUpDown - Properties
Value: the current numeric value displayed on the control.
Minimum: The minimum value allowed in the
NumericUpDown.
Maximum: The maximum value allowed in the
NumericUpDown.
Increment: The amount added or subtracted from the
value when using the arrows.
DecimalPlaces: Number of decimal places displayed in the
value. (the default is 0). If the decimal places is more that 0,
then you can set Increment property to a fraction number.
(i.e. you can increase and decrease by 0.5).
14
NumericUpDown – Default Event
ValueChanged: Occurs when the value is changed
either by using the arrows, or by writing on it, or
changed in code.

15
ToolTip
ToolTip: is a hint added to a certain control, you can
use to give a certain tip or help to the user.

The tooltip is not an ordinary control, since it is added

to a tray in your project, and doesn’t occupy a space on
the form.

You can create a tooltip, and set its property, then

associate it to several controls.

16
ToolTip Creation
To create a tooltip, just double click on it, and it will
be added to the project tray.

At Run Time

17
ToolTip Properties:
AutoPopDelay: Determines the length of time a
certain tooltip window remains visible when the
mouse hovers over a certain control.
InitialDelay: Determines the length of time the
pointer must remain on a certain control to display the
tooltip window.
AutomaticDelay: According to the number inserted,
both AutoPopDelay and InitialDelay are automatically
set.

18
ToolTip Text
When you add the ToolTip on your project, a new
property will be added to all controls on your form,
where you can add the text you desire to appear when
hovering over this control with the mouse.

19
LinkLabel
LinkLabel: is an active label (non-edited text), that
appears to the user with a special behavior (as a link on
a website). It can be used to open a file or run a certain
program.

Label

LinkLabel

20
LinkLabel - Properties
LinkColor: The original color of the linklabel (Blue by default).
ActiveLinkColor: The color of the linklabel when clicking on it using
mouse. (Red by default).
VisitedLinkColor: The color of the linklabel after visiting the
destination. (Purple by default).
LinkVisited: of type bool; when true, the linklabel takes the color set in
VisitedLinkColor, otherwise, it will be displayed in the LinkColor.
LinkBehavior: Determines the look of the linklabel when the mouse
hovers over it (AlwaysUnderline, HoverUnderline, NeverUnderline).
LinkArea: Determines the active area of the linklabel text. It consists of
“Start: which position to start the link area” and “Length: number of
characters to be included in the link area”.

21
LinkLabel – Default Event and Method
LinkClicked: Occurs when the user clicks on the
linklabel using mouse.
To activate a link, call a method “Start”, from class
“Process” from namespace “System.Diagnostics”, and
send the name of the program you want to start.
(Note: when writing the name of a program, use the
name of the .exe file on your computer).

22
LinkLabel - Method
1
2
3
4

1. Opens Philadelphia University website in the default browser.

2. Opens Philadelphia University website using Internet Explorer.
3. Opens the Calculator Program
4. Opens folder “Sample Pictures”.

23
Menus - MenuStrip
You can add Menus to a form, with several menu items
that act like a commands a user can click to perform
certain actions.

MenuStrip

Menu Item

Separator Line

24
Sub Menus

Sub Menu

25
MenuStrip - Properties
RightToLeft: Determines the direction of a
menustrip.

RightToLeft: No

RightToLeft: Yes

26
MenuItem - Properties
Text: The text displayed in a menu item. When you
add ‘&’ before a certain letter. This letter will appear
underlined, and you can display its menu using (Alt +
the letter). (Note: & is used only for the main menu
items).

27
MenuItem - Properties
ShortcutKeys: Determines the keys used as a
shortcut to perform the action using keyboard instead
of a mouse click.

ShowShortcutKeys: of type bool; when true, the

shortcut keys will appear next to the menu item, as a
hint for the user.

28
MenuItem - Properties
Checked: of type bool; if true, a check will appear
next to the menuitem (it will behave as a checkbox)

CheckOnClick: of type bool; if true, then the

menuitem will be automatically checked or unchecked
using the mouse.
Checked= false

Checked= true

29
MenuItem – Default Event
Click: Occurs when the user clicks on the menu item
with a mouse, or by using the shortcut keys.

30
ListBox
ListBox: a control used to add several items in it,
either at design time, or at run time. A user can select
among these items according to the requirement of
the applciation.

31
ListBox - Properties
Items: Either from the property sheet, or from Edit
Items options on the Listbox itself.
You can add item using the String Collection Editor,
separate the items by “Enter”.

Items property, is considered a collection (array), where

you can access a certain item by its index.
32
ListBox - Properties
SelectionMode: Determines number of items a user
can select from the listbox.
One (single-selection)
MultiSimple (Multi-selection, using mouse only)
MultiExtended (Multi – selection using mouse along
with Ctrl or Shift keys)
Sorted: of type bool; if true, the items will be sorted
from A-Z.

33
ListBox - Properties
SelectItem: a run-time property, that retrieves the
current selected item (as an object).
If more than one item is selected, this property will
retrieve the first selected item in the listbox.
SelectedIndex: a run-time property, that retrieves the
current selected index (as an int). (Note: will return -1
if there is no selection).
If more than one item is selected, this property will
retrieve the index of the first selected item in the listbox.

34
ListBox - Properties
SelectedItems: a run-time property, is a collection
(array) of objects, that contains all the selected items
in a special array (different index than Items array).
SelectedIndecies: a run-time property, is a collection
(array) of integers that represent indecies of selected
items.
listBox1.Items.Count: a run-time property, that
returns the number of items in a listbox.
listBox1.SelectedItems.Count: a run-time property,
that returns the number of selected items in a listbox.
35
ListBox – Default Event
SelectedIndexChanged: Occurs when the user
selects a different item.

36
ListBox - Methods
GetSelected(index): Takes an index as a parameter,
and returns true if it is selected, and false if not.
listBox1.Items.Add (object/text): Adds a new item
in a listbox.
listBox1.Items.AddRange(Items): Adds an array of
items in the listbox.
listBox1.Items.Remove(Object): Removes the first
occurrence of the passed item.
listBox1.Items.RemoveAt(Index): Removes the first
occurrence of the passed index.
37
ListBox - Methods
listBox1.Items.Clear(): Removes all items in a
listBox.
listBox1.ClearSelected(): Cancel the selection of
items in a listBox (i.e. sets the SelectedIndex property
to -1).

38
ComboBox
ComboBox: a control used to add several items in it,
either at design time, or at run time. A user can select
only one items among these items.

39
ComboBox - Properties
Items: Either from the property sheet, or from Edit
Items options on the ComboBox itself.
You can add item using the String Collection Editor,
separate the items by “Enter”.

Items property, is considered a collection (array), where

you can access a certain item by its index.
40
ComboBox- Properties
 Sorted: of type bool; if true, the items will be sorted from A-Z.
 Text: A string represents the selected item.
 Dropdownstyle: The way the ComboBox displays the items in it.
 DropDown: In this style, the user can write
an Item in the combobox or select an existing item.

 DropDownList: In this style the user cannot write in it,

but can select one item from the combobox.

 Simple: It looks like a listbox, but

Though a user cannot select more than
One item.

41
ComboBox- Properties
SelectItem: a run-time property, that retrieves the
current selected item (as an object).
Combobox doesn’t allow multi-selection of items.
SelectedIndex: a run-time property, that retrieves the
current selected index (as an int). (Note: will return -1
if there is no selection).

42
ComboBox- Properties
ComboBox.Items.Count: a run-time property, that
returns the number of items in a listbox.

43
ComboBox– Default Event
SelectedIndexChanged: Occurs when the user
selects a different item.

44
ComboBox- Methods
comboBox1.Items.Add (object/text): Adds a new
item in a combobox.
comboBox1.Items.AddRange(Items): Adds an array
of items in the combobox.
comboBox1.Items.Remove(Object): Removes the
first occurrence of the passed item.
comboBox1.Items.RemoveAt(Index): Removes the
first occurrence of the passed index.

45
ComboBox - Methods
comboBox1.Items.Clear(): Removes all items in a
combobox.

46
ListViews
When you first add a ListView on the form, it will look
like a listbox.

In ListViews, you can add items from the list below, or
from items property. Also, you can add columns that
represent subitems
in a ListView.

47
ListViews – Adding Items
To add items in design
time, the following
window will appear.
Note: in this window,
each item is added as an
object which has its own
property sheet. Properties
like “text”, “tag”, “checked”
can be modified on the
item level.

48
ListViews - View
View: is a property that specifies the way items are
displayed in the ListView.
LargeIcon
SmallIcon
Details
List
Tile
These views are similar to the views of items in an
ordinary Windows opened folder.

49
ListViews - View
These views will look much different when you
associate imagelist to the listview, and associate each
item with a certain image.

50
ImageList
An imagelist is a component that can be added to your
project, where you can add different images that can be
used as icons along with ListView items, or TreeView
nodes, that will be discussed later.
When an imagelist is added, it appears at a tray under the
form.
In an imagelist, you can
Specify the size of images
Included in the list.
• From Choose images, you can select the images you want.

51
ImageList
Each image will have its own index, since Images is a
collection.

52
ListView Vs. ImageList
 To associate an ImageList to a
ListView, use the properties:
“Small ImageList” and “Large
ImageList”.

 Small ImageList: display the

images in it besides the items
when using the List and SmallIcon
Views.

 Large ImageList: displays the

images in it besides the items
when using the Tile and LargeIcon
Views.
53
ListView Vs. ImageList
The last step you need to do is to associate each item
in the ListView with a certain image in the ImageList,
using the ImageIndex property.

54
ListView Vs. ImageList
A ListView after associating it with an ImageList.

55
ListView – Details - Columns
To use the Details view in a ListView, we have to add
columns first.

56
ListView - Subitems
 To fill the details, you have to fill subitems for each item in the ListView.
 Go to the Item property sheet, from there add subitems (which is also a
collection).
 Note: Add subitems for each item equal to the number of columns in the
listview, or they won’t be displayed.

57
ListView – Other Properties
Multiselect: Specifies wither you can select more
than one item in a listview or not (boolean, default:
true).
SelectedItems: an array of the items selected in the
ListView.
Note: There is no SelectedItem property for a
ListView, but you can get the selected item in a certain
way that will be discussed later.
listView1.Items.Count: Number of items in the
listview.
58
ListView - Events
SelectedIndexChanged (The Default Event)

ItemSelectedChanged (Can be created from the Events

Window)
This event has a special argument class

e parameter: retrieves the following properties:

 e.IsSelected: boolean property, that specifies wither the current item is
selected or not.
 e.Item: gets the selected item.

 e.ItemIndex: gets the index of the selected item.

59
ListView - Methods
listView1.Items.Add (…): used to add a new item to
the listview.
listView1.Items[0].SubItems.Add(…): used to add a
subitem to the first item in the listview.
e.Item.SubItems.Add(…): used to add a subitem to
the selected item.
listView1.Items.Clear(): Clears all items and
subitems in the listview.
listView1.Clear(): Clears all components in the
listview, even the columns.
60
TreeViews
A Treeview is a control used to display items in a tree style,
that looks like the folders in Windows Explorer.
Item in a treeview is called Node.
Trees consists of several levels.
Terms used in a tree structure:
Root: A node in the first level, that doesn’t have a parent.
Parent: A node that has child nodes.
Child: A node that has a parent node.
Siblings: Nodes in the same level, and have the same parent.
Leaf: A node in the last level of the tree, and don’t have child
nodes.
61
TreeView – Design Time
 To add nodes, go to Nodes Properties
or Edit Nodes in the treeview itself.
• In this dialog you can add the tree nodes either
in the root level, or as children.

62
TreeView - Properties
Nodes: array of nodes in a certain level.
treeView1.Nodes: is an array of nodes in the first
level (root).
treeView1.Nodes[0].Nodes: an array of nodes that
are children of the first node in the root level.
treeView1.SelectedNode.Nodes: an array of nodes
that are children of the selectednode.
SelectedNode: The current selected node in the tree,
no matter in which level it is.

63
TreeView - Properties
CheckBoxes: boolean property on the treeview level,
when true, the tree will look like in the following
image.

Checked: boolean property on the node level, when it

is true, means that the node is checked by the user, or
by default.

64
TreeView/TreeNode - Properties
Name: The name of a node (as an object)
Text: the string that the node is displayed by in the tree.
treeView1.SelectedNode.Parent: Retrieves the node in the
upper level of the selectednode (its parent).
treeView1.SelectedNode.FirstNode: Returns the first child in
the selectednode children.
treeView1.SelectedNode.LastNode: Returns the first child in
the selectednode children.
treeView1.SelectedNode.NextNode: Returns the next sibling of
the selected node.
treeView1.SelectedNode.PrevNode: Returns the Previous
sibling of the selected node.
65
TreeView/TreeNode - Properties
treeView1.SelectedNode.FullPath: Returns the full
path of the selectednode, starting from the root node.
treeView1.Nodes.Count: Number of nodes in the
root.
treeView1.SelectedNode.Nodes.Count: Number of
children of the selected node.
treeView1.SelectedNode.Tag: a user defined
property that you can add any type of data in it and to
be associated to a tree node.

66
TreeView – Default Event
AfterSelect: Occurs after a node is selected in the
TreeView

67
TreeView - Methods
treeView1.Nodes.Add(…): Adds a node as a root.
treeView1.SelectedNode.Nodes.Add(): Adds a node
as a child to the selected node.
treeView1.SelectedNode.GetNodeCount(false):
Returns number of children of the selected node, in
the direct level only.
treeView1.SelectedNode.GetNodeCount(true):
Returns number of children of the selected node, in all
levels.

68
TreeView - Methods
treeView1.ExpandAll(): Expands all children in all
levels in the whole tree.
treeView1.SelectedNode.Expand(): Expands
children of the selected node in the direct level.
treeView1.SelectedNode.ExpandAll(): Expands
children of the selected node in all levels.
treeView1.SelectedNode.Collapse(): Hides the
children of the selected node.
treeView1.CollapseAll(): Hides all children in all
levels in the tree.
69
Multiple Forms
Check Worksheet 11 for details.

70
The End

71