Custom ListBox with icons in .Net

Having a nice interface is a must for professional software, it’s why the Custom Controls market is growing so fast. Programmers can have a nice interface without writing a single line of code, all that they have to do is to buy a Control Library. If you’re planning to save money and write your own custom controls i hope that this small sample could show you something interesting. In this sample i created an extended listbox control that shows:

  • An icon for each item
  • A title for each listbox item
  • A subtitle for each listbox item

The main things to do are:

  • Add a New() method and setup the listbox to be drawn in ownermodevariable
  • Create a new class to handle single items (in our case ItemEX)
  • Create the functions to add custom items (ItemEX) to listbox
  • Create the DrawItemHandler function to draw the items as you like
  • Handle the Resize,DrawItem and MeasureItem event for the new control

When you decide that a control will be drawn by code you have to handle all these events and mainly the DrawItem event. To make a control ownerdrawn use Me.DrawMode = DrawMode.OwnerDrawVariable in the constructor of your control ( New() )I think that giving a look at the code will be easier to understend.

Public Class ListBoxEX
    Inherits System.Windows.Forms.ListBox
    Public Shadows Event Resize(ByVal sender As Object,_
        ByVal e As EventArgs, ByVal i As Integer)
    Public Shadows Event DrawItem(ByVal sender As Object,_
        ByVal e As DrawItemEventArgs)
    Public Shadows Event MeasureItem(ByVal sender As Object,_
        ByVal e As MeasureItemEventArgs)
 
    Private WithEvents mListBox As System.Windows.Forms.ListBox
    Private IcoFolder As String = Application.StartupPath() + "\Ico\"
    Private Icons As New ArrayList
 
    Public Shadows Function Items(ByVal idx As Integer) As ItemEX
        Return mListBox.Items(idx)
    End Function
 
    Public Class ItemEX
        Public IconIndex As Integer
        Public Text As String
        Public UserID As Integer
        Public User As String
 
        Public Sub New(ByVal _User As String, ByVal _Text As String,_
            ByVal _IconIndex As Integer, ByVal _UserID As String)
            User = _User
            Text = _Text
            IconIndex = _IconIndex
            UserID = _UserID
        End Sub
    End Class
 
    Public Property IconsFolder()
        Get
            Return IcoFolder
        End Get
        Set(ByVal Value)
            IcoFolder = Value
        End Set
    End Property
 
    Public Sub AddIcon(ByVal filename As String)
        Dim icona As Icon
        Dim fname As String
 
        fname = IconsFolder.ToString + filename
        icona = New Icon(fname)
        Icons.Add(icona)
    End Sub
 
    Public Sub New()
        MyBase.New()
        Me.DrawMode = DrawMode.OwnerDrawVariable
        mListBox = Me
    End Sub
 
    Public Sub Add(ByVal _User As String, ByVal _Text As String,_
         Optional ByVal _iconindex As Integer = -1,_
         Optional ByVal _UserID As Integer = -1)
        mListBox.Items.Add(New ItemEX(_User, _Text, _iconindex, _UserID))
    End Sub
 
    Private Sub mListBox_Resize(ByVal sender As Object,_
          ByVal e As System.EventArgs) _
      Handles mListBox.Resize
        RaiseEvent Resize(sender, e, 1)
    End Sub
 
    Private Sub DrawItemHandler(ByVal sender As Object,_
        ByVal e As DrawItemEventArgs) Handles mListBox.DrawItem
        e.DrawBackground()
        e.DrawFocusRectangle()
        Dim titFont As New Font("Tahoma", 12, FontStyle.Bold,_
          GraphicsUnit.Pixel)
        Dim subTitFont As New Font("Tahoma", 11, FontStyle.Regular,_
         GraphicsUnit.Pixel)
        Dim titBrush As New SolidBrush(Color.DimGray)
        Dim subTitBrush As New SolidBrush(Color.Gray)
        Dim idx As Integer = e.Index
        e.Graphics.DrawString(DirectCast(mListBox.Items(idx),_
           ItemEX).Text, titFont, titBrush, e.Bounds.Left + 30,_
            e.Bounds.Top)
        e.Graphics.DrawString("Utente: " + DirectCast(mListBox.Items(idx),_
            ItemEX).User, subTitFont, subTitBrush, e.Bounds.Left + 30,_
             e.Bounds.Top + titFont.Height + 2)
        e.Graphics.DrawLine(New Pen(Color.LightGray), 0, _
           e.Bounds.Bottom - 1, e.Bounds.Right, e.Bounds.Bottom - 1)
        If Items(idx).IconIndex > -1 Then
            e.Graphics.DrawIcon(DirectCast(Icons(Items(idx).IconIndex),_
             Icon), e.Bounds.Left + 1, e.Bounds.Top + 2)
        End If
    End Sub
 
    Private Sub MeasureItemHandler(ByVal sender As Object,_
     ByVal e As MeasureItemEventArgs) Handles mListBox.MeasureItem
        e.ItemHeight = 40
        RaiseEvent MeasureItem(sender, e)
    End Sub
End Class

Download this code: ListBoxEx.vb.txt

Download the Demo project Simple Extended ListBox


TAGS: Asp.net, dotnet, code snippet, seo, search engine optimization, visual studio.net, sample code, c#, vb.net

Leave a comment

Name:

eMail:

Website:

Comment: