Click here to Skip to main content
11,480,938 members (56,163 online)
Click here to Skip to main content

Extended ListView

, 13 Jun 2006 310.7K 16.7K 249
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.

Comments and Discussions

QuestionWhere the hell is the project file Pin
jack asshole10-Dec-12 17:36
memberjack asshole10-Dec-12 17:36 
Question.dll Pin
hujiko98731-Oct-12 19:58
memberhujiko98731-Oct-12 19:58 
AnswerRe: .dll Pin
hujiko98731-Oct-12 21:50
memberhujiko98731-Oct-12 21:50 
BugMay be some bugs Pin
fanherong18-Jun-12 22:15
memberfanherong18-Jun-12 22:15 
GeneralMy vote of 5 Pin
Member 806726527-May-12 18:59
memberMember 806726527-May-12 18:59 
QuestionGreat Article! Pin
Daniel Carvalho Liedke4-Apr-12 4:49
memberDaniel Carvalho Liedke4-Apr-12 4:49 
QuestionHow to add Group in this listview Pin
JacksonChian1855-Jan-12 19:50
memberJacksonChian1855-Jan-12 19:50 
QuestionAmazing; just one thing... Pin
PlagueEditor29-Jun-11 17:04
memberPlagueEditor29-Jun-11 17:04 
GeneralAnimated Image Pin
Sunasara Imdadhusen15-Apr-11 2:56
memberSunasara Imdadhusen15-Apr-11 2:56 
GeneralSame bug you described still persists.. Pin
divStar7-Nov-10 3:25
memberdivStar7-Nov-10 3:25 
Hi there,

first off: if I had found your control before trying to make my own (mine is very simple and pretty much suited for my own use only - just made it so a SubItem can display an Image), I'd have used it right away instead of reinventing the wheel..

Oh well. I am using .NET 3.5 (writing in C#) and the problem you described still persists.
It however doesn't seem to matter what direction I come from with the mouse. The first time I scroll over an item in the ListView-control (I've set OwnerDraw to true) it paints the SubItem over. When I hover out and hover back onto that ListViewItem - everything works as supposed. I wish I could fix it.

if (e.Item.Selected) e.Graphics.FillRectangle(new SolidBrush(SystemColors.MenuHighlight), e.Bounds);

If I don't add this into the overriden OnDrawItem-method of the ListView-control - it "seems" to work. However: I do notice, that even the text, that is drawn like this:
e.Graphics.DrawString(e.Item.Text, textFont, new SolidBrush(e.Item.ForeColor), textStart);
is painted "twice", because it becomes stronger (the size seems to become bolder).

If you happened to solve this problem somehow, please let me know Smile | :) . I have tried to catch every possible event - nothing worked. I didn't even know my exact problem - until I've read your description to your user control. I am pretty sure I've encountered the same issue.

Thanks Smile | :) .
GeneralVB Version please Pin
SiloSino16-Aug-10 9:28
memberSiloSino16-Aug-10 9:28 
QuestionVB or C# Version ? Pin
realyeti31-Jan-10 2:46
memberrealyeti31-Jan-10 2:46 
Generalright to left Pin
mehrzad200231-Jan-10 0:17
membermehrzad200231-Jan-10 0:17 
GeneralExcellent! Pin
Vladimir S. Sabanov25-Dec-09 11:57
memberVladimir S. Sabanov25-Dec-09 11:57 
GeneralReordering doesn't work (InvalidCastException) Pin
WorldRacer924-Oct-09 0:36
memberWorldRacer924-Oct-09 0:36 
GeneralRe: Reordering doesn't work (InvalidCastException) Pin
realyeti31-Jan-10 5:39
memberrealyeti31-Jan-10 5:39 
GeneralWhite square around controls added to a subitem Pin
tamagotchi1-Apr-08 5:31
membertamagotchi1-Apr-08 5:31 
GeneralSome Improvements - converted all Arraylists to Generic List, ImageDraw Speed, Column Reordering and VB version [modified] Pin
cinamon30-Dec-07 7:26
membercinamon30-Dec-07 7:26 
GeneralRe: Some Improvements - converted all Arraylists to Generic List, ImageDraw Speed, Column Reordering and VB version Pin
Jason Cz.25-Feb-08 10:52
memberJason Cz.25-Feb-08 10:52 
GeneralRe: Some Improvements - converted all Arraylists to Generic List, ImageDraw Speed, Column Reordering and VB version Pin
manna2-Mar-08 4:44
membermanna2-Mar-08 4:44 
GeneralRe: Some Improvements - converted all Arraylists to Generic List, ImageDraw Speed, Column Reordering and VB version Pin
pizzapieguy11-Mar-08 16:54
memberpizzapieguy11-Mar-08 16:54 
QuestionRe: Some Improvements - converted all Arraylists to Generic List, ImageDraw Speed, Column Reordering and VB version Pin
tamagotchi1-Apr-08 6:01
membertamagotchi1-Apr-08 6:01 
GeneralRe: Some Improvements - converted all Arraylists to Generic List, ImageDraw Speed, Column Reordering and VB version Pin
Craig Neuwirt26-Apr-08 7:29
memberCraig Neuwirt26-Apr-08 7:29 
GeneralRe: Some Improvements - converted all Arraylists to Generic List, ImageDraw Speed, Column Reordering and VB version Pin
elcampion24-Jun-08 18:44
memberelcampion24-Jun-08 18:44 
GeneralRe: Some Improvements - converted all Arraylists to Generic List, ImageDraw Speed, Column Reordering and VB version Pin
God.Ghost3-Aug-08 0:56
memberGod.Ghost3-Aug-08 0:56 

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

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

| Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.150520.1 | Last Updated 13 Jun 2006
Article Copyright 2006 by Michiel van Eerd
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid