Beginning Visual Basic 2005 Express Edition - From Novice To Professional (2006)

280	C H A P T E R 1 0 ■ L I S T S

A combo box can have one of three styles and ways of working through it. You set this up by using the control’s DropDownStyle property, which can be Simple, DropDown, or

DropDownList.

With the Simple style set, the list is permanently on display along with the text box (see Figure 10-11).

Figure 10-11. With the Simple style set, the combo box permanently displays its list.

The user is free to key anything into the text box or to select an item from the list. Selecting something in the list puts it up into the text box.

With the DropDownList style set, the combo box takes on a more traditional look and feel, as you can see in Figure 10-12.

Figure 10-12. The DropDownList style forces the user to choose an entry from the list.

C H A P T E R 1 0 ■ L I S T S

281

In this style, users are not free to type whatever they want into the text box. Instead, they have to click the button and choose something from the list, or type in something that already exists in the list. Doing this causes the item to be selected and once again displayed in the text box part of the control.

The final style, DropDown, looks the same as DropDownList (see Figure 10-13).

Figure 10-13. The DropDown style of the combo looks the same as a drop-down list but allows the user to enter free text.

With the DropDown style, users are able to enter whatever they want into the text box, or to click the button and choose something from the list.

With all three styles, one thing remains common. Whatever the user selects or manually enters, it gets displayed in the text box portion of the control. So, to find out what the user did, examine ComboBox.Text, just as if you were working with a standard text box. Of course, you can still use SelectedItem and SelectedIndex to figure out whether anything was selected from the list part of the control and to determine exactly what it was that was selected.

The TreeView Control

The TreeView control is a unique list control, in that it displays a hierarchical view of data. If you’ve used the Folders feature in Outlook, or look at the list of folders on your hard disk in Windows Explorer, you’ll know exactly what I mean. Figure 10-14 shows a TreeView control.

282	C H A P T E R 1 0 ■ L I S T S

Figure 10-14. The TreeView control is used to display hierarchical lists of information.

The TreeView holds a Nodes collection, each item in which is a TreeNode object. This TreeNode object also has a Nodes collection, which is again a collection of TreeNode objects. Think of it as a Russian doll, where inside each doll is a smaller one that contains even smaller ones.

Despite the potential for a horrendous amount of complexity, working with nodes is very simple. You just call Nodes.Add() and pass in the new object you wish to store in the node. Nodes.Add() then returns to you a TreeNode object so that you can, if you so desire, add child nodes to the one you just created.

C H A P T E R 1 0 ■ L I S T S

283

Try It Out: Adding Nodes to a Tree View

Let’s write a simple program to store odd and even numbers in a tree view.

Start up a new WinForms project, and drop a TreeView and a Button control onto the form as in Figure 10-15.

Figure 10-15. Drop a Button and a TreeView control onto your application’s main form.

Set up the Text property of the button as shown in the screen shot, but don’t worry about setting the names of the controls; you have only one of each, so your button is called Button1, and the tree view is called

TreeView1.

When the user clicks the Load button, you’re going to count from 1 to 500 and store even numbers in an Even Numbers node, and odd numbers in an Odd Numbers node. So double-click the button to drop into the code editor.

284	C H A P T E R 1 0 ■ L I S T S

The first thing you need to do is clear out the TreeView. This prevents a problem of the user continuing to click the Load button and in doing so adding a bunch of duplicate nodes into the control:

Private Sub Button1_Click(ByVal sender As System.Object, _

ByVal e As System.EventArgs) Handles Button1.Click

TreeView1.Nodes.Clear()

End Sub

Next, you need to create nodes to hold the odd and even numbers:

Private Sub Button1_Click(ByVal sender As System.Object, _

ByVal e As System.EventArgs) Handles Button1.Click

TreeView1.Nodes.Clear()

Dim oddNumbers As TreeNode = TreeView1.Nodes.Add("Odd numbers") Dim evenNumbers As TreeNode = TreeView1.Nodes.Add("Even numbers")

End Sub

Notice that the Nodes.Add() method returns a TreeNode object that you need to store in order to add child nodes to the two parent nodes.

All that remains is to loop through the numbers from 1 to 500 and add them into the appropriate

TreeNode.Nodes collection:

Private Sub Button1_Click(ByVal sender As System.Object, _

ByVal e As System.EventArgs) Handles Button1.Click

TreeView1.Nodes.Clear()

Dim oddNumbers As TreeNode = TreeView1.Nodes.Add("Odd numbers")

Dim evenNumbers As TreeNode = TreeView1.Nodes.Add("Even numbers")

For i As Integer = 1 To 500

If i Mod 2 = 0 Then

evenNumbers.Nodes.Add(i.ToString())

Else

oddNumbers.Nodes.Add(i.ToString())

End If

Next

End Sub

C H A P T E R 1 0 ■ L I S T S

285

Here you’re just using the Visual Basic Mod operator to work out the remainder of each number divided by 2. If the remainder is 0, you have an even number; otherwise, it’s odd.

Run the program now and you’ll see the tree view populate whenever the Load button is pressed (see Figure 10-16).

Figure 10-16. Clicking the Load button runs your code to populate the control with nodes.

Changing the Visual Appearance of the Tree

The TreeView control provides a lot of properties to let you completely change how it looks. At the simplest level, the three properties—ShowLines, ShowPlusMinus, and ShowRootLines—control the actual view of the list itself. They are all Boolean properties, and setting them all to False results in a tree view that looks like Figure 10-17.

286	C H A P T E R 1 0 ■ L I S T S

Figure 10-17. The ShowLines, ShowPlusMinus, and ShowRootLines properties all govern the display of the tree itself.

More usefully, though, you can change the actual view of the nodes by associating graphics with them. There is another control in the Toolbox called the ImageList. It’s a container for graphics. You simply add graphics to it and then link controls on the form, such as the TreeView, to it. From that point on, controls that support the image list can grab images from it. Let’s take a look.

C H A P T E R 1 0 ■ L I S T S

287

Try It Out: Adding Images to the Tree View

Load up the tree view project you were working with earlier, and double-click the ImageList control in the Toolbox to drop it onto the form. The ImageList control is a nonvisual control, so it appears underneath the form (see Figure 10-18).

Figure 10-18. Drop an ImageList control onto the form. Because it’s a nonvisual control, it appears underneath the form in the designer.

288	C H A P T E R 1 0 ■ L I S T S

Click on the smart tag attached to the control and a menu appears, where you can specify the number of colors the images are to use and the size of the images (Figure 10-19).

Figure 10-19. The smart tag on the ImageList control lets you specify the size and color depth of the images.

Select 16, 16 and Depth32Bit and then click Choose Images. The Images Collection Editor dialog will appear, as in Figure 10-20.

Figure 10-20. The Images Collection Editor lets you add images to the ImageList control.

Click the Add button and find an image on your hard disk to add to the list. Visual Basic 2005 Express ships with something called an Image Library. You can find it in the location where you installed Visual Basic 2005 Express, typically C:\Program Files\_Microsoft Visual Studio 8\Common7\ VS2005ImageLibrary. Go ahead and add two images to the control, and then close the dialog.

Now that you have some images in the ImageList control, the next thing to do is associate the tree view with the image list. Click on the tree view in the designer and then find the ImageList property in the Properties window. Click in the edit area for the property and you’ll see a drop-down list appear, listing all the image lists on the form (one in this case). Go ahead and select it.

C H A P T E R 1 0 ■ L I S T S

289

The final step is to change the code that adds nodes into the tree view so that it references images to use for the nodes.

Double-click the Load button to drop back into its click event handler.

Previously, when you added a node to the Nodes collections, you just specified some text to display. The Add() method actually has a number of different overloads, a couple of which let you specify an image from the ImageList to use for the node.

Change the code, like this:

Private Sub Button1_Click(ByVal sender As System.Object, _

ByVal e As System.EventArgs) Handles Button1.Click

TreeView1.Nodes.Clear()

Dim oddNumbers As TreeNode = _

TreeView1.Nodes.Add("Odd", "Odd numbers", 0, 1)

Dim evenNumbers As TreeNode = _

TreeView1.Nodes.Add("Even", "Even numbers", 0, 1)

For i As Integer = 1 To 500

If i Mod 2 = 0 Then

evenNumbers.Nodes.Add(i.ToString())

Else

oddNumbers.Nodes.Add(i.ToString())

End If

Next

End Sub

Instead of just passing in one string, which is the text to display in the tree view, you’re now passing in five parameters. The first is called Key. It provides a way for us to search node collections by using the Find() method, like this:

Dim matchingNodes() As TreeNode = _

TreeView1.Nodes.Find("Even", True)

This would give you an array of all the nodes called Even. If you want to specify an image to add to a node, you have to specify a key, even if you don’t intend to use it.

The second parameter is the same text that you had before, and specifies the string to display in the tree view itself. The remaining two parameters are indexes into the image list. What you are saying here is that normally this node should display the first image in the image list (number 0). If the node gets selected, though, use the second image (number 1).

After you’ve made the code changes, run the program to see the difference (see Figure 10-21).