2007 Dr. Natheer Khasawneh. All rights reserved.
1
Chapter 14 – Graphical User Interfaces Part 2
Outline14.9 TreeViews14.10 ListViews
14.11 TabControl
14.12 Multiple Document Interface (MDI) Timer Class
2007 Dr. Natheer Khasawneh. All rights reserved.
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
Fig. 14.24 Displaying a sample tree in a TreeView.
Click to expand node, displaying child nodes
Root node
Child nodes
Click to collapse node, hiding child nodes
2007 Dr. Natheer Khasawneh. All rights reserved.
4
14.9 TreeView
TreeView properties and events
Description / Delegate and Event Arguments
Common
Properties
CheckBoxes Indicates whether checkboxes appear next to nodes. True displays
checkboxes. Default is False.
ImageList Indicates the ImageList used to display icons by the nodes. An
ImageList is a collection that contains a number of Image objects.
Nodes Lists the collection of TreeNodes in the control. 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.
SelectedNode 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.
5
14.9 TreeNodeTreeNode properties and methods
Description / Delegate and Event Arguments
Common Properties
Checked Indicates whether the TreeNode is checked.
(CheckBoxes property must be set to True in parent
TreeView.)
FirstNode Specifies the first node in the Nodes collection (i.e., first child in tree).
FullPath Indicates the path of the node, starting at the root of the tree.
ImageIndex Specifies the index of the image to be shown when the node is deselected.
LastNode Specifies the last node in the Nodes collection (i.e., last child in tree).
NextNode Next sibling node.
Nodes 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.
PrevNode Indicates the previous sibling node.
SelectedImageIndex
Specifies the index of the image to use when the node is selected.
Text Specifies the text to display in the TreeView.
Common Methods Collapse Collapses a node.
Expand Expands a node.
ExpandAll Expands all the children of a node.
GetNodeCount Returns the number of child nodes.
Fig. 14.26 TreeNode properties and methods.
2007 Dr. Natheer Khasawneh.
Outline7
TreeViewDirectoryStructureForm.cs
1 // Fig. 14.28: TreeViewDirectoryStructureForm.cs 2 // Using TreeView to display directory structure. 3 using System; 4 using System.Windows.Forms; 5 using System.IO; 6 7 // Form uses TreeView to display directory structure 8 public partial class TreeViewDirectoryStructureForm : Form 9 {10 string substringDirectory; // store last part of full path name1112 // default constructor13 public TreeViewDirectoryStructureForm()14 {15 InitializeComponent();16 } // end constructor18 // populate current node with subdirectories19 public void PopulateTreeView(20 string directoryValue, TreeNode parentNode )21 {22 // array stores all subdirectories in the directory23 string[] directoryArray =24 Directory.GetDirectories( directoryValue );25
2007 Dr. Natheer Khasawneh.
Outline8
TreeViewDirectoryStructureForm.cs
26 // populate current node with subdirectories27 try28 {29 // check to see if any subdirectories are present30 if ( directoryArray.Length != 0 )31 {32 // for every subdirectory, create new TreeNode,33 // add as a child of current node and recursively34 // populate child nodes with subdirectories35 foreach ( string directory in directoryArray )36 {37 // obtain last part of path name from the full path name38 // by finding the last occurence of "\" and returning the39 // part of the path name that comes after this occurence40 substringDirectory = directory.Substring(41 directory.LastIndexOf( '\\' ) + 1,42 directory.Length - directory.LastIndexOf( '\\' ) - 1 );4344 // create TreeNode for current directory45 TreeNode myNode = new TreeNode( substringDirectory );4647 // add current directory node to parent node48 parentNode.Nodes.Add( myNode );4950 // recursively populate every subdirectory51 PopulateTreeView( directory, myNode );52 } // end foreach53 } // end if54 } //end try5556 // catch exception57 catch ( UnauthorizedAccessException )58 {59 parentNode.Nodes.Add( "Access denied" );60 } // end catch61 } // end method PopulateTreeView
2007 Dr. Natheer Khasawneh.
Outline9
TreeViewDirectoryStructureForm.cs
63 // handles enterButton click event64 private void enterButton_Click( object sender, EventArgs e )65 {66 // clear all nodes67 directoryTreeView.Nodes.Clear();6869 // check if the directory entered by user exists70 // if it does then fill in the TreeView,71 // if not display error MessageBox72 if ( Directory.Exists( inputTextBox.Text ) )73 {74 // add full path name to directoryTreeView75 directoryTreeView.Nodes.Add( inputTextBox.Text );7677 // insert subfolders78 PopulateTreeView(79 inputTextBox.Text, directoryTreeView.Nodes[ 0 ] );80 }81 // display error MessageBox if directory not found82 else83 MessageBox.Show( inputTextBox.Text + " could not be found.",84 "Directory Not Found", MessageBoxButtons.OK,85 MessageBoxIcon.Error );86 } // end method enterButton_Click87 } // end class TreeViewDirectoryStructureForm
2007 Dr. Natheer Khasawneh. All rights reserved.
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.
1214.10 ListViews
ListView events and properties
Description / Delegate and Event Arguments
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),
TwoClick (double-click activation, item changes color
when selected) and Standard (double-click activation).
CheckBoxes Indicates whether items appear with checkboxes. True
displays checkboxes. Default is False.
LargeImageList Indicates the ImageList used when displaying large icons.
Items Returns the collection of ListViewItems in the control.
MultiSelect Determines whether multiple selection is allowed. Default is True, which enables multiple selection.
SelectedItems Lists the collection of currently selected items.
SmallImageList Specifies the ImageList used when displaying small icons.
View 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 (Delegate EventHandler, event arguments EventArgs)
ItemActivate Generated when an item in the ListView is activated. Does not specify which item is activated.
2007 Dr. Natheer Khasawneh. All rights reserved.
13
14.10 ListViews
Fig. 14.30 Image Collection Editor window for an ImageList component.
2007 Dr. Natheer Khasawneh.
Outline14
ListViewTest.cs
1 // Fig. 14.31: ListViewTestForm.cs 2 // Displaying directories and their contents in ListView. 3 using System; 4 using System.Drawing; 5 using System.Windows.Forms; 6 using System.IO; 7 8 // Form contains a ListView which displays 9 // folders and files in a directory10 public partial class ListViewTestForm : Form11 {12 // store current directory13 string currentDirectory = Directory.GetCurrentDirectory();1415 // default constructor16 public ListViewTestForm()17 {18 InitializeComponent();19 } // end constructor2021 // browse directory user clicked or go up one level22 private void browserListView_Click( object sender, EventArgs e )23 {24 // ensure an item is selected25 if ( browserListView.SelectedItems.Count != 0 )26 {27 // if first item selected, go up one level28 if ( browserListView.Items[ 0 ].Selected )29 {30 // create DirectoryInfo object for directory31 DirectoryInfo directoryObject =32 new DirectoryInfo( currentDirectory );3334 // if directory has parent, load it35 if ( directoryObject.Parent != null )36 LoadFilesInDirectory( directoryObject.Parent.FullName );37 } // end if
2007 Dr. Natheer Khasawneh.
Outline15
ListViewTest.cs
39 // selected directory or file40 else41 {42 // directory or file chosen43 string chosen = browserListView.SelectedItems[ 0 ].Text;4445 // if item selected is directory, load selected directory46 if ( Directory.Exists( currentDirectory + @"\" + chosen ) )47 {48 // if currently in C:\, do not need '\'; otherwise we do49 if ( currentDirectory == @"C:\" )50 LoadFilesInDirectory( currentDirectory + chosen );51 else52 LoadFilesInDirectory(53 currentDirectory + @"\" + chosen );54 } // end if55 } // end else5657 // update displayLabel58 displayLabel.Text = currentDirectory;59 } // end if60 } // end method browserListView_Click61
2007 Dr. Natheer Khasawneh.
Outline16
ListViewTest.cs
62 // display files/subdirectories of current directory63 public void LoadFilesInDirectory( string currentDirectoryValue )64 {65 // load directory information and display66 try67 {68 // clear ListView and set first item69 browserListView.Items.Clear(); 70 browserListView.Items.Add( "Go Up One Level" );7172 // update current directory73 currentDirectory = currentDirectoryValue;74 DirectoryInfo newCurrentDirectory =75 new DirectoryInfo( currentDirectory );7677 // put files and directories into arrays78 DirectoryInfo[] directoryArray =79 newCurrentDirectory.GetDirectories();80 FileInfo[] fileArray = newCurrentDirectory.GetFiles();8182 // add directory names to ListView83 foreach ( DirectoryInfo dir in directoryArray )84 {85 // add directory to ListView86 ListViewItem newDirectoryItem = 87 browserListView.Items.Add( dir.Name );8889 newDirectoryItem.ImageIndex = 0; // set directory image90 } // end foreach91
2007 Dr. Natheer Khasawneh.
Outline17
ListViewTest.cs
92 // add file names to ListView93 foreach ( FileInfo file in fileArray )94 {95 // add file to ListView96 ListViewItem newFileItem = 97 browserListView.Items.Add( file.Name );9899 newFileItem.ImageIndex = 1; // set file image100 } // end foreach101 } // end try102103 // access denied104 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 catch110 } // end method LoadFilesInDirectory111112 // handle load event when Form displayed for first time113 private void ListViewTestForm_Load( object sender, EventArgs e )114 {115 // set Image list116 Image folderImage = Image.FromFile(117 currentDirectory + @"\images\folder.bmp" );118119 Image fileImage = Image.FromFile(120 currentDirectory + @"\images\file.bmp" );121122 fileFolder.Images.Add( folderImage );123 fileFolder.Images.Add( fileImage ); 124125 // load current directory into browserListView126 LoadFilesInDirectory( currentDirectory );127 displayLabel.Text = currentDirectory;128 } // end method ListViewTestForm_Load129 } // end class ListViewTestForm
2007 Dr. Natheer Khasawneh. All rights reserved.
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
14.11 Tab Controls
Fig. 14.32 Tabbed pages in Visual Studio .NET.
Tab pages
2007 Dr. Natheer Khasawneh. All rights reserved.
21
14.11 Tab Controls
Fig. 14.33 Example TabControl with TabPages.
TabPage
TabControl
Controls in TabPage
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 and events
Description / Delegate and Event Arguments
Common Properties
ImageList Specifies images to be displayed on a tab.
ItemSize Specifies tab size.
MultiLine Indicates whether multiple rows of tabs can be displayed.
SelectedIndex Indicates index of TabPage that is currently selected.
SelectedTab Indicates the TabPage that is currently selected.
TabCount Returns the number of tabs.
TabPages Gets the collection of TabPages within our
TabControl.
Common Event (Delegate EventHandler, event arguments EventArgs)
SelectedIndexChanged
Generated when SelectedIndex changes (i.e., another
TabPage is selected).
Fig. 14.35 TabControl properties and events.
2007 Dr. Natheer Khasawneh.
Outline24
UsingTabs.cs
1 // Fig. 14.36: UsingTabsForm.cs 2 // Using TabControl to display various font settings. 3 using System; 4 using System.Drawing; 5 using System.Windows.Forms; 6 7 // Form uses Tabs and RadioButtons to display various font settings 8 public partial class UsingTabsForm : Form 9 {10 // default constructor11 public UsingTabsForm()12 {13 InitializeComponent();14 } // end constructor1516 // event handler for Black RadioButton17 private void blackRadioButton_CheckedChanged(18 object sender, EventArgs e )19 {20 displayLabel.ForeColor = Color.Black; // change font color to black21 } // end method blackRadioButton_CheckedChanged2223 // event handler for Red RadioButton24 private void redRadioButton_CheckedChanged(25 object sender, EventArgs e )26 {27 displayLabel.ForeColor = Color.Red; // change font color to red28 } // end method redRadioButton_CheckedChanged2930 // event handler for Green RadioButton31 private void greenRadioButton_CheckedChanged(32 object sender, EventArgs e )33 {34 displayLabel.ForeColor = Color.Green; // change font color to green35 } // end method greenRadioButton_CheckedChanged
2007 Dr. Natheer Khasawneh.
Outline25
UsingTabs.cs
37 // event handler for 12 point RadioButton38 private void size12RadioButton_CheckedChanged(39 object sender, EventArgs e )40 {41 // change font size to 1242 displayLabel.Font = new Font( displayLabel.Font.Name, 12 );43 } // end method size12RadioButton_CheckedChanged4445 // event handler for 16 point RadioButton46 private void size16RadioButton_CheckedChanged(47 object sender, EventArgs e )48 {49 // change font size to 1650 displayLabel.Font = new Font( displayLabel.Font.Name, 16 );51 } // end method size16RadioButton_CheckedChanged5253 // event handler for 20 point RadioButton54 private void size20RadioButton_CheckedChanged(55 object sender, EventArgs e )56 {57 // change font size to 2058 displayLabel.Font = new Font( displayLabel.Font.Name, 20 );59 } // end method size20RadioButton_CheckedChanged6061 // event handler for Hello! RadioButton62 private void helloRadioButton_CheckedChanged(63 object sender, EventArgs e )64 {65 displayLabel.Text = "Hello!"; // change text to Hello!66 } // end method helloRadioButton_CheckedChanged6768 // event handler for Goodbye! RadioButton69 private void goodbyeRadioButton_CheckedChanged(70 object sender, EventArgs e )71 {72 displayLabel.Text = "Goodbye!"; // change text to Goodbye!73 } // end method goodbyeRadioButton_CheckedChanged74 } // end class UsingTabsForm
2007 Dr. Natheer Khasawneh. All rights reserved.
2714.12 Multiple-Document Interface Windows
• Users can edit multiple documents at once• Usually more complex than single-document-
interface 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
Fig. 14.37 MDI parent and MDI child.
MDI parent
MDI child
MDI child
2007 Dr. Natheer Khasawneh. All rights reserved.
29
14.12 Multiple Document Interface (MDI) Windows
Fig. 14.38 SDI and MDI forms.
Single Document Interface (SDI) Multiple Document Interface (MDI)
2007 Dr. Natheer Khasawneh. All rights reserved.
30
14.12 Multiple Document Interface (MDI) Windows
MDI Form events and properties
Description / Delegate and Event Arguments
Common MDI Child
Properties
IsMdiChild Indicates whether the Form is an MDI child. If True, Form is an MDI child (read-only property).
MdiParent Specifies the MDI parent Form of the child.
Common MDI Parent Properties
ActiveMdiChild Returns the Form that is the currently active MDI child
(returns null if no children are active).
IsMdiContainer Indicates whether a Form can be an MDI. If True, the
Form can be an MDI parent. Default is False.
MdiChildren Returns the MDI children as an array of Forms.
Common Method LayoutMdi 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
Maximized child’s icons: minimize, restore and close
Minimized child’s icons: restore, maximize and close
Parent’s title bar displays maximized child
Fig. 14.40 Minimized and maximized child windows.
2007 Dr. Natheer Khasawneh. All rights reserved.
32
14.12 Multiple Document Interface (MDI) Windows
Fig. 14.41 Using MenuItem property MdiList.
Separator bar and child windows
9 or more child windows enables the More Windows... option
Child windows list
2007 Dr. Natheer Khasawneh. All rights reserved.
33
14.12 Multiple Document Interface (MDI) Windows
Fig. 14.42 LayoutMdi enumeration values (Part 1).
ArrangeIcons Cascade
2007 Dr. Natheer Khasawneh. All rights reserved.
34
14.12 Multiple Document Interface (MDI) Windows
Fig. 14.43 LayoutMdi enumeration values (Part 2).
TileHorizontal
TileVertical
2007 Dr. Natheer Khasawneh.
Outline35
UsingMDI.cs
1 // Fig. 14.43: UsingMDIForm.cs 2 // Demonstrating use of MDI parent and child windows. 3 using System; 4 using System.Windows.Forms; 5 6 // Form demonstrates the use of MDI parent and child windows 7 public partial class UsingMDIForm : Form 8 { 9 // default constructor10 public UsingMDIForm()11 {12 InitializeComponent();13 } // end constructor1415 // create Child 1 window when child1ToolStrip MenuItem is clicked16 private void child1ToolStripMenuItem_Click(17 object sender, EventArgs e )18 {19 // create new child20 ChildForm formChild = 21 new ChildForm( "Child 1", @"\images\csharphtp1.jpg" );22 formChild.MdiParent = this; // set parent 23 formChild.Show(); // display child 24 } // end method child1ToolStripMenuItem_Click2526 // create Child 2 window when child2ToolStripMenuItem is clicked27 private void child2ToolStripMenuItem_Click(28 object sender, EventArgs e )29 {30 // create new child31 ChildForm formChild = 32 new ChildForm( "Child 2", @"\images\vbnethtp2.jpg" );33 formChild.MdiParent = this; // set parent 34 formChild.Show(); // display child 35 } // end method child2ToolStripMenuItem_Click
2007 Dr. Natheer Khasawneh.
Outline36
UsingMDI.cs
37 // create Child 3 window when child3ToolStripMenuItem is clicked38 private void child3ToolStripMenuItem_Click(39 object sender, EventArgs e )40 {41 // create new child42 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_Click4748 // exit application49 private void exitToolStripMenuItem_Click( object sender, EventArgs e )50 {51 Application.Exit();52 } // end method exitToolStripMenuItem_Click5354 // set Cascade layout55 private void cascadeToolStripMenuItem_Click(56 object sender, EventArgs e )57 {58 this.LayoutMdi( MdiLayout.Cascade );59 } // end method cascadeToolStripMenuItem_Click6061 // set TileHorizontal layout62 private void tileHorizontalToolStripMenuItem_Click(63 object sender, EventArgs e )64 {65 this.LayoutMdi( MdiLayout.TileHorizontal );66 } // end method tileHorizontalToolStripMenuItem6768 // set TileVertical layout69 private void tileVerticalToolStripMenuItem_Click(70 object sender, EventArgs e )71 {72 this.LayoutMdi( MdiLayout.TileVertical );73 } // end method tileVerticalToolStripMenuItem_Click74 } // end class UsingMDIForm
2007 Dr. Natheer Khasawneh.
Outline38
Child.cs
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 support13 InitializeComponent();1415 Text = title; // set title text1617 // set image to display in pictureBox18 picDisplay.Image = Image.FromFile(19 Directory.GetCurrentDirectory() + fileName );20 } // end constructor21 } // end class ChildForm
2007 Dr. Natheer Khasawneh. All rights reserved.
39
Timer Class
• Implements a timer that raises an event at user-defined 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 single-threaded 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 Gets or sets the time, in milliseconds, between timer ticks.
Common Event (Delegate EventHandler, event arguments EventArgs)
Tick Occurs when the specified timer interval has elapsed and the timer is enabled.
Timer Class
Top Related