Building Enhanced Lists Using the List View

The List View control is like a list box on steroidsand then some. The List View can be used to create simple lists, multicolumn grids, and icon trays. The right pane in Explorer is a List View. (You may not know it, but you can change the appearance of the List View in Explorer by right-clicking it and using the View submenu of the context menu that appears.) The primary options you have available for changing the appearance of your List Views are Large Icons, Small Icons, List, and Details. These correspond exactly to the display options available for a List View by way of its View property. You're going to create a List View with a few items on it and experiment with the different viewsincluding showing a picture for the items.

I can only scratch the surface of this great control here. After you've learned the basics in this hour , I highly recommend that you spend some time with the control, the help text, and whatever additional material you can find. I use the List View all the time; it's a very powerful tool to have in your arsenal because displaying lists is so common.

Add a List View to your form now by double-clicking the ListView item in the toolbox. Set the properties of the List View as follows :

Property	Value
`Name`	`lvwMyListView`
`Location`	`8,8`
`Size`	`275,97`
`SmallImageList`	`imgMyImages`
`View`	`Details`

As you can see, you can attach an Image List to a control via the Properties window (or with code). Not all controls support the Image List, but those that do make it as simple as setting a property to link to an Image List. The List View actually allows linking to two Image Lists: one for large icons (32x32 pixels) and one for small images. In this example, you're going to use only small pictures. If you wanted to use the large format, you could hook up a second Image List containing larger images to the List View's LargeImageList control.

Creating Columns

When you changed the View property to Details, an empty header was placed at the top of the control. The contents of this header are determined by the columns defined in the Columns collection.

Select the Columns property on the Properties window and click the small button that appears. C# then displays the ColumnHeader Collection Editor window. Click Add to create a new header and change its Text to Name and its Width to 120. Click Add once more to create a second column and change its Text to State. Click OK to save your column settings and close the window. Your list view should now have two named columns (see Figure 8.5).

Figure 8.5. List Views enable you to present multicolumn lists.

graphics/08fig05.jpg

Adding List Items

You're now going to add two items to the list view.

Click the Items property in the Properties window and then click the small button that appears, which displays the ListViewItem Collection Editor dialog box.
Click Add to create a new item, and change the item's Text to James Foxall.
Next, open the drop-down list for the ImageIndex property. Notice how the list contains the picture in the linked Image List control (see Figure 8.6). Select the image.

Figure 8.6. Pictures from a linked Image List are readily available to the control.
The Text property of an item determines the text displayed for the item in the List View. If the View property is set to Details and multiple columns have been defined, the value of the Text property appears in the first column. Subsequent column values are determined by the SubItems collection.
Click the SubItems property and then click the small button that appears, which displays the ListViewSubItem Collection Editor. The item that appears in the list refers to the text of the item itself, which you don't want to change.
Click Add to create a new sub item and change its text to Nebraska.
Click OK to return to the ListViewItem Collection Editor.
Click the Add button to create another item. This time, change the Text property to your name and use the techniques you just learned to add a sub item. For the Text property of the sub item, enter your state of residence.
When you're finished, click OK to close the ListViewItem Collection Editor. Your List View should now contain two list items (see Figure 8.7).

Figure 8.7. List views offer much more functionality than a standard list box.
Next, experiment with the View property of the List View control to see how the various settings affect the appearance of the control. The Large Icons setting doesn't display an icon, because you didn't link an Image List control to the LargeImageList property of the List View.
Press F5 to run the project and try selecting your name by clicking your state. You can't. The default behavior of the List View is only to consider the clicking of the first column as selecting an item.
Stop the project and change the FullRowSelect property to True; then run the project once more.
Click your state again, and this time your name becomes selected (actually, the entire row becomes selected). Personally, I prefer to set up all my List Views with FullRowSelect set to True, but this is just a personal preference. Stop the project now and save your work.

Manipulating a List View Using Code

You've just learned the basics of working with a List View control. Although you performed all the steps in Design view, you'll probably manipulate your list items using code because you won't necessarily know ahead of time what to display in the list, so I'll show you how.

Adding List Items Using Code

Adding an item using code is very simpleif the item you are adding is simple. To add an item to your list view, you use the Add method of the Items collection, like this:

 lstMyListView.Items.Add("Mark Haro");

If the item is to have a picture, you can specify the index of the picture as a second parameter, like this:

 lstMyListView.Items.Add("Luis Haro",0);

If the item has sub items, things get more complicated. The Add method allows you only to specify the text and image index. To access the additional properties of a list item, you need to get a reference to the item in code. Remember that new items have only one sub item; you have to create additional items. The Add method of the Items collection returns a reference to the newly added item. Knowing this, you can create a new variable to hold a reference to the item, create the item, and manipulate anything you choose to about the item using the variable (see Hour 12, "Using Constants, Data Types, Variables, and Arrays," for information on using variables ). The following code creates a new item and appends a sub item to its SubItems collection:

 ListViewItem objListItem; objListItem = lstMyListView.Items.Add("Yvette Webster", 0); objListItem.SubItems.Add("Tennessee");

Determining the Selected Item in Code

The List View control has a collection that contains a reference to each selected item in the control: the SelectedItems collection. If the MultiSelect property of the List View is set to True, as it is by default, the user can select multiple items by holding down the Ctrl or Shift keys when clicking items. This is why the List View supports a SelectedItems collection rather than a SelectedItem property. To gather information about a selected item, you refer to it by its index. For example, to print the text of the first selected item (or the only selected item if just one is selected), you could use code like this:

 if (lstMyListView.SelectedItems.Count > 0) System.Diagnostics.Debug.WriteLine(lstMyListView.SelectedItems[0].Text);

The reason you check the Count property of the SelectedItems collection is that if no items are selected, you would cause a runtime error by attempting to reference element 0 in the SelectedItems collection.

Removing List Items Using Code

To remove a list item, use the Remove method of the Items collection. The Remove Item method accepts and expects a reference to a list item. For instance, to remove the currently selected item, you could use a statement such as

 lstMyListView.Items.Remove(lstMyListView.SelectedItems[0]);

 lstMyListView.Items.RemoveAt(0);

Again, you'd want to make sure an item is actually selected before using this statement.

Removing All List Items

If you're filling a List View using code, you'll probably want to clear the contents of the List View first. That way, if the code to fill the List View is called a second time, you won't create duplicate entries. To clear the contents of a List View, use the Clear method of the Items collection, like this:

 lstMyListView.Items.Clear();

The List View control is an amazingly versatile tool. As a matter of fact, I rarely use the standard list box now, preferring to use the List View because of its added functionality, such as displaying an image for an item. I've barely scratched the surface here, but you now know enough to begin using this awesome tool in your own development.

Top