Home > View Post

Using images with the PropertyListView

I said I'd post more on this when I introduced the PropertyListView a few days ago.

You'll recall that the new control allows you to add objects to the list and reflects over the object to determine the columns to be displayed. An attribution mechanism allows you to specify things like ColumnName, ColumnOrder and ColumnWidth but what if you want to use images in your ListView?

The standard ListView control, from which PropertyListView inherits, has two properties against which you can specify ImageLists: SmallImageList and LargeImageList for collections of small and large images respectively. The small images are used when the ListView's view mode is set to SmallIcon or Details and the large images used in LargeIcon mode.

To create an ImageList simply drag one from the toolbox onto your form and open the Images Collection Editor by clicking on the ellipsis (...) against the Images property in the properties window. Note, you'll want to configure the image list to use 16x16 size images (the default) for 'small' images and 32x32 for 'large'. Here, we've created some Traffic Lights for use in the example later.

Images Collection Editor

Now simply add your images in a sensible order; this order (or zero-based index) will be required to use the image. Finally hook the imagelist into the listview control using the control's SmallImageList property.

The idea is easy. When you add an item to the list, you specify the ImageIndex for the item which should match the index of the image you actually want displayed. Since the PropertyListView's add method generates the ListViewItem for you, you have no way of specifying the image...

Which is where the IListItemImageProvider helps out. You can create an additional class that implements this interface and the GetImageIndex method will be passed the instance of your object and asked to determine the image index for it. Here's an example:

/// Specify the class in an attribute
[PropertyListImage(typeof(ExampleImageProvider))]
public class Example
{
    private int _value;

    public int Value
    {
        get { return _value; }
        set { _value = value; }
    }
}

public class ExampleImageProvider : IListItemImageProvider
{
    public int GetImageIndex(object item)
    {
        Example example = (Example)item;

        if (example.Value > 100)
        {
            return 2; // red
        }
        else if (example.Value > 10)
        {
            return 1; // amber
        }
        else
        {
            return 0; // green
        }
    }
}

As you can see we have an example class, imaginatively called Example, which we will be adding to our PropertyListView. At the class level we use the PropertyListImage attribute to identify our ExampleImageProvider class.

ExampleImageProvider implements the required interface and its GetImageIndex returns an image index based on the Value property of the Example class (Value > 100 = Red, Value > 10 = Amber else Green).

Traffic Lights in Action

Easy peasy.

You can download the PropertyListView control for free from the original post.

Tags: WinForms.NET

 
Josh Post By Josh Twist
1:13 AM
26 Jul 2006

» Next Post: Code Reviews are not optional
« Previous Post: Two assemblies into one does go

Comments are closed for this post.

© 2005 - 2017 Josh Twist - All Rights Reserved.