2007 Dr. Natheer Khasawneh. All rights reserved. 1 Chapter 14 – Graphical User Interfaces Part 2 Outline 14.9 TreeViews 14.10 ListViews 14.11 TabControl

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


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


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


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.


5

14.9 TreeNodeTreeNode properties and methods


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.


6

14.9 TreeView

Fig. 14.27 TreeNode Editor.

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


Outline8


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


Outline9


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


Outline10

TreeViewDirectoryStructureTest.cs Program Output


11

14.10 ListViews

• Displays list of items– Can select one or more items from list

– Displays icons to go along with items


1214.10 ListViews

ListView events and 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),

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.


13

14.10 ListViews

Fig. 14.30 Image Collection Editor window for an ImageList component.


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


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


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


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


Outline18

ListViewTest.cs Program Output


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


20

14.11 Tab Controls

Fig. 14.32 Tabbed pages in Visual Studio .NET.

Tab pages


21

14.11 Tab Controls

Fig. 14.33 Example TabControl with TabPages.

TabPage

TabControl

Controls in TabPage


22

14.11 Tab Controls

Fig. 14.35 Adding TabPages to the TabControl.


23

14.11 Tab Controls

TabControl properties and events


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.


SelectedIndexChanged

Generated when SelectedIndex changes (i.e., another

TabPage is selected).

Fig. 14.35 TabControl properties and events.


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


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


Outline26

UsingTabs.cs Program Output


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


28

14.12 Multiple Document Interface (MDI) Windows

Fig. 14.37 MDI parent and MDI child.

MDI parent

MDI child

MDI child


29


Fig. 14.38 SDI and MDI forms.

Single Document Interface (SDI) Multiple Document Interface (MDI)


30


MDI Form events and properties


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.


MdiChildActivate Generated when an MDI child is closed or activated.

Fig. 14.39 MDI parent and MDI child events and properties.


31


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.


32


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


33


Fig. 14.42 LayoutMdi enumeration values (Part 1).

ArrangeIcons Cascade


34


Fig. 14.43 LayoutMdi enumeration values (Part 2).

TileHorizontal

TileVertical


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


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


Outline37

UsingMDI.cs Program Output


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


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


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.


Tick Occurs when the specified timer interval has elapsed and the timer is enabled.

Timer Class

Documents

2007 Dr. Natheer Khasawneh. All rights reserved. 1 Chapter 14 – Graphical User Interfaces Part 2 Outline 14.9 TreeViews 14.10 ListViews 14.11 TabControl