Chapter 14 – Graphical User
Interfaces Part 2
Outline
14.9
TreeViews
14.10
ListViews
14.11
TabControl
14.12
Multiple Document Interface (MDI)
Timer Class
 2007 Dr. Natheer Khasawneh. All rights reserved.
1
2
14.9 TreeViews
•
•
•
•
Displays nodes hierarchically
Parent nodes have children
The first parent node is called the root
Use Add method to add nodes
 2007 Dr. Natheer Khasawneh. All rights reserved.
3
14.9 TreeView
Click to expand node,
displaying child nodes
Root node
Click to collapse node,
hiding child nodes
Fig. 14.24 Displaying a sample tree in a TreeView.
 2007 Dr. Natheer Khasawneh. All rights reserved.
Child
nodes
4
14.9 TreeView
TreeView properties
Description / Delegate and Event Arguments
and events
Common
Properties
CheckBoxes
ImageList
Indicates whether checkboxes appear next to nodes. True displays
checkboxes. Default is False.
Indicates the ImageList used to display icons by the nodes. An
ImageList is a collection that contains a number of Image
objects.
Lists the collection of TreeNodes in the control. Contains
Nodes
methods Add (adds a TreeNode object), Clear (deletes the
SelectedNode
entire collection) and Remove (deletes a specific node). Removing
a parent node deletes all its children.
Currently selected node.
Common Event
(Delegate TreeViewEventHandler, event
arguments TreeViewEventArgs)
AfterSelect
Generated after selected node changes. Default when double-clicked
in designer.
Fig. 14.25
TreeView properties and events.
 2007 Dr. Natheer Khasawneh. All rights reserved.
14.9 TreeNode
TreeNode properties
Description / Delegate and Event Arguments
and methods
Common Properties
Checked
Indicates whether the TreeNode is checked.
(CheckBoxes property must be set to True in parent
TreeView.)
FirstNode
FullPath
ImageIndex
LastNode
NextNode
Nodes
Specifies the first node in the Nodes collection (i.e., first child
in tree).
Indicates the path of the node, starting at the root of the tree.
Specifies the index of the image to be shown when the node is
deselected.
Specifies the last node in the Nodes collection (i.e., last child in
tree).
Next sibling node.
The collection of TreeNodes contained in the current node
(i.e., all the children of the current node). Contains methods Add
(adds a TreeNode object), Clear (deletes the entire
collection) and Remove (deletes a specific node). Removing a
parent node deletes all its children.
Indicates the previous sibling node.
PrevNode
SelectedImageI Specifies the index of the image to use when the node is selected.
ndex
Text
Specifies the text to display in the TreeView.
Common Methods
Collapses a node.
Collapse
Expands a node.
Expand
Expands all the children of a node.
ExpandAll
Returns the number of child nodes.
GetNodeCount
Fig. 14.26
TreeNode properties and methods.
 2007 Dr. Natheer Khasawneh. All rights reserved.
5
6
14.9 TreeView
Fig. 14.27 TreeNode Editor.
 2007 Dr. Natheer Khasawneh. All rights reserved.
7
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
18
19
20
21
22
23
24
25
// Fig. 14.28: TreeViewDirectoryStructureForm.cs
// Using TreeView to display directory structure.
using System;
using System.Windows.Forms;
using System.IO;
Outline
TreeViewDirectoryStru
ctureForm.cs
// Form uses TreeView to display directory structure
public partial class TreeViewDirectoryStructureForm : Form
{
string substringDirectory; // store last part of full path name
// default constructor
public TreeViewDirectoryStructureForm()
{
InitializeComponent();
} // end constructor
// populate current node with subdirectories
public void PopulateTreeView(
string directoryValue, TreeNode parentNode )
{
// array stores all subdirectories in the directory
string[] directoryArray =
Directory.GetDirectories( directoryValue );
 2007 Dr. Natheer
Khasawneh.
8
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
Outline
// populate current node with subdirectories
try
{
// check to see if any subdirectories are present
if ( directoryArray.Length != 0 )
TreeViewDirectoryStru
{
ctureForm.cs
// for every subdirectory, create new TreeNode,
// add as a child of current node and recursively
// populate child nodes with subdirectories
foreach ( string directory in directoryArray )
{
// obtain last part of path name from the full path name
// by finding the last occurence of "\" and returning the
// part of the path name that comes after this occurence
substringDirectory = directory.Substring(
directory.LastIndexOf( '\\' ) + 1,
directory.Length - directory.LastIndexOf( '\\' ) - 1 );
// create TreeNode for current directory
TreeNode myNode = new TreeNode( substringDirectory );
// add current directory node to parent node
parentNode.Nodes.Add( myNode );
// recursively populate every subdirectory
PopulateTreeView( directory, myNode );
} // end foreach
} // end if
} //end try
// catch exception
catch ( UnauthorizedAccessException )
{
parentNode.Nodes.Add( "Access denied" );
} // end catch
} // end method PopulateTreeView
 2007 Dr. Natheer
Khasawneh.
9
63
// handles enterButton click event
64
private void enterButton_Click( object sender, EventArgs e )
65
{
66
// clear all nodes
67
directoryTreeView.Nodes.Clear();
68
69
// check if the directory entered by user exists
70
// if it does then fill in the TreeView,
71
// if not display error MessageBox
72
if ( Directory.Exists( inputTextBox.Text ) )
73
{
74
// add full path name to directoryTreeView
75
directoryTreeView.Nodes.Add( inputTextBox.Text );
76
77
// insert subfolders
78
PopulateTreeView(
79
inputTextBox.Text, directoryTreeView.Nodes[ 0 ] );
80
}
81
// display error MessageBox if directory not found
82
else
83
MessageBox.Show( inputTextBox.Text + " could not be found.",
84
"Directory Not Found", MessageBoxButtons.OK,
85
MessageBoxIcon.Error );
86
} // end method enterButton_Click
87 } // end class TreeViewDirectoryStructureForm
Outline
TreeViewDirectoryStru
ctureForm.cs
 2007 Dr. Natheer
Khasawneh.
10
Outline
TreeViewDirector
yStructureTest.c
s
Program Output
 2007 Dr. Natheer
Khasawneh.
11
14.10 ListViews
• Displays list of items
– Can select one or more items from list
– Displays icons to go along with items
 2007 Dr. Natheer Khasawneh. All rights reserved.
14.10 ListViews
ListView events and
Description / Delegate and Event Arguments
properties
Common Properties
Activation
Determines how the user activates an item. This property takes a
value in the ItemActivation enumeration. Possible
values are OneClick (single-click activation),
CheckBoxes
LargeImageList
Items
TwoClick (double-click activation, item changes color
when selected) and Standard (double-click activation).
Indicates whether items appear with checkboxes. True
displays checkboxes. Default is False.
Indicates the ImageList used when displaying large icons.
Returns the collection of ListViewItems in the control.
MultiSelect
Determines whether multiple selection is allowed. Default is
True, which enables multiple selection.
SelectedItems
SmallImageList
Lists the collection of currently selected items.
View
Specifies the ImageList used when displaying small
icons.
Determines appearance of ListViewItems. Values
LargeIcon (large icon displayed, items can be in multiple
columns), SmallIcon (small icon displayed), List
(small icons displayed, items appear in a single column) and
Details (like List, but multiple columns of information
can be displayed per item).
Common Event
ItemActivate
(Delegate EventHandler, event arguments
EventArgs)
Generated when an item in the ListView is activated. Does
not specify which item is activated.
 2007 Dr. Natheer Khasawneh. All rights reserved.
12
13
14.10 ListViews
Fig. 14.30 Image Collection Editor window for an ImageList component.
 2007 Dr. Natheer Khasawneh. All rights reserved.
14
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
);
37
// Fig. 14.31: ListViewTestForm.cs
// Displaying directories and their contents in ListView.
using System;
using System.Drawing;
using System.Windows.Forms;
using System.IO;
Outline
ListViewTest.cs
// Form contains a ListView which displays
// folders and files in a directory
public partial class ListViewTestForm : Form
{
// store current directory
string currentDirectory = Directory.GetCurrentDirectory();
// default constructor
public ListViewTestForm()
{
InitializeComponent();
} // end constructor
// browse directory user clicked or go up one level
private void browserListView_Click( object sender, EventArgs e )
{
// ensure an item is selected
if ( browserListView.SelectedItems.Count != 0 )
{
// if first item selected, go up one level
if ( browserListView.Items[ 0 ].Selected )
{
// create DirectoryInfo object for directory
DirectoryInfo directoryObject =
new DirectoryInfo( currentDirectory );
// if directory has parent, load it
if ( directoryObject.Parent != null )
LoadFilesInDirectory( directoryObject.Parent.FullName
} // end if
 2007 Dr. Natheer
Khasawneh.
15
39
40
41
42
43
44
45
46
47
48
do
49
50
51
52
53
54
55
56
57
58
59
60
61
// selected directory or file
else
{
// directory or file chosen
string chosen = browserListView.SelectedItems[ 0 ].Text;
Outline
ListViewTest.cs
// if item selected is directory, load selected directory
if ( Directory.Exists( currentDirectory + @"\" + chosen ) )
{
// if currently in C:\, do not need '\'; otherwise we
if ( currentDirectory == @"C:\" )
LoadFilesInDirectory( currentDirectory + chosen );
else
LoadFilesInDirectory(
currentDirectory + @"\" + chosen );
} // end if
} // end else
// update displayLabel
displayLabel.Text = currentDirectory;
} // end if
} // end method browserListView_Click
 2007 Dr. Natheer
Khasawneh.
16
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
// display files/subdirectories of current directory
public void LoadFilesInDirectory( string currentDirectoryValue )
{
// load directory information and display
try
{
// clear ListView and set first item
browserListView.Items.Clear();
browserListView.Items.Add( "Go Up One Level" );
Outline
ListViewTest.cs
// update current directory
currentDirectory = currentDirectoryValue;
DirectoryInfo newCurrentDirectory =
new DirectoryInfo( currentDirectory );
// put files and directories into arrays
DirectoryInfo[] directoryArray =
newCurrentDirectory.GetDirectories();
FileInfo[] fileArray = newCurrentDirectory.GetFiles();
// add directory names to ListView
foreach ( DirectoryInfo dir in directoryArray )
{
// add directory to ListView
ListViewItem newDirectoryItem =
browserListView.Items.Add( dir.Name );
newDirectoryItem.ImageIndex = 0;
} // end foreach
// set directory image
 2007 Dr. Natheer
Khasawneh.
17
92
// add file names to ListView
93
foreach ( FileInfo file in fileArray )
94
{
95
// add file to ListView
96
ListViewItem newFileItem =
97
browserListView.Items.Add( file.Name );
98
99
newFileItem.ImageIndex = 1; // set file image
100
} // end foreach
101
} // end try
102
103
// access denied
104
catch ( UnauthorizedAccessException )
105
{
106
MessageBox.Show( "Warning: Some fields may not be " +
107
"visible due to permission settings",
108
"Attention", 0, MessageBoxIcon.Warning );
109
} // end catch
110
} // end method LoadFilesInDirectory
111
112
// handle load event when Form displayed for first time
113
private void ListViewTestForm_Load( object sender, EventArgs e )
114
{
115
// set Image list
116
Image folderImage = Image.FromFile(
117
currentDirectory + @"\images\folder.bmp" );
118
119
Image fileImage = Image.FromFile(
120
currentDirectory + @"\images\file.bmp" );
121
122
fileFolder.Images.Add( folderImage );
123
fileFolder.Images.Add( fileImage );
124
125
// load current directory into browserListView
126
LoadFilesInDirectory( currentDirectory );
127
displayLabel.Text = currentDirectory;
128
} // end method ListViewTestForm_Load
129 } // end class ListViewTestForm
Outline
ListViewTest.cs
 2007 Dr. Natheer
Khasawneh.
18
Outline
ListViewTest.cs
Program Output
 2007 Dr. Natheer
Khasawneh.
19
14.11 TabControl
• Creates tabbed windows
• Windows called TabPage objects
– TabPages can have controls
– Tabpages have own Click event for when tab is clicked
 2007 Dr. Natheer Khasawneh. All rights reserved.
20
Tab pages
14.11 Tab Controls
Fig. 14.32 Tabbed pages in Visual Studio .NET.
 2007 Dr. Natheer Khasawneh. All rights reserved.
21
14.11 Tab Controls
TabPage
TabControl
Controls in
TabPage
Fig. 14.33 Example TabControl with TabPages.
 2007 Dr. Natheer Khasawneh. All rights reserved.
22
14.11 Tab Controls
Fig. 14.35 Adding TabPages to the TabControl.
 2007 Dr. Natheer Khasawneh. All rights reserved.
23
14.11 Tab Controls
TabControl properties
Description / Delegate and Event Arguments
and events
Common Properties
ImageList
ItemSize
MultiLine
SelectedIndex
Specifies images to be displayed on a tab.
SelectedTab
TabCount
TabPages
Indicates the TabPage that is currently selected.
Returns the number of tabs.
Specifies tab size.
Indicates whether multiple rows of tabs can be displayed.
Indicates index of TabPage that is currently selected.
Gets the collection of TabPages within our
TabControl.
(Delegate EventHandler, event arguments
EventArgs)
SelectedIndexCha Generated when SelectedIndex changes (i.e., another
nged
TabPage is selected).
Fig. 14.35
TabControl properties and events.
Common Event
 2007 Dr. Natheer Khasawneh. All rights reserved.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
// Fig. 14.36: UsingTabsForm.cs
// Using TabControl to display various font settings.
using System;
using System.Drawing;
using System.Windows.Forms;
24
Outline
UsingTabs.cs
// Form uses Tabs and RadioButtons to display various font settings
public partial class UsingTabsForm : Form
{
// default constructor
public UsingTabsForm()
{
InitializeComponent();
} // end constructor
// event handler for Black RadioButton
private void blackRadioButton_CheckedChanged(
object sender, EventArgs e )
{
displayLabel.ForeColor = Color.Black; // change font color to black
} // end method blackRadioButton_CheckedChanged
// event handler for Red RadioButton
private void redRadioButton_CheckedChanged(
object sender, EventArgs e )
{
displayLabel.ForeColor = Color.Red; // change font color to red
} // end method redRadioButton_CheckedChanged
// event handler for Green RadioButton
private void greenRadioButton_CheckedChanged(
object sender, EventArgs e )
{
displayLabel.ForeColor = Color.Green; // change font color to green
} // end method greenRadioButton_CheckedChanged
 2007 Dr. Natheer
Khasawneh.
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
// event handler for 12 point RadioButton
private void size12RadioButton_CheckedChanged(
object sender, EventArgs e )
{
// change font size to 12
displayLabel.Font = new Font( displayLabel.Font.Name, 12 );
} // end method size12RadioButton_CheckedChanged
25
Outline
UsingTabs.cs
// event handler for 16 point RadioButton
private void size16RadioButton_CheckedChanged(
object sender, EventArgs e )
{
// change font size to 16
displayLabel.Font = new Font( displayLabel.Font.Name, 16 );
} // end method size16RadioButton_CheckedChanged
// event handler for 20 point RadioButton
private void size20RadioButton_CheckedChanged(
object sender, EventArgs e )
{
// change font size to 20
displayLabel.Font = new Font( displayLabel.Font.Name, 20 );
} // end method size20RadioButton_CheckedChanged
// event handler for Hello! RadioButton
private void helloRadioButton_CheckedChanged(
object sender, EventArgs e )
{
displayLabel.Text = "Hello!"; // change text to Hello!
} // end method helloRadioButton_CheckedChanged
// event handler for Goodbye! RadioButton
private void goodbyeRadioButton_CheckedChanged(
object sender, EventArgs e )
{
displayLabel.Text = "Goodbye!"; // change text to Goodbye!
} // end method goodbyeRadioButton_CheckedChanged
 2007 Dr. Natheer
Khasawneh.
26
Outline
UsingTabs.cs
Program Output
 2007 Dr. Natheer
Khasawneh.
27
14.12 Multiple-Document Interface Windows
• Users can edit multiple documents at once
• Usually more complex than single-documentinterface applications
• Application window called parent, others child
• Parent and child menus can be merged
– Based on MergeOrder property
• Child windows can be arranged in parent window:
– Tiled windows: completely fill parent, no overlap
• Either horizontal or vertical
– Cascaded windows: overlap, same size, display title bar
– ArrangeIcons: arranges icons for minimized windows
 2007 Dr. Natheer Khasawneh. All rights reserved.
28
14.12 Multiple Document Interface (MDI)
Windows
MDI parent
MDI child
MDI child
Fig. 14.37 MDI parent and MDI child.
 2007 Dr. Natheer Khasawneh. All rights reserved.
29
14.12 Multiple Document Interface (MDI)
Windows
Single Document Interface (SDI)
Fig. 14.38 SDI and MDI forms.
 2007 Dr. Natheer Khasawneh. All rights reserved.
Multiple Document Interface (MDI)
30
14.12 Multiple Document Interface (MDI)
Windows
MDI Form events and
properties
Common MDI Child
Properties
IsMdiChild
Description / Delegate and Event Arguments
Indicates whether the Form is an MDI child. If True,
Form is an MDI child (read-only property).
MdiParent
Common MDI Parent
Properties
ActiveMdiChild
Specifies the MDI parent Form of the child.
IsMdiContainer
Indicates whether a Form can be an MDI. If True, the
Form can be an MDI parent. Default is False.
Returns the MDI children as an array of Forms.
MdiChildren
Common Method
LayoutMdi
Returns the Form that is the currently active MDI child
(returns null if no children are active).
Determines the display of child forms on an MDI parent. Takes
as a parameter an MdiLayout enumeration with possible
values ArrangeIcons, Cascade,
TileHorizontal and TileVertical.
Figure 13.35 depicts the effects of these values.
Common Event
(Delegate EventHandler, event arguments
EventArgs)
MdiChildActivate
Generated when an MDI child is closed or activated.
Fig. 14.39
MDI parent and MDI child events and properties.
 2007 Dr. Natheer Khasawneh. All rights reserved.
31
14.12 Multiple Document Interface (MDI)
Windows
Parent’s icons: minimize,
maximize and close
Minimized child’s icons: restore,
maximize and close
Fig. 14.40 Minimized and maximized child windows.
 2007 Dr. Natheer Khasawneh. All rights reserved.
Maximized child’s icons: minimize,
restore and close
Parent’s title bar displays
maximized child
32
14.12 Multiple Document Interface (MDI)
Windows
Separator bar and
child windows
Child windows list
Fig. 14.41 Using MenuItem property MdiList.
 2007 Dr. Natheer Khasawneh. All rights reserved.
9 or more child windows
enables the More
Windows... option
33
14.12 Multiple Document Interface (MDI)
Windows
ArrangeIcons
Fig. 14.42 LayoutMdi enumeration values (Part 1).
 2007 Dr. Natheer Khasawneh. All rights reserved.
Cascade
34
14.12 Multiple Document Interface (MDI)
Windows
TileHorizontal
Fig. 14.43 LayoutMdi enumeration values (Part 2).
 2007 Dr. Natheer Khasawneh. All rights reserved.
TileVertical
35
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
// Fig. 14.43: UsingMDIForm.cs
// Demonstrating use of MDI parent and child windows.
using System;
using System.Windows.Forms;
Outline
UsingMDI.cs
// Form demonstrates the use of MDI parent and child windows
public partial class UsingMDIForm : Form
{
// default constructor
public UsingMDIForm()
{
InitializeComponent();
} // end constructor
// create Child 1 window when child1ToolStrip MenuItem is clicked
private void child1ToolStripMenuItem_Click(
object sender, EventArgs e )
{
// create new child
ChildForm formChild =
new ChildForm( "Child 1", @"\images\csharphtp1.jpg" );
formChild.MdiParent = this; // set parent
formChild.Show(); // display child
} // end method child1ToolStripMenuItem_Click
// create Child 2 window when child2ToolStripMenuItem is clicked
private void child2ToolStripMenuItem_Click(
object sender, EventArgs e )
{
// create new child
ChildForm formChild =
new ChildForm( "Child 2", @"\images\vbnethtp2.jpg" );
formChild.MdiParent = this; // set parent
formChild.Show(); // display child
} // end method child2ToolStripMenuItem_Click
 2007 Dr. Natheer
Khasawneh.
36
37
// create Child 3 window when child3ToolStripMenuItem is clicked
38
private void child3ToolStripMenuItem_Click(
39
object sender, EventArgs e )
40
{
41
// create new child
42
Child formChild =
43
new Child( "Child 3", @"\images\pythonhtp1.jpg" );
44
formChild.MdiParent = this; // set parent
45
formChild.Show(); // display child
46
} // end method child3ToolStripMenuItem_Click
47
48
// exit application
49
private void exitToolStripMenuItem_Click( object sender, EventArgs
e )
50
{
51
Application.Exit();
52
} // end method exitToolStripMenuItem_Click
53
54
// set Cascade layout
55
private void cascadeToolStripMenuItem_Click(
56
object sender, EventArgs e )
57
{
58
this.LayoutMdi( MdiLayout.Cascade );
59
} // end method cascadeToolStripMenuItem_Click
60
61
// set TileHorizontal layout
62
private void tileHorizontalToolStripMenuItem_Click(
63
object sender, EventArgs e )
64
{
65
this.LayoutMdi( MdiLayout.TileHorizontal );
66
} // end method tileHorizontalToolStripMenuItem
67
68
// set TileVertical layout
69
private void tileVerticalToolStripMenuItem_Click(
70
object sender, EventArgs e )
71
{
72
this.LayoutMdi( MdiLayout.TileVertical );
73
} // end method tileVerticalToolStripMenuItem_Click
74 } // end class UsingMDIForm
Outline
UsingMDI.cs
 2007 Dr. Natheer
Khasawneh.
37
Outline
UsingMDI.cs
Program Output
 2007 Dr. Natheer
Khasawneh.
38
1 // Fig. 14.44: ChildForm.cs
2 // Child window of MDI parent.
3 using System;
4 using System.Drawing;
5 using System.Windows.Forms;
6 using System.IO;
7
8 public partial class ChildForm : Form
9 {
10
public ChildForm( string title, string fileName )
11
{
12
// Required for Windows Form Designer support
13
InitializeComponent();
14
15
Text = title; // set title text
16
17
// set image to display in pictureBox
18
picDisplay.Image = Image.FromFile(
19
Directory.GetCurrentDirectory() + fileName );
20
} // end constructor
21 } // end class ChildForm
Outline
Child.cs
 2007 Dr. Natheer
Khasawneh.
39
Timer Class
• Implements a timer that raises an event at userdefined intervals.
• This timer is optimized for use in Windows Forms
applications and must be used in a window.
• This Windows timer is designed for a singlethreaded environment where UI threads are used
to perform processing
 2007 Dr. Natheer Khasawneh. All rights reserved.
40
Timer Class
Timer events and properties
Description / Delegate and Event Arguments
Common Timer class
Properties
Enabled
Gets or sets whether the timer is running..
Interval
Common Event
Gets or sets the time, in milliseconds, between timer ticks.
Tick
Occurs when the specified timer interval has elapsed and the
timer is enabled.
Timer Class
 2007 Dr. Natheer Khasawneh. All rights reserved.
(Delegate EventHandler, event arguments
EventArgs)