Multi-Column ListView Controls

Developing a desktop application after years of web application development left me a bit stunned. Outputting HTML, thinking in terms of one screen, partial headers/footers, etc. changes the way you think. So much so, that I found myself stunned at how difficult it is to create a simple, multi-column list in a desktop application, like this one:

A ListView control with multiple columns.

First, I tried out a CheckListBox, since I needed check-box ability. Nope, multiple columns here just means “draw a bunch of check-box items in multiple columns.” ListBox, same thing.

Finally, I looked up the ListView. It contains the right functionality–display an item across multiple columns, and not display multiple columns of an item; albeit that it requires a bit of configuration to get it to work the way I’ve depicted above.

To create something similar:

  1. Create your ListView. Obviously.
  2. Change the View property to Details. By default, the View property has the value of LargeIcon. Not what you want.
  3. Add Columns. Edit the Columns property, and add a couple of items. The Text attribute is what you see in the UI.
  4. Verify in the UI. Looking at the designer view of your form, you should see the columns, the same way they’re depicted in the screenshot. If not, check that you performed all the steps outlined above.

(By the way, all of these steps can be done via code at runtime, so don’t sweat it if you need dynamic columns or some such craziness.)

And the final piece of the puzzle — adding items through code. How do you specify what information goes in which column?

As nice as it would be to just throw in some objects, and have .NET use reflection to match properties to column names, that wouldn’t be much fun, now would it? So instead, you need to iterate over your data and stuff it into a ListViewItem.

Let’s say you had the case depicted above: two columns (Name and Status), and you have an object that has, surprise surprise, a Name and Status attribute.

You would write code like:

IList yourObjects = ...
foreach (Something s in yourObjects) {
this.uxListView.Items.Add(new ListViewItem(new string[] {s.Name, s.Status}));

What is this madness? yourObjects is your list; and uxListView is the list-view control. You can specify ListViewItems, and pass in a string array to map to columns.

What if you ditch the new string array and just pass in the two strings? Only the first attribute will show up!

And of course, you can always scale this by adding more columns, and more items in your array of strings for the ListViewItem.

Easy … but not as easy as outputting some HTML!

About Ashiq Alibhai, PMP

Ashiq has been coding C# since 2005. A desktop, web, and RIA application developer, he's touched ASP.NET MVC, ActiveRecord, Silverlight, NUnit, and all kinds of exciting .NET technologies. He started C# City in order to accelerate his .NET learning.
This entry was posted in Core .NET, Wndows Forms and tagged , , , . Bookmark the permalink.

3 Responses to Multi-Column ListView Controls

  1. Tim says:

    This was very helpful, thank you.

  2. Ashiq Alibhai, PMP says:

    @Tim glad it helped!

Leave a Reply

Your email address will not be published. Required fields are marked *