Graphical User Interfaces Part 2 1 Outline TreeViews ListViews Tab Control

TreeView 2 Click to expand node, displaying child nodes Root node Child nodes Click to collapse node, hiding child nodes

TreeView Displays nodes hierarchically Parent nodes have children The first parent node is called the root Use Add method to add nodes 3

TreeView Properties Nodes – lists the collection of TreeNode s in the control. SelectedNode ImageList - Used to display icons by the nodes CheckBoxes – indicates whether checkboxes appear next to nodes (default is false) Common Events AfterSelect – generated after selected node changes (default) 4

TreeNode Properties Text – text displayed in TreeView Nodes – collection of TreeNodes contained in current node FirstNode, LastNode – 1 st and last child in in Nodes PrevNode, NextNode – refers to sibling nodes FullPath – indicates path of node, starting at root of tree SelectedImageIndex – image to use when node selected ImageIndex – image to use when node de-selected Common Methods Collapse Expand ExpandAll GetNodeCount – returns the number of child nodes 5

TreeView 6 To add nodes in design view Right click, select Edit Nodes Or click the ellipsis by the Nodes property in the Properties window. This opens TreeNode Editor

TreeView 7 Property Nodes methods –Add, Clear, Remove myTreeView.Nodes.Add (new TreeNode (RootLabel);

8

ListView s Displays list of items Similar to ListBox, can select one or more items from list Displays icons to go along with items Properties Items – collection in the control SelectedItems – list currently selected items View – determines appearance (LargeIcon, SmallIcon, List, Details) SmallImageList, LargeImageList – images to use when displaying icons Activation – determines how user activates an item (OneClick, TwoClick (changes color) and Standard (double-click) CheckBoxes – items appear with checkboxes (default is false) 9

ListView s Properties MultiSelect – default is true Common Event ItemActivate – generated when an item in the ListView is activated. Does not specify which item is activated. 10

ListView 11 Image Collection Editor window for an ImageList component.

TabControl Programmer can design GUI that have a large number of controls or data without using a large amount of screen space. TabControl creates tabbed windows called TabPage objects TabPages can have controls Tabpages have own Click event for when tab is clicked 12

Tab Control s 13 Example TabControl with TabPage s. TabPage TabControl Controls in TabPage

Tab Control s 14 Adding TabPage s to the TabControl. TabControl

TabControl s 15

16

public class UsingTabs : System.Windows.Forms.Form { // output label reflects text changes private System.Windows.Forms.Label displayLabel; // table control containing table pages colorTabPage, // sizeTabPage, messageTabPage and aboutTabPage private System.Windows.Forms.TabControl optionsTabControl; // table page containing color options private System.Windows.Forms.TabPage colorTabPage; private System.Windows.Forms.RadioButton greenRadioButton; private System.Windows.Forms.RadioButton redRadioButton; private System.Windows.Forms.RadioButton blackRadioButton; 17 Color tab Color buttons for color tab TabControl

// event handler for green color radio button private void greenRadioButton_CheckedChanged ( object sender, System.EventArgs e ) { displayLabel.ForeColor = Color.Green; } // event handler for size 12 radio button private void size12RadioButton_CheckedChanged ( object sender, System.EventArgs e ) { displayLabel.Font = new Font( displayLabel.Font.Name, 12 ); } // event handler for message "Hello!" radio button private void helloRadioButton_CheckedChanged ( object sender, System.EventArgs e ) { displayLabel.Text = "Hello!"; } 18 Event handlers