Working with ListView

by Budi Kurniawan co-author of VB.NET Core Classes in a Nutshell
10/28/2002

Anyone using the Windows operating system must be familiar with the Windows Explorer program, the built-in application used for browsing the file system. Depending on which version your Windows is, the Windows Explorer has four or five views. The four main views are List, Details, SmallIcon and LargeIcon. Windows Explorer is mentioned here because the easiest way to start learning about ListView is to take a close look at your Windows Explorer, especially the four available views. In this article, we first discuss the System.Windows.Forms.ListView and System.Windows.Forms.ListViewItem classes and present two examples of ListView in Details and LargeIcon views. Later, we write a small program that collects the files and directories in the current directory and displays it in a ListView control.

Related Reading VB.NET Core Classes in a Nutshell By Budi Kurniawan, Ted Neward

The ListView Class

The ListView class resides in the System.Windows.Forms namespace. It is a Windows control and is derived from the System.Windows.Forms.Control class. It has only one constructor, which is a no-argument constructor. You can add a ListView control to a Windows form just like you would other controls. Here is how you add a ListView control called listView to a form:

ListView listView = new ListView();
this.Controls.Add(listView);

The view of a ListView control is determined by the value of its View property. This property can take one of the members of the System.Windows.Forms.View enumeration, which are as follows: List. Each item appears as a small icon with a label to its right. Items are arranged in columns with no column headers. This is the simplest view of all. Details. Each item appears on a separate line with further information about each item arranged in columns. The leftmost column contains a small icon and label, and subsequent columns contain subitems as specified by the application. A column displays a header, which can display a caption for the column. SmallIcon. Each item appears as a small icon with a label to its right. LargeIcon. Each item appears as a full-sized icon with a label below it.

The default value for the View property is View.LargeIcon. The LargeImageList property is assigned an ImageList object containing a collection of images that will be displayed with each item in the LargeIcon view. The SmallImageList property is similar to the LargeImageList, but its images are used for the SmallIcon view.

For these two properties to work, you must assign an item's ImageIndex property with an index position of the image in the SmallImageList or LargeImageList properties. Another important property, CheckBoxes, takes a boolean indicating whether or not a check box appears next to the ListView control. By default, the value of this property is false. If it is set to true, you can use the CheckedIndices property to obtain the indices of the checked items. Alternatively, the CheckedItems property is provided to get all of the checked items.

If the CheckBoxes property is set to true, you can replace the check boxes with your own images. You should add two images to an ImageList object, and then assign this ImageList object to the StateImageList property of your ListView control. The image at index position 0 is displayed as an unchecked item and the image at index position 1 as a checked item.

For the Details view, you can add columns with headers using the Add method of the ListView's ColumnHeaderCollection, represented by the Columns property. For example, the following adds four columns to the ListView control called listView:

    listView.Columns.Add("Name", 
                         -2, 
                         HorizontalAlignment.Left);
    listView.Columns.Add("Size", 
                         -2, 
                         HorizontalAlignment.Right);
    listView.Columns.Add("Type", 
                         -2, 
                         HorizontalAlignment.Left);
    listView.Columns.Add("Modified", 
                         -2, 
                         HorizontalAlignment.Left);

There are two overloads of the Add method, as follows:

public virtual int Add( ColumnHeader value );
public virtual ColumnHeader Add( 
  string str, 
  int width, 
  HorizontalAlignment textAlign
);

In the second overload, width is the initial width of the column header. If you assign -1 to this argument, the column header will be sized automatically to the largest sub-item text in the column. Assign -2, and the column header will be sized to the text size of the column header.

The textAlign argument in the second overload can have one of the members of the System.Windows.Forms.HorizontalAlignment enumeration: Center, Left, or Right. Each item is added to the ListView control using the Add or AddRange method of the ListView's Items collection.

The ListViewItem Class

The ListViewItem class represents an item in a ListView control. This class has several constructors that allow you to pass no argument, the text for the item, subitems, and image index. If you construct a ListViewItem object without passing the needed subitems, you can at a later stage add subitems using the Add method of the ListViewItem.ListViewSubItemCollection class. The ListViewSubItemCollection of a ListViewItem object is represented by the SubItems property. For example, the following code adds a number of subitems to a ListViewItem object.

    ListViewItem item = new ListViewItem("Item 1");
    item.SubItems.Add("SubItem 1");
    item.SubItems.Add("SubItem 2");

Using the Details View

The following example presents a ListView control used to display a collection of three items. Each item represents an author and has two subitems (the title and the book price). The code is given in Listing 1 and the result is depicted in Figure 1.

Listing 1: A ListView in the Details view

using System;
using System.Windows.Forms;
using System.Drawing;

public class ListView1 : Form {
  ListView listView = new ListView();

  public ListView1() {
    listView.Dock = DockStyle.Fill;
    PopulateListView();
    this.Controls.Add(listView);
    this.ClientSize = new Size(400, 200);
  }


  private void PopulateListView() {
    // Set the view to show details.
    listView.View = View.Details;
 
    // Add columns
    listView.Columns.Add("Author", 
                         -2, 
                         HorizontalAlignment.Center);
    listView.Columns.Add("Title", 
                         -2, 
                         HorizontalAlignment.Left);
    listView.Columns.Add("Price", 
                         -2, 
                         HorizontalAlignment.Left);

    // Add items
    ListViewItem item1 = new ListViewItem("Steve Martin");
    item1.SubItems.Add("Programming .NET");
    item1.SubItems.Add("39.95");

    ListViewItem item2 = new ListViewItem("Irene Suzuki");
    item2.SubItems.Add("VB.NET Core Studies");
    item2.SubItems.Add("69.95");

    ListViewItem item3 = new ListViewItem("Ricky Ericsson");
    item3.SubItems.Add("Passing Your .NET Exams");
    item3.SubItems.Add("19.95");

    // Add the items to the ListView.
    listView.Items.AddRange(
                            new ListViewItem[] {item1, 
                                                item2, 
                                                item3}
                            );
  }

  public static void Main() {
    ListView1 form = new ListView1();
    Application.Run(form);
  }
}

Figure 1: The Details view of the ListView control

Pages: 1, 2

Next Page