Colored ListBox (custom fonts, colors, highlight) Updated! - Now With Class!

05/August/2009
I have created a custom class with code, please check the attachments, the class will be there.

Well, drawing a ListBox isn't as hard as you might think, it's really easy. Take a look at the commented code here:

Declare a ListBox with events, so we can draw to it later...

vb.net Code:

Public WithEvents ColoredListBox As New ListBox()

Create the ListBox...

vb.net Code:

Public Sub CreateMyListBox()
        'Set the properties you want the listbox to have...
        'ColoredListBox.Items.Clear()
        ColoredListBox.Items.AddRange(New Object() {"Gray", "Green", "Yellow", "Blue", "Pink", "Cyan"})
        ColoredListBox.Location = New System.Drawing.Point(12, 12)
        ColoredListBox.Size = New System.Drawing.Size(260, 224)
        'If you set the draw mode to normal, you will end up with a normal-looking listbox _
        'with the default characteristics, however, if it's OwnerDrawFixed, means that _
        'you can "play with it"
        ColoredListBox.DrawMode = DrawMode.OwnerDrawFixed
        'Here we add the listbox to the parent control, in this case, form1
        Controls.Add(ColoredListBox)
    End Sub

Now, let's draw our items :D. Each one of these items have a different color.

vb.net Code:

Private Sub ColoredListBox_DrawItem _
    (ByVal sender As Object, ByVal e As System.Windows.Forms.DrawItemEventArgs) _
    Handles ColoredListBox.DrawItem
        'Draw the background that we are later painting on
        e.DrawBackground()
        'We set the brush default color to white
        Dim myBrush As Brush = Brushes.White
        'This is the brush for changing the item colors..
        Dim itemColor As Brush = Brushes.Black
        'And the custom border color to yellow
        Dim myPen As Pen = Pens.Yellow
        'Of course, another font...
        Dim myFont As New Font("Tahoma", 8)
        'Since the item is always focused and selected, we have to check _
        'for both of these drawing states...
        If e.State = (DrawItemState.Selected Or DrawItemState.Focus) Then
            'If its true then we highlight the item with a black _
            'background and a red border...
            myBrush = Brushes.Black
            myPen = Pens.Red
        End If
        'Change the color of the item depending on it's index
        Select Case e.Index
            Case 0
                itemColor = Brushes.Gray
            Case 1
                itemColor = Brushes.Green
            Case 2
                itemColor = Brushes.Yellow
            Case 3
                itemColor = Brushes.Blue
            Case 4
                itemColor = Brushes.Pink
            Case 5
                itemColor = Brushes.Cyan
        End Select
        'Now we draw :D
        'We draw the background of each item depeding if it's focused/selected or not
        e.Graphics.FillRectangle(myBrush, e.Bounds)
        'Here it draws the border depeding on it's state (the listbox item)
        e.Graphics.DrawRectangle(myPen, e.Bounds.X, e.Bounds.Y, e.Bounds.Width, e.Bounds.Height)
        'Finally we draw the string...
        e.Graphics.DrawString(ColoredListBox.Items(e.Index).ToString(), _
            myFont, itemColor, e.Bounds.X + 2, e.Bounds.Y, StringFormat.GenericDefault)
        'We added 2 to the X bound so that the string won't be touching the border..
    End Sub

That's it! You're done! Easy, huh?

I've attached an example project.

Thanks to jmcilhinney, NickThissen and Empyreal for baring with me ;).

Please give the necessary credits if you are posting or distributing this code in another website, online service, etc. Thanks

This is extremely similar to my ColorComboBox, except I have it hold a separate list for the colors to be displayed and instead of coloring the text itself, draws a box with the color in it.

I'm glad I'm not the only one who had a use for something like this.

I see, it's a very cool class that you came up with. It hadn't been my intention to post something similar, I just thought that someone would like to have a colored listbox, with a different highlight and the text being, ummm, "unique". I used the names of the colors as an example string since I didn't know what to write. Lol...

Just to let you know, before you zip your project and upload it to the site here, go in and delete the Bin and Obj folders because they contain compiled code which isn't allowed on this forum.

This is another nudge for ya:

Code:

---

Option Explicit On
Option Strict On
Option Infer Off

Imports System.ComponentModel

Public Class ColoredListBox
    Inherits System.Windows.Forms.ListBox

    Public Sub New()
        MyBase.DrawMode = Windows.Forms.DrawMode.OwnerDrawVariable
        Me.Items.Clear()
    End Sub

    <Browsable(False), EditorBrowsable(System.ComponentModel.EditorBrowsableState.Never), DesignerSerializationVisibility(DesignerSerializationVisibility.Hidden), _
    DefaultValue(Windows.Forms.DrawMode.OwnerDrawVariable)> _
    Public Shadows ReadOnly Property DrawMode() As System.Windows.Forms.DrawMode
        Get
            Return System.Windows.Forms.DrawMode.OwnerDrawVariable
        End Get
    End Property

    Protected Overrides Sub OnFontChanged(ByVal e As System.EventArgs)
        Select Case True
            Case Me.Font.SizeInPoints > 12.0F : Me.Font = New Font(Me.Font.FontFamily, 12.0F, Me.Font.Style)
            Case Me.Font.SizeInPoints < 8.0F : Me.Font = New Font(Me.Font.FontFamily, 8.0F, Me.Font.Style)
        End Select
    End Sub

    Protected Overrides Sub onDrawItem(ByVal e As System.Windows.Forms.DrawItemEventArgs)
        e.DrawBackground()
        If e.Index >= 0I AndAlso DesignMode = False Then
            Dim myBrush As Brush = Brushes.White
            Dim myPen As Pen = Pens.Blue
            If e.State = (DrawItemState.Selected Or DrawItemState.Focus) Then
                myBrush = Brushes.Black
                myPen = Pens.Red
            End If
            e.Graphics.FillRectangle(myBrush, e.Bounds)
            e.Graphics.DrawRectangle(myPen, e.Bounds.X, e.Bounds.Y, e.Bounds.Width - 1I, e.Bounds.Height)
            e.Graphics.DrawString(CType(Me.Items(e.Index), ItemDate).ToString, Me.Font, New SolidBrush(CType(Me.Items(e.Index), ItemData).ItemColor), e.Bounds.X + 2, e.Bounds.Y, StringFormat.GenericDefault)
        End If
    End Sub
End Class

Public Class ItemData

    Private m_Item As Object
    Private m_Color As Color

    Public Sub New(ByVal Item As Object, ByVal ItemColor As Color)
        m_Item = Item
        m_Color = ItemColor
    End Sub

    Public Property Item() As Object
        Get
            Return m_Item
        End Get
        Set(ByVal value As Object)
            m_Item = value
        End Set
    End Property

    Public Property ItemColor() As Color
        Get
            Return m_Color
        End Get
        Set(ByVal value As Color)
            m_Color = value
        End Set
    End Property

    Public Overrides Function ToString() As String
        Return m_Item.ToString()
    End Function
End Class

---

with reference to code in post #1

the listbox is not able to display the selected back color if it looses the focus