Let’s start our discussion with a few simple properties that you can see that design time through the control’s property pages. To experiment with the settings of the property pages, open the TView1 project in this chapter’s folder on the CO. The project’s main Form is shown. After setting Some properties (they are discussed next), run the project, and click the Populate Sorted –‘n to see the effects these property settings have on ‘he control. We’ll discuss tile other buttons on the Form in the following sections.
With the TView! project open in the Visual Basic IDE, right-click the control and from the shortcut menu select Properties. The TreeView control’s property pages contain three tabs: the Font and Picture tubs’ (which are trivial) and the General tab.
On the General tab, you can be list, as well a few general attributes. The Style property of the TreeView control can have one of the values shown in Table. This property determines the appearance of the data on. the control and the navigation model too. Set the TreeView control’s style on the first property page, the project, and then open the nodes Shapes and Colors to see how they are displayed. Stop the project, change the Style property, and run the project to test all the settings.
The checkboxes on the right let you specify the general attributes of the control:
• HideSelection This property determines whether the selected item will remain highlighted when the focus is moved to another control .
• Sorted This property determines whether the items in the control will be automatically sorted or not.
• FullRowSelect This True/False value determines whether the entire row of the-selected item will be highlighted and whether an item will be selected even if the user clicks outside the item’s ‘text.
• CheckBoxes If this option is enabled, a checkbox appears in front of each item. If the control will allow the user to select multiple items, you should consider placing checkboxes in front of each item.
• SingleSel Click this property to enable multiple item selection (to select multiple items click their name while holding down the Shift or Ctrl key).
• Scroll This True/False value determines whether the appropriate scrollbars will be attached automatically to the control” should the control’s contents exceed its dimensions.
• HotTracking This True/False value determines whether items are highlighted as the pointer hovers over them. When this property is True, the List- View control behaves like a Web document with the items acting as hyperlinks.
Adding New Items
The items or nodes on a Treeview control are members of the Nodes collection. To access the Nodes collection use the following expression where Treeviewl is the control’s name:
TreeView1. Nodes
As a collection, Nodes exposes the following members.
• Add method Adds a new node to the Nodes collection
• Count property Returns the number of nodes b l the Nodes collection
• Clear method Removes all the nodes from the collection
.• Item property Retrieves a node specified by an Index value or a key
• Remove method Removes a node from the Nodes collection.
Since most of the arguments are optional (only the Text argument is required), let’s start with the simpler forms of the Add method. To add the first-level items to a TreeView control, use this syntax:
TreeViewl.Nodes.Add, ,”node’s key”, “node’s text”
You may omit any of the optional arguments, but you must still insert the appropriate commas to indicate the absence of the corresponding argument(s).
In this and the following sections, we’re going to examine the code of the TViewl project. The Add Categories button adds the three top-level nodes to the TreeVlew control with the following. statements.
When these statements are executed, three nodes will be added to the list. The strings “COLOR”, “SHAPE”, and “SOLID” are keys of the corresponding nodes.· They are required if you want to.place items under the Colors, Shapes, and Solids nodes. After clicking the Add Categories button, your TreeView control looks like the shown at the left.
To add a few nodes under the node Colors, use the following statements:
When these statements are executed, three nodes will be added under the Colors node, but the Colors node won’t be expanded; therefore, its child nodes won’t be visible. To see its child nodes, you must double-click the Colors node to expand it. The same TreeView control with its Colors node expanded is shown to the left.
The lines of Code are the Add Colors Command button’s Click event handler: Run the project, click the first button (Add Categories) and then the second button (Add Colors). If you click the Add Colors button first, you’ll get an error message, indicating that there’s no node with the “COLOR” key. Child nodes can’t be inserted unless their parent nodes exist already. (The TViewl project’ ~code on the CD contains a few additional statements that disable the buttons that generate similar runtime errors.)
The syntax of the these statements. for both buttons is identical. The first argument is the key of the node, under which you want to place the new one. The second argument indicates the relationship between the node specified in the first argument and the new node. Since we want the color names to appear under the Colors node, their relationship is twoChild the new nodes are children of the existing node). Because we aren’t going to place any nodes under the color names, there’s no reason for the color names to have a key, so the third argument is omitted. The fourth argument is the text of the node, and the remaining arguments are also omitted.
To add child nodes under the Shapes node, use the following statements. This is the Shapes button’s Click event handler.
Add a third Command button on the Form, name it Add Shapes, and insert these lines in its Click event handler. If you run the project and dick the three buttons in the order in which they appear on the Form, the TreeView control will be populated with Colors’ and Shapes. If you double-dick the items Colors and Shapes, the TreeView control’s contents will be expanded and the control will look like the one shown to the left.
You’ll notice that the child nodes have tree lines in front of them, but their parents don’t have the plus sign, which indicates that a node has child nodes and can be expanded. It’s always a good idea to display a plus symbol in front of the nodes that have child nodes. Let’s revise the code we’ve written so far, to display all the nodes under a header called Items.
First, we must add the header, a node that will contain all other nodes as children:
TreeView1.Nodes.Add , , ‘ITEM’ , ‘Items·’
As you probably expected, there is no parent node or relationship for this node, just a key and the node’s text.
Then, we must revise the statements that add the first-level items. They now belong to the Items node, so their first argument (Relative) must be the key of the parent node and their second argument (Relationship) must be twoChild. Revise the Add Categories button’s Click event handler as follows:
The remaining statements need to be modified. They add child nodes to existing nodes. By making the Colors node a child of the Items node, all the child nodes for Colors will also follow. The same is true for the Shapes node .
.Since the Treeview control’s nodes aren’t expanded by default, you can expand the Item node from within your code with the following statement:
TreeViewl. Nodes. Item(‘ ITEM’). Expanded = True
As I mentioned already, the items of the Nodes collection can be accessed by an Index value or their key. The last statement expands the top node in the collection, but none of its child nodes. To expand all the nodes that have child nodes, you must scan the items of the Nodes collection and set their Expanded property to True, You’ll . learn how to scan the nodes of a TreeView control later in this chapter .
Place a new Command button on the Form, name it Populate, and insert the following statements in its Click event handler:
When the Populate button is clicked, it will produce the output shown on the left. U you open the lViewl project and examine its code, you’ll see that it contains additional statements that enable various Command buttons, Most of the buttons on the Form are initially disabled to prevent user errors. For example, the Add Colors and Add Shapes buttons are initially disabled because you can’t add child nodes before their parent nodes exist. You’ll also see the statement TfeeViewl. Nodes.(year in several buttons’ handlers. This statement clears the contents of the TreeView control.so that the program won’t keep adding the same items every time its buttons are clicked.
In the examples of the next section, we’ll use only the twoChild value for the Relationship argument of the Add method. The possible values of the Relationship argument are shown in Table:
Assigning Images to Nodes
The last two arguments of the Add method, Image and Selectedlmage, are the two pictures that will appear in front of the node. The Image picture will appear by default in front of the node and the Selectedlmage picture will replace the default picture when the node is selected, These two arguments are Picture objects; they
can be the Picture property of a PictureBox control or they can be loaded from a file at runtime with the LoadPicture function. For example, to assign the bitmap stored in the C:\CONTROLS\IMAGES\SHAPES1.BMP file to a new node, use a statement like the following one:
TreeViewl.Nodes.Add ‘SHAPE’, tvwChild, , ‘Square’, _ LoadPictureC’c:\controls\images\shapesl.bmp’)
The simplest method, however, is to set up an ImageList control, populate it with the images that you’ll later assign to the nodes of the TreeView control, and use those images. To do this, add an ImageList control to the Form, add to it all the images (usually icons) you want to use with the TreeView control, and then assign the ImageList control to the Imagel.ist property of the TreeView control.
The following statements set up an ImageList control with three small images for the Globe project (discussed in the next section) and assign it to the TreeViewl control’s ImageList property. The code assumes that the three images are stored in the same folder as the project that uses them:
To add three new nodes and assign the three bitmaps to them, use the following statements:
The numbers correspond to the indices of the bitmaps in the ImageList control. You can also use the keys of the various images if you assign keys when you add the images to the ImageList control.
Sorting Items
The last property demonstrated by the TViewl project is the Sorted property, which sorts the child nodes of the node to which it’s applied. When you set the Sorted property of a node to True, every child node you attach to it will be inserted automatically in alphabetical order, The Sorted property, however, won’t affect the other nodes.on the same level or a child node’s children. In other words, a child node doesn’t inherit its parent’s Sorted property setting. So each time you add a node that you anticipate will have its own child nodes, set its Sorted property to True.
The Populate Sorted button’s code is shown in Code . This handler Populates the control with the same data as the Populate button, but it also sets to true the Sorted property of all nodes that have child nodes. Nonce that the Sorted property of the node Solids doesn’t need to be set because this node doesn’t have any children. The same is true for the end nodes.
