Click here to Skip to main content
14,177,621 members
Click here to Skip to main content
Add your own
alternative version


258 bookmarked
Posted 8 Feb 2006

Extended ListView

, 13 Jun 2006
Rate this:
Please Sign up or sign in to vote.
An extended ListView control that can show multiple images on subitems, lets the user edit subitems with user-defined controls (also image-subitems), contains boolean subitems, and can sort columns by date, number, string, and image.

Sample Image - EXListView.gif


There are many examples here on The Code Project that enhance the functionality of the ListView. I was looking for a way to display and edit multiple images on subitems and be able to sort the ListView by date, number, string, and images, but I wasn't able to find one that could do that. The subitems also had to be editable - either by a textbox, or by a user defined control. Finally, I wanted to be able to add controls to the subitems and provide some kind of "boolean" columns. The subitems that are in such a boolean column will be able to show two values - true or false - that can be represented by two images. If you set the Editable property to true, the user can click such a subitem and the value switches.


Previously, you had to use the Win32 API to accomplish the above. Now, with version 2.0 of the .NET framework, this can be much easily done with the concept of ownerdraw. If the OwnerDraw property of a ListView is set to false, you can do all of the drawing of the ListView yourself. In this EXListView class, I use ownerdraw extensively. Although using the Win32 API is faster than using ownerdraw from the .NET framework, this ListView is still fast, even with 1000 items with subitems that contain multiple images.

Using the code

The code accompanying this article is the EXListView class, the EXComboBox class, and a simple form that uses these in a form. I added an executable, but you can easily compile it yourself with the command csc /t:winexe /r:System.Windows.Forms.dll EXListView.cs EXComboBox.cs MyForms.cs - the compiler csc.exe can be found on Windows XP in C:\WINDOWS\Microsoft.NET\Framework\v2.0.50727\.

Defining an instance and adding columns

If you have created an instance of the EXListView class (for example: EXListView exlstv = new EXListView()), you can begin adding columns. There are three different types of columns: EXColumnHeader, EXEditableColumnHeader (whose subitems can be edited by a default TextBox or a user defined control), and the EXBoolColumnHeader (whose subitems can only show true or false and can optionally be edited).

For example, to get a column header that can be edited by a default TextBox, you do:

EXEditableColumnHeader editcol = 
                  new EXEditableColumnHeader("Movie");

If you want to specify a control by which the subitems can be edited, you do:

// define a control to edit the subitems of this column
ComboBox cmbx = new ComboBox();
cmbx.Items.AddRange(new string[] {"1", "2", "3", "4"});
// define a columnheader whose subitems can be edited
EXEditableColumnHeader editcol = 
     new EXEditableColumnHeader("Position");
// add the combobox to the column
editcol.MyControl = cmbx;

A boolean column:

EXBoolColumnHeader boolcol = new EXBoolColumnHeader("OK");
// if you want the users to be able to edit
// the boolean values, set the Editable property to true
boolcol.Editable = true;
// specify an image for each of the values
boolcol.TrueImage = Image.FromFile("true.png");
boolcol.FalseImage = Image.FromFile("false.png");

Add (sub)items to the EXListView

A regular ListViewItem:

EXListViewItem lstvitem = new EXListViewItem("Pete");

Items and subitems that can show images have a property MyValue that can hold the real textual value of the (sub)item. This can be handy if you don't want to show text, but need some kind of value, for example, to insert into a database.

An item that can show only one image:

EXImageListViewItem imglstvitem = new EXImageListViewItem();
imglstvitem.MyImage = Image.FromFile("Pete.jpg");
imglstvitem.MyValue = "Pete";

An item that can show multiple images:

EXMultipleImagesListViewItem mimglstvitem = 
        new EXMultipleImagesListViewItem();
// define arraylist with all the images
ArrayList images = new ArrayList(new object[] 
mimglstvitem.MyImages = images;
imglstvitem.MyValue = "Pete the man";

The same way, you can add subitems to the EXListView. Please see the EXListView class for more information.

Use the EXComboBox to edit items with images

The source also contains an extended ComboBox class - the EXComboBox class: this is a combobox that can hold images. You can use this combobox to edit (sub)items with images in the EXListView.

// create an EXListView
EXListView lstv = new EXListView();
// craete an EXComboBox
EXComboBox excmbx = new EXComboBox();
excmbx.MyHighlightBrush = Brushes.Goldenrod;
excmbx.ItemHeight = 20;
// add images to the combobox and the values
excmbx.Items.Add(new EXComboBox.EXImageItem(
       Image.FromFile("music.png"), "Music"));
excmbx.Items.Add(new EXComboBox.EXImageItem(
     Image.FromFile("comedy.png"), "Comedy"));
excmbx.Items.Add(new EXComboBox.EXMultipleImagesItem(
       new ArrayList(new object[] 
       "Romantic comedy"));
// add this combobox to the first columnheader
lstv.Columns.Add(new EXEditableColumnHeader("Genre", 
                                       excmbx, 60));

Add and remove images during runtime

If you want to add or remove images during runtime, you can just set the MyImage property to null, or, in the case of a multiple-images (sub)item, use the ArrayList methods, such as Add() and RemoveAt(). Examples:

If you want to remove the second image from an EXMulitpleImagesListViewSubItem (second column) in the third row, you do:

EXMultipleImagesListViewSubItem subitem = 
   as EXMultipleImagesListViewSubItem;

You must invalidate this rectangle yourself.

Adjusting the heights of rows

Because all the drawing is done in the owner-draw events, the SmallImageList property is only used to show the up and down arrows in the column headers and not to show images in the ListViewItem. To adjust the row height, you assign an ImageList and set the Size to the appropriate size. This is a dirty hack, but the only way I could do it. If you can find another way - please let me know.

Adding controls

To add a control to a subitem, create a EXControlListViewSubItem, then create the control, add the EXControlListViewSubItem to the listviewitem, and at last, add the control to the EXControlListViewSubItem with the EXListView method AddControlToSubitem:

EXListViewItem item = new EXListViewItem("Item 1");
EXControlListViewSubItem cs = new EXControlListViewSubItem();
ProgressBar b = new ProgressBar();
b.Minimum = 0;
b.Maximum = 1000;
b.Step = 1;
lstv.AddControlToSubItem(b, cs);

Points of interest

There is, at this point, an irritating bug in the EXListView class: when you move your mouse pointer into the ListView from left to right, the DrawItem event will be fired, but accompanied by the DrawSubItem event. So, the ListViewItem will be repainted, but the subitems will not. If the content of the ListViewItem (represented by the first subitem) is larger than the column, the content falls over the neighboring subitems.


  • Created on 9 February 2006.
  • Updated code and article: now you can edit columns with images as well - 15 February 2006.


This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here


About the Author

Michiel van Eerd
Netherlands Netherlands be continued.

You may also be interested in...

Comments and Discussions

Questionprinting? Pin
mblat7-Jan-07 11:35
membermblat7-Jan-07 11:35 
AnswerRe: printing? Pin
Jason Cz8-Jan-07 10:09
memberJason Cz8-Jan-07 10:09 
GeneralNew AutoResizeColumns Pin
Jason Cz4-Jan-07 8:57
memberJason Cz4-Jan-07 8:57 
QuestionWeirdness after this_ColumnClick [modified] Pin
Jason Cz11-Dec-06 8:21
memberJason Cz11-Dec-06 8:21 
GeneralRe: Weirdness after this_ColumnClick Pin
cinamon18-Jan-08 10:22
membercinamon18-Jan-08 10:22 
GeneralA note for anyone who downloads the source Pin
Patrick Etc.6-Dec-06 17:40
memberPatrick Etc.6-Dec-06 17:40 
QuestionView = LargeIcon Pin
CodeChampion13-Nov-06 11:20
memberCodeChampion13-Nov-06 11:20 
QuestionExcellent work but a question Pin
Edward Steward9-Nov-06 22:54
memberEdward Steward9-Nov-06 22:54 
GeneralSolution for overdraw bug Pin
vanoostenrijk23-Oct-06 2:28
membervanoostenrijk23-Oct-06 2:28 
GeneralRe: Solution for overdraw bug Pin
thetrashpile27-Apr-07 19:30
memberthetrashpile27-Apr-07 19:30 
GeneralRe: Solution for overdraw bug Pin
thetrashpile30-Apr-07 8:33
memberthetrashpile30-Apr-07 8:33 
GeneralRe: Solution for overdraw bug Pin
cinamon30-Dec-07 7:45
membercinamon30-Dec-07 7:45 
QuestionValue change notification [modified] Pin
BardMorgan15-Oct-06 12:20
memberBardMorgan15-Oct-06 12:20 
GeneralRe: Value change notification Pin
cinamon30-Dec-07 11:22
membercinamon30-Dec-07 11:22 
GeneralAdd button [modified] Pin
[Neno]12-Oct-06 4:10
member[Neno]12-Oct-06 4:10 
QuestionIcons for subitems in virtual mode Pin
Martin Welker17-Aug-06 11:47
memberMartin Welker17-Aug-06 11:47 
QuestionFlicker Pin
obsy29-Jun-06 7:56
memberobsy29-Jun-06 7:56 
AnswerRe: Flicker Pin
BSchoenbeck17-Jul-06 4:28
memberBSchoenbeck17-Jul-06 4:28 
GeneralRe: Flicker Pin
obsy17-Jul-06 21:28
memberobsy17-Jul-06 21:28 
GeneralRe: Flicker Pin
ken8828-Jul-06 12:41
memberken8828-Jul-06 12:41 
GeneralDrawListViewColumnHeaderEventArgs Problem [modified] Pin
Savun Cheam21-Jun-06 16:36
memberSavun Cheam21-Jun-06 16:36 
GeneralRe: DrawListViewColumnHeaderEventArgs Problem Pin
Jacek Gajek28-Jun-06 1:05
memberJacek Gajek28-Jun-06 1:05 
QuestionThumbnails in List Cntrl? Pin
Shailesh Ha14-Jun-06 21:22
memberShailesh Ha14-Jun-06 21:22 
GeneralRight To Left layout Pin
gilagam26-Jun-06 22:00
membergilagam26-Jun-06 22:00 
GeneralFrom class to custom control Pin
Fr2351664-Jun-06 22:29
memberFr2351664-Jun-06 22:29 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Cookies | Terms of Use | Mobile
Web03 | 2.8.190526.1 | Last Updated 13 Jun 2006
Article Copyright 2006 by Michiel van Eerd
Everything else Copyright © CodeProject, 1999-2019
Layout: fixed | fluid