List View and Tree View

Everyone is familiar with the Windows Explorer application, which uses a tree control in the left pane and a list control in the right pane. The .NET ListView and TreeView controls wrap the Windows tree and list controls. Because they're often used together in applications in this way, I'll discuss both in this section.

The TreeView Control

A TreeView is a control that displays a hierarchy of items in the form of a tree. The programmer has to load the control with data items representing the nodes, and the control takes care of all the run-time operations including displaying the tree, interacting with the user, and raising events. Each node in the tree has a caption and an optional pair of images, which are used to represent selected and unselected nodes.

The following code fragment shows how a TreeView can be constructed and populated with nodes:

Private tv As TreeView

Public Sub New()

' Create and setup a TreeView tv = New TreeView() tv.Location = New Point(30, 30) tv.Size = New Size(120, 150)

' Set the ImageList tv.ImageList = ImageList1

' Add it to the form Controls.Add(tv)

' Add child nodes AddNodes() End Sub

Private Sub AddNodes() ' Create and add a root node Dim tn As New TreeNode("Root", 0, 0) tv.Nodes.Add(tn)

' Add a child node

Dim tn1 As New TreeNode("Child1", 1, 1) tn.Nodes.Add(tn1) End Sub

The code starts by creating a TreeView object and setting its size and position. I then associate an ImageList with the control, which contains the images that are going to be used by the nodes, and then add the control to the form. Setting up the child nodes involves creating TreeNode objects and adding them to the hierarchy. The TreeNode constructor in use takes three arguments: the caption string and the indices of the images in the ImageList that are going to be used when the node is selected and unselected.

TreeNodes have a Nodes property that holds references to their children, and so that you can add the first ones to the tree, the TreeView also has a Nodes property that refers to the root node(s) in the hierarchy. In the example, the root node is added directly to the TreeView, and the child node is added to the root node. The main problem with building TreeViews is keeping track of where you need to add nodes when you are building the structure.

This code produces the tree shown in Figure 10.16.


Figure 10.16: A TreeView control with two nodes.

Commonly used properties and methods of the TreeView class are summarized in Tables 10.21 and 10.22.

Table 10.21: tail; .ï pipisotteiÉcIs




The background image, if any.


The style of the control border. Default is a 3D border.


True if checkboxes are shown next to the image on each


Table 10.21: tally1 usi pipilii!




True if the tree nodes are highlighted as the mouse moves over them.


The control holding the images for the nodes.


True if the user can edit the node labels.


The collection of TreeNodes managed by this TreeView.


The currently selected node, or null (Nothing) if no node is selected.


True if lines are drawn between nodes. Default is true.


True if the expand button is shown next to a node that has children.


True if lines are shown joining nodes to the root.


True if nodes in the tree are sorted.


The node visible at the top of the TreeView.


The number of visible nodes.

Table 10.22: ItyuMi M



BeginUpdate, EndUpdate

Disables and reenables redrawing of the tree. Used when many nodes are to be updated to save multiple redraws.

CollapseAll, ExpandAll

Hides or shows all child nodes.


Gets the node at a point.


Returns the number of nodes in the tree.

The ListView Control

A ListView displays a list of items in one of four formats:

■ Using large icons

■ Using small icons

If you're familiar with the ways in which you can display files in Windows Explorer, then you'll have a pretty good idea of what the ListView formats look like. Figure 10.17 shows a ListView displayed in Report format. It also shows the use of optional column headers and the way in which text is edited if it is too long to fit into a column.

r Forml




Team One 21 Team Two 14 TeamTh.. 5 Team Four 12

Team Five 10

Figure 10.17: A ListView in Report format.

As with the TreeView, using a ListView involves populating the control with the items it is to display; in this case, the items are Listltem objects. The following code fragment shows how a ListView can be constructed and populated with items:

Private lv As ListView

Public Sub New()

' Create a ListView, position and size it lv = New ListView() lv.Location = New Point(8, 8) lv.Size = New Size(160, 136) lv.ForeColor = SystemColors.WindowText

' Set up the ImageList that holds the large icons lv.LargeImageList = ImageList1


' Add the items AddItems() End Sub

Private Sub AddItems() ' Create some list items

Dim item1 As New ListViewItem("Team one", 0) Dim item2 As New ListViewItem ("Team two", 1) Dim item3 As New ListViewItem ("Team three", 2)

' Add them to the list lv.Items.Add(item1) lv.Items.Add(item2) lv.Items.Add(item3) End Sub

The code first creates a ListView and sets its size, position, and foreground color. Because a ListView can display items using large or small icons, each ListView has two liageList properties. In this example, I'm setting the one that holds the large icons. The Addlteis() function creates new ListItems, each with a caption and an icon index, and adds them to the list.

This code produces the ListView shown in Figure 10.18.


Team one

T earn two


Teann three

Figure 10.18: A form containing a ListView control.

Commonly used properties and methods of the ListView class are summarized in Tables 10.23 and 10.24.

Table 10.23: iiiil; uii iipliisMj




Specifies how the user activates the item (single or doubleclick).


The alignment of items in the window.


If true, users can drag columns to reorder them.


True if icon views are autoarranged.


The background image, if any.


The style of the control border. Default is a 3D border.


If true, every item will display a checkbox.


The collection of column headers.


Returns the item that has the focus.


True if items are selected by hovering over them with the

Table 10.23: tail; .ï ppiisAiiicIs





The collection of list items.


The ImageList containing icons for Large Icon view.


True if multiple selection is allowed.


True if scrollbars are visible.


The collection of currently selected items.


The ImageList containing icons for Small Icon view.

Table 10.24: HyuilmlilAiiiii




Arranges the icons in a given format.

BeginUpdate, EndUpdate

Disables and reenables redrawing of the control. Used when many items are to be updated to save multiple redraws.


Removes all items from the tree.


Ensures that a given item is visible, scrolling it into view if necessary.


Gets the item at a point.

0 0

Post a comment