Home

The Columns of a List View

 
 

Introduction

One of the characteristics that set the list view apart from the list box is that the former can provide more information about each item of its list. Based on this, each type of item can be equipped with its own list of sub-items. The view would appear as follows:

List View Style: Details

Visually Creating Columns

Before creating the sub-items of a list view, you may need to plan it first to identify the types of information you want to provide. To guide the user with the type of information that each item would display, you can create a column for each type. To support columns, the ListView class is equipped with the Columns property. The Columns property is an object of type ListView.ColumnHeaderCollection. As its name indicates, the Columns property represents a list of columns. Each column is based on the ColumnHeader class.

At design time, to create the columns, access the Properties window for the list view and click the ellipsis button of the Columns field. This would open the ColumnHeader Collection Editor. To create a column, you can click Add. In the right Properties list, you can click Text and type the string that would display on the column header.

Programmatically Creating Columns

To programmatically create a column, you can call the ColumnHeaderCollection.Add() method that is overloaded with two versions. One of the versions of this method uses the following syntax:

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

The first argument of this method is referred to as the column's caption. It is text that would display in the column header. The second argument is a natural number that represents the distance from the left to the right borders of the column. The last argument specifies how the caption of the column would be aligned. The options are the same as those of the text box: Left, Center, or Right. The default value is Left.

Here is an example of creating a column by calling this method:

private void InitializeComponent()
{
        Text = "Countries Statistics";
        Size = new Size(452, 214);

        lvwCountries = new ListView();
        lvwCountries.Location = new Point(12, 12);
        lvwCountries.Width = 420;
        lvwCountries.Height = 160;

        lvwCountries.View = View.Details;
        lvwCountries.Columns.Add("Name", 120, HorizontalAlignment.Left);

        Controls.Add(lvwCountries);
}

This would produce:

As mentioned earlier, a column is in fact an object of type ColumnHeader. This class is equipped with all the necessary characteristics that define a column header:

  • Caption: The Text property holds the string that displays on top of the column
  • Width: This property represents the width of the column
  • Text Alignment: The TextAlign property specifies the horizontal alignment of its string. This property uses a value of type HorizontalAlignment, which is the same as that of the text box
  • Index: Since the columns are stored in a collection, this property allows you to get the index of this column in the collection it belongs to
  • The Parent List View: If you want to know what list view the current column header belongs to, you can access its ColumnHeader.ListView property

Instead of defining a column in the Add() method, you can first create an object based on the ColumnHeader class and then pass it to the following version of the ColumnHeaderCollection.Add() method:

public virtual int Add(ColumnHeader value);

This method takes as argument a ColumnHeader object. Here is an example:

private void InitializeComponent()
{
        Text = "Countries Statistics";
        Size = new Size(452, 214);

        lvwCountries = new ListView();
        lvwCountries.Location = new Point(12, 12);
        lvwCountries.Width = 420;
        lvwCountries.Height = 100;

        lvwCountries.View = View.Details;
        lvwCountries.Columns.Add("Name", 120, HorizontalAlignment.Left);

        ColumnHeader colArea = new ColumnHeader();
        colArea.Text = "Area";
        colArea.Width = 80;
        colArea.TextAlign = HorizontalAlignment.Right;
        lvwCountries.Columns.Add(colArea);

        Controls.Add(lvwCountries);
}

This would produce:

Countries Statistics

Instead of adding one column at a time as we have done above, you can first create an array of ColumnHeader objects and pass it to the ListView.ColumnHeaderCollection.AddRange() method. Its syntax is:

public virtual void AddRange(ColumnHeader values[]);

Here is an example of using it:

private void InitializeComponent()
{
        Text = "Countries Statistics";
        Size = new Size(452, 214);

        lvwCountries = new ListView();
        lvwCountries.Location = new Point(12, 12);
        lvwCountries.Width = 420;
        lvwCountries.Height = 100;

        lvwCountries.View = View.Details;
        lvwCountries.Columns.Add("Name", 120, HorizontalAlignment.Left);

        ColumnHeader colArea = new ColumnHeader();
        colArea.Text = "Area";
        colArea.Width = 80;
        colArea.TextAlign = HorizontalAlignment.Right;
        lvwCountries.Columns.Add(colArea);

        ColumnHeader colPopulation = new ColumnHeader();
        colPopulation.Text = "Population";
        colPopulation.Width = 78;
        colPopulation.TextAlign = HorizontalAlignment.Right;

        ColumnHeader colCapital = new ColumnHeader();
        colCapital.Text = "Capital";
        colCapital.Width = 96;
        colCapital.TextAlign = HorizontalAlignment.Left;

        ColumnHeader colCode = new ColumnHeader();
        colCode.Text = "Code";
        colCode.Width = 40;
        colCode.TextAlign = HorizontalAlignment.Center;

        ColumnHeader[] cols = { colPopulation, colCapital, colCode };
        lvwCountries.Columns.AddRange(cols);

        Controls.Add(lvwCountries);
}

This would produce:

Countries Statistics

Practical LearningPractical Learning: Creating Columns

  1. On the form, click the list view
  2. In the Properties window, click Columns and click its ellipsis button
  3. In the ColumnHeader Collection Editor, click Add
  4. In the columnHeader1 properties list, change the following properties
    (Name): colItemNumber
    Text: Item #
    Width: 70
  5. Click Add again and set the new column as follows:
    (Name): colCategory
    Text: Category
    Width: 70
  6. Click Add again and set the new column as follows:
    (Name): colItemName
    Text: Item Name
    Width: 180
  7. Click Add again and set the new column as follows:
    (Name): colItemSize
    Text: Size
    Width: 80
  8. Click Add again and set the new column as follows:
    (Name): colUnitPrice
    Text: Unit Price
    TextAlign: Right
  9. Click Add again and set the new column as follows:
    (Name): colQuantity
    Text: Qty
    TextAlign: Right
    Width: 40
  10. Click OK
  11. While the list view is still selected in the form, change its View property to Details
      
    Department Store
  12. Execute the application to test it
  13. After viewing the form, close it and return to your programming environment

Column Insertion

If you call the AddRange() method, its list of columns is created at the end of any existing column, unless there was no other column. If you call the Add() method to create a column, the new column is added at the end of the existing columns, unless it is the first column. If you don't want the new column to simply be created at the end of the other column(s), if any, you can call the ColumnHeaderCollection.Insert() method. It is overloaded with two versions and their syntaxes are:

public void Insert(int index, ColumnHeader value);
public void Insert(int index, string str, int width,
		   HorizontalAlignment textAlign);

In both versions, the first argument specifies the index where the new column will be created inside the Columns collection.

Practical Learning Practical Learning: Using a List View

  1. To start a new project, on the main menu, click File -> New -> Project...
  2. In the Templates list, click Windows Application and set the Name to AltairRealtors2
  3. Design the form as follows:
     
    Solas Property Rental
    Control Text Name Other Properties
    Label Label Altair Realtors - Properties Listing   BorderStyle: FixedSingle
    Font: Times New Roman, 21.75pt, style=Bold
    ListView ListView   lvwProperties  
    Columns (Name) Text TextAlign Width
    colPropertyNumber Prop #   50
    colPropertyType Property Type   78
    colAddress Address   130
    colCity City   80
    colState State   40
    colZIPCode ZIP Code Center 58
    colBedrooms Beds Right 40
    colBathrooms Baths Right 40
    colMarketValue Market Value Right 75
    Button Button New Property... btnNewProperty  
    Button Button Close btnClose  
  4. Save the form

The Number of Columns of a List View

As reviewed above, the columns of a list view are stored in a collection. To know the number of columns of a list view, you can check its ColumnHeaderCollection.Count property.

Locating Columns

To find out if a certain column is part of a list view, you can call the ColumnHeaderCollection.Contains() method. Its syntax is:

public bool Contains(ColumnHeader value);

This method takes as argument a defined ColumnHeader object and scans the list of columns looking for it. If it finds it, it returns true. If it doesn't find a column that matches this object, it returns false. As opposed to looking for a column, you can perform two searches in one by calling the ColumnHeaderCollection.IndexOf() method. Its syntax is:

public int IndexOf(ColumnHeader value);

This method looks for the value ColumnHeader. If it finds it, it returns the column's index from the collection. If the method doesn't find it, it returns -1.

Deleting Columns

If you don't need a column any more, you can delete it. In the same way, you can delete all columns of a list view. To delete a ColumnHeader object, you can call the ColumnHeaderCollection.Remove() method. Its syntax is:

public virtual void Remove(ColumnHeader column);

To delete a column based on its position in the collection, you can call the ColumnHeaderCollection.RemoveAt() method. Its syntax is:

public virtual void RemoveAt(int index);

To delete all columns of a list view, you can call the ListView.ColumnHeaderCollection.Clear() method. Its syntax is:

public virtual void Clear();

 

 

Previous Copyright © 2007 FunctionX, Inc. Next