Click here to Skip to main content
15,860,972 members
Articles / Desktop Programming / Windows Forms
Article

Extended ListView

Rate me:
Please Sign up or sign in to vote.
4.74/5 (52 votes)
13 Jun 20064 min read 502.8K   29.3K   265   114
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

Introduction

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.

Background

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:

C#
EXEditableColumnHeader editcol = 
                  new EXEditableColumnHeader("Movie");

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

C#
// 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:

C#
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:

C#
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:

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

An item that can show multiple images:

C#
EXMultipleImagesListViewItem mimglstvitem = 
        new EXMultipleImagesListViewItem();
// define arraylist with all the images
ArrayList images = new ArrayList(new object[] 
          {Image.FromFile("Pete.jpg"), 
          Image.FromFile("man.png")});
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.

C#
// 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[] 
       {Image.FromFile("love.png"), 
       Image.FromFile("comedy.png")}), 
       "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:

C#
EXMultipleImagesListViewSubItem subitem = 
   lstv.Items[2].SubItems[1] 
   as EXMultipleImagesListViewSubItem;
subitem.MyImages.RemoveAt(1);
lstv.Invalidate(subitem.Bounds);

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:

C#
EXListViewItem item = new EXListViewItem("Item 1");
EXControlListViewSubItem cs = new EXControlListViewSubItem();
ProgressBar b = new ProgressBar();
b.Minimum = 0;
b.Maximum = 1000;
b.Step = 1;
item.SubItems.Add(cs);
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.

History

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

License

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


Written By
Netherlands Netherlands
...to be continued.

Comments and Discussions

 
Questionhide column header Pin
artor42213-Mar-18 23:32
artor42213-Mar-18 23:32 
QuestionBug + Solution: Added Controls (via AddControlToSubItem(...)) are painted over the ColumnHeaders (if scrolled) Pin
Member 134478455-Oct-17 23:36
Member 134478455-Oct-17 23:36 
QuestionA little bug! Pin
umar.techBOY13-Jun-16 0:57
umar.techBOY13-Jun-16 0:57 
AnswerRe: A little bug! Pin
umar.techBOY13-Jun-16 1:10
umar.techBOY13-Jun-16 1:10 
QuestionVariable Row Hieght for each row Pin
Shomy18-Feb-16 11:45
Shomy18-Feb-16 11:45 
GeneralMy vote of 5 Pin
Riktek3-Jan-14 1:19
Riktek3-Jan-14 1:19 
QuestionEvent KeyDown? Pin
KishanAhir28-Dec-13 10:29
KishanAhir28-Dec-13 10:29 
Questionhow to add multiple controls in subitem Pin
RAshmiBhimani10-Oct-13 0:45
RAshmiBhimani10-Oct-13 0:45 
GeneralMy vote of 5 Pin
m.qayyum9-Sep-13 11:25
m.qayyum9-Sep-13 11:25 
GeneralMy vote of 5 Pin
Shahan Ayyub26-Mar-13 7:46
Shahan Ayyub26-Mar-13 7:46 
QuestionUrgent help: How to stop user from editing? Pin
shyambs8513-Mar-13 5:00
shyambs8513-Mar-13 5:00 
QuestionCan i free use the source code in a commercial software? Pin
liusfile20-Feb-13 21:10
liusfile20-Feb-13 21:10 
GeneralVery good article. Pin
hkn050930-Jan-13 6:22
hkn050930-Jan-13 6:22 
Question.dll Pin
hujiko98731-Oct-12 18:58
hujiko98731-Oct-12 18:58 
AnswerRe: .dll Pin
hujiko98731-Oct-12 20:50
hujiko98731-Oct-12 20:50 
BugMay be some bugs Pin
fanherong18-Jun-12 21:15
fanherong18-Jun-12 21:15 
GeneralMy vote of 5 Pin
Mr. Ean Soknet27-May-12 17:59
Mr. Ean Soknet27-May-12 17:59 
QuestionGreat Article! Pin
Daniel Liedke4-Apr-12 3:49
professionalDaniel Liedke4-Apr-12 3:49 
QuestionHow to add Group in this listview Pin
JacksonChian1855-Jan-12 18:50
JacksonChian1855-Jan-12 18:50 
QuestionAmazing; just one thing... Pin
PlagueEditor29-Jun-11 16:04
PlagueEditor29-Jun-11 16:04 
GeneralAnimated Image Pin
Sunasara Imdadhusen15-Apr-11 1:56
professionalSunasara Imdadhusen15-Apr-11 1:56 
GeneralSame bug you described still persists.. Pin
divStar7-Nov-10 2:25
divStar7-Nov-10 2:25 
GeneralVB Version please Pin
SiloSino16-Aug-10 8:28
SiloSino16-Aug-10 8:28 
QuestionVB or C# Version ? Pin
realyeti31-Jan-10 1:46
realyeti31-Jan-10 1:46 
Generalright to left Pin
mehrzad200230-Jan-10 23:17
mehrzad200230-Jan-10 23:17 

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.