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)