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

CommonWindows 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 Handlersfor 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

StatusBarPanelCollection Editor

StatusBar Panels (Example)• Store a value in the panel having an

index value of 3sbrMain.Panels(3).Text _ System.DateTime.Today.ToShortDateString

• Use the panel name to accomplish the same task

sbpDate.Text _ System.DateTime.Today.ToShortDateString

Introduction toDrill-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

• SyntaxOverridable 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 nodeDim ptnRoot As TreeNode

Dim ptnChild As TreeNode

ptnRoot = tvwMain.Nodes.Add("Root Node")

• Create child nodes of the root-level nodeptnChild = 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 TreeNodeFor Each tnLocal In tnCurrent.Nodes

' StatementsCall 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 syntaxOverridable 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

ColumnHeaderCollectionExample • 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)

ColumnHeaderCollectionExample• 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)