ListBox with custom items (colors, images, text alignment)

[NickThissen]

Hey,

Here is a very simple owner-drawn ListBox control that allows you to specify a Color and Image for each item. It uses a very simple method to only allow items of a specific type (and not all Objects as usual) which is easily extended.



I know you could just use a ListView for this, but I came across this method when creating a different control (a 'large item' listbox that looks like the Downloads window in FireFox) and decided to share it, because it is conceptually easy and allows you to extend the items much more. For example, there's nothing stopping you to give each item it's own Font or something.

As a 'bonus' there is also a TextAlign property which allows you to align the text of all items to whichever side you want (MiddleLeft in the image).



How it works:

The ColorListBox class inherits ListBox, and overloads the Items property. Instead of returning MyBase.Items, it returns its own ColorListBoxItemCollection.
The original base items are then returned by a (private) property baseItems.

Private _Items As ColorListBoxItemCollection
    <DesignerSerializationVisibility(DesignerSerializationVisibility.Content)> _
    Public Overloads ReadOnly Property Items() As ColorListBoxItemCollection
        Get
            Return _Items
        End Get
    End Property
 
    'The original items that the user will never see.
    Private ReadOnly Property baseItems() As ObjectCollection
        Get
            Return MyBase.Items
        End Get
    End Property

The ColorListBoxItemCollection inherits System.Collections.ObjectModel.Collection(Of ColorListBoxItem) and overrides the Set/Remove/InsertItem and ClearItems methods. In those methods, it adds the item to it's collection but also adds the item to the baseItems property of the owner ColorListBox. This is necessary because the ColorListBox won't draw any items in your own custom collection; only those in the MyBase.Items collection.

Protected Overrides Sub ClearItems()
            MyBase.ClearItems()
            _listBox.baseItems.Clear()
        End Sub
 
        Protected Overrides Sub InsertItem(ByVal index As Integer, ByVal item As ColorListBoxItem)
            MyBase.InsertItem(index, item)
            _listBox.baseItems.Insert(index, item)
        End Sub
 
        Protected Overrides Sub RemoveItem(ByVal index As Integer)
            MyBase.RemoveItem(index)
            _listBox.baseItems.RemoveAt(index)
        End Sub
 
        Protected Overrides Sub SetItem(ByVal index As Integer, ByVal item As ColorListBoxItem)
            MyBase.SetItem(index, item)
            _listBox.baseItems(index) = item
        End Sub

Finally, the ColorListBox is owner drawn, so it overrides the OnDrawItem method. The listbox actually wants to draw the original items, but I simply force it to use the items from my own collection (by using their index), and draw them with the correct color and possibly with an image.




As I said, this is the 'base' for a different ListBox control which I'll hopefully also complete shortly.

I am not 100% sure whether this method will always work (I am afraid the baseItems and Items might become 'de-synchronised' for some reason for example), but I hope it will work fine.


Enjoy!