Common Windows Controls

Objectives Learn about common Windows controls Load, display, and share images with other control instances using the ImageList control Create a ToolBar control instance on a form and configure it Create a status bar on a form to display application- specific information Create a drill-down interface using the TreeView and ListView controls Configure the ListView control to work with Details view

Common Windows Controls (1) The ImageList control stores images typically used by other control instances It is used with the ListView and TreeView controls for example The ToolBar control displays buttons Each button typically duplicates the functionality of some menu item The StatusBar control displays a horizontal bar Typically appears docked along the bottom of a form Technically can be docked along any edge of the form

Common Windows Controls (2) The TreeView control allows you to create a hierarchical interface called a drill-down interface Works similarly to the left pane in Windows Explorer The ListView control displays data in the form of a list The ListView control is commonly used in conjunction with the TreeView control Works similarly to the right pane in Windows Explorer

The ImageList Control (1) The ImageList control stores graphical files such as bitmap (.bmp), icon (.ico), and cursor (.cur) files Used in conjunction with other control instances that display graphical images TreeView ListView ToolBar

The ImageList Control (2) An ImageList control has a property named Images This property contains a reference to an ImageCollection This collection, in turn, contains one or more Image objects corresponding to the images in the collection Reference an individual Image object in the collection at runtime by its 0-based numeric index Add images at design time using the Image Collection Editor All images in a control instance must have the same size If images of multiple sizes are necessary, create multiple control instances

Image Collection Editor Add a new image Remove the selected image

The ToolBar Control A ToolBar control typically contains buttons that the user clicks to perform an action Each toolbar button can contain text, a graphical image, or both Buttons can be configured as drop-down buttons or as push buttons

ToolBar Control (Properties) The Appearance property defines whether the buttons on the toolbar appear raised off the surface of the toolbar or appear flat The Buttons property references a collection containing the ToolBarButton objects appearing on the toolbar The ImageList property stores a reference to an ImageList control instance The Boolean ShowToolTips property defines whether or not the ToolTips will appear as the mouse hovers over a button The TextAlign property defines how the text will be aligned about the button when the button displays text

ToolBar Control (Events) A ButtonClick event fires for the ToolBar itself Use second argument to obtain a reference to the clicked button Use Name or Tag property to determine which button was clicked A ButtonDropDown event fires when a button having a drop-down style is clicked

ToolBar Control Buttons (1) Buttons appearing on a toolbar have a data type of ToolBarButton Properties Enabled and Visible properties enable or disable a ToolBarButton or make it visible or invisible, respectively ImageIndex property contains the numeric index of the image defined in an instance of the ImageList control

ToolBar Control Buttons (Properties) Each button has a Name property with which you can reference the button programmatically The Tag property can be used to accomplish the same task as Name The Style property defines how the button operates Four possible styles The Text property defines the optional text appearing in the button The ToolTipText property contains the text that will appear in the button’s ToolTip

ToolBarButton Collection Editor

ToolBar Control Button Style Four button styles A button configured as a DropDownButton displays a context menu A button configured as a PushButton works much like an ordinary Button control A Separator button does nothing other than to visually separate one button from another A ToggleButton works similarly to a check box or checked menu item It can be checked or unchecked

DropDown Buttons (1) A DropDown button displays a context menu To create a context menu Create an instance of the ContextMenu control Create the menu in-place as you have done before with the MainMenu control Create a Click event handler for each menu item

DropDown Buttons (2) To associate a ToolBarButton with a context menu: Set the DropDownMenu property of the button to the name of the ContextMenu control instance Set the Style of the button to DropDownButton VB.NET does the rest

Creating Event Handlers for ToolBar Buttons Example of a ButtonClick event handler Private Sub tbrMain_ButtonClick( _ ByVal sender As System.Object, ByVal e As _ System.Windows.Forms.ToolBarButtonClickEventArgs)_ Handles tbrMain.ButtonClick Select Case e.Button.Tag Case "tbbOpen" 'Case statements for other buttons End Select End Sub

The StatusBar Control (1) Use to display status information Control typically docked along the bottom of the form Status bar contains one or more panels to display information Panels may be configured to resize as form is resized

The StatusBar Control (2) Events PanelClick event fires when the user clicks on the status bar A reference to the panel that was clicked is passed in the second argument to the event handler Properties Panels property contains a reference to the StatusBarPanelCollection This collection contains a reference to each panel defined in the status bar ShowPanels property (Boolean), if False, causes the value of the Text property to appear across the entire status bar If True, individual panels appear in the visible region of the status bar Text property value appears in the status bar only when the value of the ShowPanels property is False

The StatusBarPanel Class Visible region of the status bar is divided into panels A panel can contain text, a picture, or both Panel size can be configured To hide a StatusBarPanel, set the Width property to 0 No Visible property exists

StatusBarPanel (Properties) The Alignment property can be set to Left, Right, or Center, to align the text within the visible region of the panel The AutoSize property allows you to specify how a panel is resized relative to the other panels in the status bar Values are None, Contents, Spring The BorderStyle property defines how the border appears around a status bar panel Borders are typically recessed The Icon property contains an image The MinWidth property defines the minimum width of the panel The Width property defines the actual or maximum panel width

StatusBarPanel Collection Editor

StatusBar Panels (Example) Store a value in the panel having an index value of 3 sbrMain.Panels(3).Text _ System.DateTime.Today.ToShortDateString Use the panel name to accomplish the same task sbpDate.Text _ System.DateTime.Today.ToShortDateString

Introduction to Drill-Down Interfaces A drill-down interface is one in which the user navigates through hierarchical data from the most general data to the most specific data VB.NET uses two different controls to create the two parts of a drill-down interface The TreeView control creates the hierarchical part of the user interface, which appears in the left pane of Windows Explorer The ListView control appears in the right pane of Windows Explorer and displays detailed information about the selected item(s) appearing in the TreeView

Drill-Down Interface TreeView utilizes a drill-down interface to display file hierarchy ListView displays files and associated icons

TreeView Control Relationships Top-level node is a root node Root node has no parent node Nodes have one or more children Children having the same parent are siblings One sibling is designated as the first sibling and another as the last sibling The terms grandchildren and great grandchildren further describe relationships

Hierarchical Relationships Between TreeNodes

The TreeView Control (Properties 1) The CheckBoxes property can be set to True or False If set to True, check boxes appear to the left of each TreeNode If set to False, they do not The ImageIndex property contains the numeric index of the image from an associated ImageList control instance The ImageList property contains a reference to an instance of the ImageList control The LabelEdit property (Boolean) defines whether or not the user can edit the textual contents of each TreeNode The Nodes property references a collection of TreeNode objects

TreeView Control (Properties 2) The PathSeparator property defines the character that separates the TreeNodes appearing in the hierarchy of a TreeView control instance The Scrollable property (Boolean) defines whether or not scroll bars will appear when the expanded TreeNodes will not fit within the visible region of the control instance The SelectedImageIndex property contains the numeric index of an image appearing in the associated ImageList control instance The SelectedNode property gets the selected TreeNode or selects a TreeNode The ShowLines property (Boolean) defines whether or not lines connect the visible TreeNodes

TreeView Control (Properties 3) If the ShowRootLines property is True, then child TreeNodes appear connected to the root TreeNode If the ShowPlusMinus property is True, then a plus sign appears to the left of TreeNode’s text if the TreeNode is collapsed, and a minus sign appears if the TreeNode is expanded The Sorted property, if True, causes the TreeNode objects to be sorted in alphabetical order

TreeView Control (Methods 1) The BeginUpdate and EndUpdate methods suppress painting of the TreeView control instance while TreeNodes are being added or removed Use to reduce display flicker and improve efficiency The CollapseAll method collapses all TreeNode objects in the hierarchy, such that only the root-level node(s) are visible The ExpandAll method expands all of the TreeNode objects in the hierarchy The GetNodeAt method is typically used with a mouse event to get a TreeNode at a particular point or x,y coordinate pair

TreeView Control (Methods 2) The GetNodeCount method accepts one Boolean argument If the argument is False, then GetNodeCount returns the number of immediate children of the specified TreeNode If the argument’s value is True, then the method returns the count of all of the child TreeNodes in the TreeView control instance

TreeView Control (Events 1) The AfterCheck event only fires when the CheckBoxes property is set to True The event fires just after a TreeNode is checked or unchecked The BeforeExpand and AfterExpand events fire just before and just after a TreeNode is being expanded, respectively The BeforeCollapse and AfterCollapse events fire just before and just after a TreeNode is collapsed, respectively

TreeView Control (Events 2) The AfterSelect event fires after a TreeNode is selected in the control instance Data type of the second argument is TreeViewEventArgs The BeforeSelect event fires just before a TreeNode is selected Data type of the second argument is TreeViewCancelEventArgs

The TreeNode Object (Properties 1) The Checked property, if True, indicates that the TreeNode is checked If the TreeNode is not checked, then the Checked property has a value of False The ImageIndex property contains the numeric index of the image appearing in the corresponding ImageList control instance The SelectedImageIndex property contains the numeric index of an image appearing in the corresponding ImageList control instance The Tag property has the same meaning as the Tag property of other control instances The Text property stores the text appearing in the TreeNode

TreeNode Object (Properties 2) Boolean Properties The IsVisible property returns True if the TreeNode is visible The IsSelected property returns True if the TreeNode is selected The IsExpanded property returns True if the TreeNode is expanded Properties used to locate sibling TreeNodes The FirstNode property gets the first sibling TreeNode of the current TreeNode The PreviousNode and NextNode properties get the previous and next sibling, respectively The LastNode property gets the last sibling

TreeNode Object (Methods 1) The Collapse method collapses the child TreeNodes of the current TreeNode The Expand method expands the child TreeNodes of the current TreeNode The Toggle property collapses expanded nodes or expands collapsed nodes depending on the current state of the TreeNode The BeginEdit and EndEdit methods enable and disable editing of the current TreeNode, respectively

TreeNode Object (Methods 2) The Remove method removes the current TreeNode The EnsureVisible method makes the TreeNode visible, expanding or collapsing other TreeNodes as necessary The GetNodeCount method returns the number of child TreeNodes of the current TreeNode

TreeNode Editor The TreeNode Editor allows you to create the root TreeNode, child TreeNodes, and sibling TreeNodes using the following buttons The Add Root button is the only enabled button when the TreeView control instance contains no TreeNodes To add a child TreeNode, select an existing TreeNode, and then click the Add Child button The new TreeNode will be created as a child of the selected TreeNode To delete a TreeNode, select the TreeNode to be deleted, and then click the Delete button

TreeNode Editor (Illustration)

Adding a TreeNode Programmatically (1) The overloaded Add method adds a new TreeNode object to the Nodes collection Syntax Overridable Overloads Public Function Add (ByVal text As String) As TreeNode Overridable Overloads Public Function Add (ByVal node As TreeNode) As TreeNode

Adding a TreeNode Programmatically (2) In the first overloaded method, the Add method creates a new instance of the TreeNode class Method accepts one argument, the text string stored in the TreeNode Method returns the instance of the TreeNode that was added In the second overloaded method, the Add method accepts one argument An existing TreeNode object Method returns the index of the node in the Nodes collection

Adding a TreeNode Programmatically (3) Add a root-level node to the TreeView control instance named tvwMain tvwMain.Nodes.Add("First Node") Dim ptnCurrent As New TreeNode() ptnCurrent.Text = "Second Node" tvwMain.Nodes.Add(ptnCurrent)

Creating Child Nodes Node collections are hierarchical Each TreeNode object contains its own Nodes collection Note TreeView control contains a Nodes collection too This Nodes collection stores the immediate children of the current TreeNode

Creating Child Nodes (Example) Create a root-level node Dim ptnRoot As TreeNode Dim ptnChild As TreeNode ptnRoot = tvwMain.Nodes.Add("Root Node") Create child nodes of the root-level node ptnChild = tvwMain.Nodes(0).Nodes.Add( _ "First Child") ptnChild = tvwMain.Nodes(0).Nodes.Add( _ "Second Child")

TreeNode Hierarchy

Iterating Through TreeNodes A recursive procedure is a procedure that calls itself Typically used with hierarchical data structures such as a TreeView A condition must occur causing the procedure to stop calling itself

Calling a Recursive Procedure

Calling a Recursive Procedure (Example) Call CheckChildren(e.Node, True) Private Sub CheckChildren(ByVal tnCurrent As _ TreeNode, ByVal pblnChecked As Boolean) Dim tnLocal As TreeNode For Each tnLocal In tnCurrent.Nodes ' Statements Call CheckChildren(tnLocal, pblnChecked) Next End Sub

The ListView Control The ListView control displays data in the form of lists or organized into columns The view defines how the data are displayed within the control instance 4 views are supported ListView control is typically used with the TreeView control

ListView Control (Properties 1) The Alignment property defines the alignment of the icons within the visible region of the control instance The Boolean AllowColumnReorder property defines whether or not the user can reorder the columns using drag-and-drop The Boolean CheckBoxes property defines whether check boxes appear along with the list items The Columns property references a collection of type ColumnHeaderCollection The FullRowSelect property is only relevant while the ListView is in Details view The Boolean LabelEdit property defines whether or not the user can edit the text of an item

ListView Control (Properties 2) The Boolean MultiSelect property, if set to True, allows the user to select multiple items in the control instance The Boolean Scrollable property defines whether or not scroll bars appear in the control instance when the items will not fit within the visible region The Sorting property allows you to specify whether and how the items in the ListView will be sorted The View property defines which of the four supported views is the current view

ListView Control (Methods) When adding or removing several items from the list, suspend repainting the control instance by calling the BeginUpdate method, performing the updates, and then calling the EndUpdate method The Clear method removes all of the items from the control instance The Sort method sorts the items in the control instance

ListView Control (Events) The BeforeLabelEdit event fires just before the user begins editing the text in a label The AfterLabelEdit event fires just after the user finishes editing the text in a label The ItemCheck event fires when the user checks or unchecks an item

The View Property The value of the View property can be changed at runtime or at design time Four different views In LargeIcon view (default), items are displayed with large (32 by 32) pixel icons In SmallIcon view, items are displayed with small (16 by 16) pixel icons In List view, items are displayed in a list. Data can be aligned in rows or columns In Detail view, items are displayed in multiple columns having column headers

The ListViewItem Class Each item appearing in a ListView control instance is a ListViewItem A ListViewItem object contains a textual description and an associated image

The ListViewItem Class (Properties) The ImageIndex property contains the index of the image associated with the ListViewItem The ImageList property returns the ImageList control instance associated with the ListViewItem The SubItems property references a collection of type ListViewSubItemCollection The Text property stores the text appearing in the visible region of the ListViewItem

ListViewItem Class (Methods) The BeginEdit method enables editing of the ListViewItem The EndEdit method disables editing

Adding a ListView Item Call the Add method having the following syntax Overridable Overloads Public Function Add(ByVal value As ListViewItem) As ListViewItem Overridable Overloads Public Function Add(ByVal text As String) As ListViewItem Overridable Overloads Public Function Add(ByVal text As String, ByVal imageIndex As Integer) As ListViewItem

Adding a ListView Item The first overloaded method accepts one argument, an existing instance of the ListViewItem class The ListViewItem is added to the end of the list The second overloaded method accepts one argument, a string The string appears in the visible region of the control instance The third overloaded method accepts two arguments The first contains the string appearing in the visible region of the control instance The second contains the index of an image from an instance of the ImageList control

ListViewItem Class (Example) Add a ListViewItem lvwDemo.Items.Add("Item 1") Dim lviDemo As New ListViewItem() lviDemo.Text = "Item 2" lvwDemo.ImageIndex = 1 lvwDemo.Items.Add(lviDemo) lvwDemo.Items.Add("Item 3", 1)

The ListView Control (Details View) Displays data in multiple columns ColumnHeaderCollection applies to the ListView control itself and contains column headers ListViewSubItemCollection applies to each ListItem

Using Details View (Illustration)

The ColumnHeaderCollection The ColumnHeaderCollection contains one or more ColumnHeader objects representing each column Properties The Text property contains the text that appears in the column header The TextAlign property defines horizontal alignment of the text within the column The Width property defines the width of the column This column width is measured in pixels

ColumnHeaderCollection Example Example Dim lvwchCurrent As New ColumnHeader() lvwchCurrent.Text = "Column 1" lvwchCurrent.Width = 72 lvwchCurrent.TextAlign = HorizontalAlignment.Center lvwDemo.Columns.Add lvwchCurrent lvwDemo.Columns.Add("Column 2", 72, _ HorizontalAlignment.Center)

ColumnHeaderCollection Example Dissection The first block of statements Creates a new instance of the ColumnHeader class Then it configures the class instance by individually setting each property Finally, it adds the ColumnHeader to the Columns collection The final statement adds a new ColumnHeader

ListViewSubItems ListViewSubItems do not respond to events ListViewSubItems support only the BackColor and ForeColor properties that define the text color, and the Text property to define the text itself that appears in the sub item

ListViewSubItems (Illustration)