ImageListBox - exposing localizable custom object collection as a property

Add [TypeConverter(typeof(ImageIndexConverter))] attribute before the implementation of ImageIndex property. This tells the editor that it needs to take the indexes from the ImageList associated with an item.

Add [Editor("System.Windows.Forms.Design.ImageIndexEditor", typeof(UITypeEditor))] attribute before the implementation of ImageIndex property. This tells the Collection editor to use standard UI editor for the properties that are image indexes.

Fig.5 Combobox with images from the control's ImageList

And voilа! Here is the combobox filled with images as desired (see Fig.5).

Item type converter class implementation

As a final stroke, we need the Windows Form Designer to automatically add the code to our form's InitializeComponent() function like the one that follows:

this.listBox1.Items.AddRange(
    new Controls.Development.ImageListBoxItem[] {
    new Controls.Development.ImageListBoxItem("Granite", 0),
    new Controls.Development.ImageListBoxItem("Marble", 1),
    new Controls.Development.ImageListBoxItem("Stone", 2),
    new Controls.Development.ImageListBoxItem("Stucco", 3)
    }
);

This is performed by implementing the type converter class that inherits from the TypeConverter. We will use the ExpandableTypeConverter (as Microsoft does for ListViewItem) to lessen the amount of functions to override. The only functions we should override are CanConvertTo and ConvertTo. We should convert only to InstanceDescriptor type used by the Windows Form Designer. The ConvertTo function bulds the InstanceDescriptor object by providing the ConstructorInfo for the constructor that will appear in the code added by the designer (ImageListBoxItem(string Text, int ImageIndex) in our case). Then we associate this converter class with the ImageListBoxItem by means of [TypeConverter(typeof(ImageListBoxItemConverter))] attribute. Now the control is ready to be edited by the designer.

Pluses and minuses of Method I

Pluses:

• The class does not have any base classes (except System.Object). You can fully control the class you have created.

Minuses:

• The localization is not straightforward and yet unimplemented
• You need to implement type converter class

Item class implementation. Method II (Localizable!)

Another solution is to derive the collection item class from the System.ComponentModel.Component. In this case you won't need to implement the type converter class, neither the serializability. All other methods and attributes will be the same. The Collection editor appearance will be different in this case (see Fig.6) as well as the code generated.

Fig.6 ImageListBoxItem properties. Method II.

The code that is added automatically, will be split in two parts. First, the member variables for all the items are added to your form class. Then in form's class InitializeComponent method the constructors are called for items, the items are added to listbox and then their properties are set.

// Members added to form class automatically 
private Controls.Development.ImageListBoxItem graniteItem; 
private Controls.Development.ImageListBoxItem marbleItem; 
private Controls.Development.ImageListBoxItem stoneItem; 
private Controls.Development.ImageListBoxItem stuccoItem; 
... 
private void InitializeComponent()        
{ 
    ... 
    // Constructors first called for the class
    members this.graniteItem = new 
        Controls.Development.ImageListBoxItem();
         
    this.marbleItem = new 
        Controls.Development.ImageListBoxItem();
         
    this.stoneItem = new 
        Controls.Development.ImageListBoxItem(); 
         
    this.stuccoItem = new 
        Controls.Development.ImageListBoxItem();
    ... 
    // Items added to the ImageListBox 
    this.listBox1.Items.AddRange(
        new Controls.Development.ImageListBoxItem[] {
            this.graniteItem,
            this.marbleItem,
            this.stoneItem,
            this.stuccoItem});
    ... 
    // Member properties set
    ...
    // 
    // graniteItem
    // 
    this.graniteItem.ImageIndex = 0;
    this.graniteItem.Text = "Granite";
    ...
}

Pluses and minuses of Method II

Pluses:

• The most noticeable plus of this approach along with implementation simplicity is that now the control may be localized by means of Windows Forms Designer
• No type converter class needed
• The class implementation is simpler than in Method I

Minuses:

• The only minus is that the items become a little bit heavy weighted since they are derived from Component class

Conclusion

This article demonstrates the method of exposing the collection as a property. This technique may be useful for a bunch of other controls (bands for OutlookBar, column and row headers for custom grid controls, etc.). If you spend a couple of days in implementing a set of classes as described in this technique, this will gain you time in the projects where you are going to use the designed controls. Instead of adding lines of code, simply click, type and enjoy. I already did.

Problems

The principal problem that remains unresolved, is the localization for Method I. I use the [Localizable(true)] attribute for all members I want to be localizable, but this doesn't seem to work in a proper manner. When I set the Localizable property for the form to true and then try to switch between the languages, the ImageListBox contents remain invariant. If anyone has already solved such a problem, please contact me if possible. I have noticed that almost the same problem is encountered for ListView control.

Updates

• Thanks to James T. Johnson, now the toolbox bitmap is displayed correctly. I have added an embedded bitmap resource (ImageListbox.bmp) that appears in the Visual Studio's toolbox. The name of the resource must match the control's name (minus name of the project default namespace).
• Another method of implementing the item class that supports localization has been added.