ListView controls in .NET

Overview

Thank you to those who sent emails and commented on the previous article. It's always nice to know the information being presented is useful.

This is the second half of our article on TreeView and ListView controls in .NET. The previous article dealt with the creation of the main window and the TreeView control. In this article we will expand the coding to utilize a ListView control. What we will be doing is presenting a directory tree in the left side of our page using the TreeView control. When we select a directory we want the right side of the screen to display the contents of that directory using the ListView control we will add now.

To refresh we left screen with the following display



Let's begin updating the existing project with our ListView control.

ListView Control

We begin by dragging a ListView control from the Toolbox onto the right side of our form and sizing it appropriately. Your screen should look similar to the following:



I used the default properties of the control. That's the last control we have to add to our form. The remaining pieces of the puzzle are all code based.

The NodeMouseClick Event

When a node in the TreeView is clicked it generates an event which starts the process of displaying the contents in our ListView control. The event is called the NodeMouseClick and we need to build a method to handle that event. To begin with, select the TreeView, right mouse click and select Properties. If you are working with the default installation of Visual Studio the properties window will be displayed in the lower right corner of Visual Studio. We however aren't interested in modifying the properties of the TreeView, we want to create an event. Select the Events tab and the display will be updated to show the events associated with a TreeView control as below. Using the slider locate the 'NodeMouseClick' event. Notice there is no entry for the method name.



Double click on the 'NodeMouseClick' event and a new method will be created



I updated the method signature by inserting a return after the word 'object' to make it easier to read in the article.

We'll begin by creating some Working-Storage variables. Our completed Working-Storage Section looks like



The variables are defined as

Variable	Definition
NewSelected type "TreeNode"	The tree node being selected
nodeDirInfo type "DirectoryInfo"	The directory information of the node being selected
nodeDirs type "DirectoryInfo" occurs any	An array of sub-directories present in the selected node
subItems type "ListViewItem+ListViewSubItems" occurs any	An array of the items contained in the sub-directories found in the node selected
item type "ListViewItem"	The item being explored
dir type "DirectoryInfo"	Directory information for the folder being parsed
fil type "FileInfo"	The file information for the item being parsed

I agree, it does seem a bit confusing right now. Bear with me and hopefully once we present the code and go through it this will become much clearer.

Coding the NodeMouseClick method

If you've been reading my articles for any period of time you know I like to present the code and then discuss it. For this article I'd like to change that format. I've embedded comments in the code explaining what each line is doing. The comments are above the line they are describing. I found it easier to understand and follow if I had the comments right next to the code instead of on a separate document. Besides, if you're like me you work primarily in Visual Studio, not Word, anyway.

To maintain continuity of the article though the method logic along with inline comments are presented here:



After you have added the code and built the solution give a try and see what happens. If you've been following the article step-by-step your display should look similar to mine.



Not very attractive or informative is it? If you remember when we created the form and added the controls we accepted the default values. We now need to go back to the ListView control and 'clean it up'.

Cleaning up the Display

There are a number of properties we'll need to update. Begin by switching back to 'Design View' for the form. Next select the ListView control, (right side of the form) and right-click selecting 'Properties' from the context menu. Our first property will be 'View'. Locate it and using the drop down list provided, select 'Details'.



Next we need to add some columns to our ListView. Locate the 'Columns' property. Notice this is a 'Collection' of items. If you click the selection box the following window will be presented:



There are currently no columns in the collection so we'll need to add some. We'll be adding three columns, the name, type and date last modified. We'll do one together and then you can complete the other two. Let's start.

Adding Columns to a ListView

If you click the 'Add' button the screen is updated as shown



Update the (Name) property to be 'colName' and the Text property to be 'Name'. Click the 'Add' button and add columns for the Type and Date Last Modified. Their properties should be

Member	(Name)	Text	Width
colType	colTyp	e Type	60
colLastModifie	d colLastModified	Last Modfieid	113

When you are done your Collection should look as follows



Click OK, save and rebuild the solution. When you execute it your display should now look similar to the following



There is still some clean-up you could do. Add some icons to the display, make it size-able, maybe auto-size it. Those are mainly utilization issues within Visual Studio and learning how to use the interface. I'll leave you to experiment and refine the solution.

Summary

Presenting information to a user in an efficient, practical manner is essential for any application to be accepted and utilized. This article and the previous one about Tree Views provided the basics on accessing information and presenting it to the user. Utilize these solutions as examples and expand them to suite your needs. If you do expand the solution and make it look nice please share with us. Others are more than likely also looking for how to accomplish what you've already done and may be able to assist you with another project. As always we will give credit where credit is due!

Happy Coding!