Click here to Skip to main content
15,867,686 members
Articles / Programming Languages / Visual Basic
Article

ImageCombobox in VB.NET

Rate me:
Please Sign up or sign in to vote.
4.35/5 (21 votes)
15 Oct 20031 min read 154.1K   3.6K   37   23
A comboBox that displays an icon and a text for each item

Sample Image - ImageComboBox_VBNET.jpg

Introduction

This is a simple combobox that displays icons to the user. It is similar to the imageComboBox in VB. I saw many examples like this made in  C#, so I decided to make a VB one.

You have to create an ImageList, load images to it and then set the ComboIcon.ImageList property to this ImageList. Once this is done you can add items. I made also a class for the Item (ComboBoxIconItem) which is a simple class that stores the imageIndex (in the imageList) of the item and its text.

The ComboIcon Class inherits from the ComboBox of course. It has just an Override to the Draw_Item Sub. In the override we make the combo Owner_draw and we draw the icon and text in case there is an imageIndex in the ImageList for the Icon. If not, we load only the text to the combo.

Code

The ComboIcon class has these Overrides:

VB.NET
Private ListaImg1 As New ImageList 
    'It is the ImageList associated to the Combo

Public Sub New()
    DrawMode = DrawMode.OwnerDrawFixed 
        'Set the DrawMode to OwnerDraw
End Sub

Protected Overrides Sub OnDrawItem(ByVal e _
        As System.Windows.Forms.DrawItemEventArgs)
    e.DrawBackground()
    e.DrawFocusRectangle()
    Dim item As New ComboBoxIconItem
    Dim imageSize As New Size
    imageSize = ListaImg1.ImageSize
    Dim bounds As New Rectangle
    bounds = e.Bounds
    Try
        item = Me.Items(e.Index)
        If (item.ImageIndex <> -1) Then
            Me.ImageList.Draw(e.Graphics, bounds.Left, _
                bounds.Top, item.ImageIndex)
            e.Graphics.DrawString(item.Text, e.Font, _
                New SolidBrush(e.ForeColor), bounds.Left + _
                imageSize.Width, bounds.Top)
        Else
            e.Graphics.DrawString(item.Text, e.Font, _
                New SolidBrush(e.ForeColor), bounds.Left, _
                bounds.Top)
        End If
        Catch ex As Exception
        If (e.Index <> -1) Then
            e.Graphics.DrawString(Items(e.Index).ToString(), e.Font, _
                New SolidBrush(e.ForeColor), bounds.Left, bounds.Top)
        Else
            e.Graphics.DrawString(Text, e.Font, _
                New SolidBrush(e.ForeColor), bounds.Left, bounds.Top)
        End If
    End Try
MyBase.OnDrawItem(e)
End Sub

That's it. The ComboBoxIconItem is very simple, it just has  2 properties: text and imageIndex, that is the imageindex of the image in the imagelist that should be displayed with the Item.

Using the code

So, in the Form, or where you want to put the comboBox you just have to write this code:

VB.NET
Dim MyCombo As New ComboIcon 'Create the Combo
MyCombo.ImageList = ImageList1 
    'Associates the Combo to an ImageList
MyCombo.Items.Add(New ComboBoxIconItem("Bart", 0)) 
    'Add new Item text=Bart image=0 
MyCombo.Items.Add(New ComboBoxIconItem("Marge", 2))
MyCombo.Items.Add(New ComboBoxIconItem("Homer", 1))
MyCombo.Items.Add(New ComboBoxIconItem("Lisa", 3))
MyCombo.Items.Add(New ComboBoxIconItem("Maggie", 4))
Me.Controls.Add(MyCombo) 'add the combobox to the form
'Place the combobox in a nice place
MyCombo.Top = 30
MyCombo.Left = 50

Conclusion

That's all. I hope this is useful to you.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here


Written By
Web Developer
Brazil Brazil
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
QuestionImage size for each List Item Pin
Graham Irons9-Aug-20 9:37
Graham Irons9-Aug-20 9:37 
QuestionThank you Pin
evry1falls15-Apr-20 11:01
evry1falls15-Apr-20 11:01 
QuestionEnable Windows XP styles Pin
gps582-May-12 5:25
gps582-May-12 5:25 
QuestionGreat!!! but ... how can I translate it for use as visual component? Pin
XTV18-Aug-10 0:42
XTV18-Aug-10 0:42 
GeneralThanks - Works Great / Image Height Pin
aravenwood10-Jan-10 7:40
aravenwood10-Jan-10 7:40 
Questionselecting an item Pin
beMe1014-Dec-09 0:18
beMe1014-Dec-09 0:18 
I have a small problem - I can't put a default value to be selected:
cmbSelectColor.SelectedItem = "Bart"

the selection is null
how can I select an Item on runtime?

Thanks,
beMe

AnswerRe: selecting an item Pin
Maximv.d.w.28-Aug-10 10:11
Maximv.d.w.28-Aug-10 10:11 
Generalnice work!!! Pin
Shariful Islam3-Oct-07 20:18
Shariful Islam3-Oct-07 20:18 
Generalperfect Pin
airbase17-May-07 23:23
airbase17-May-07 23:23 
GeneralEasy to use Pin
MarcR.9-Dec-06 8:18
professionalMarcR.9-Dec-06 8:18 
GeneralRe: Easy to use Pin
Daniel Presman19-Dec-06 3:51
Daniel Presman19-Dec-06 3:51 
QuestionShowing the image Pin
Troy Lundin13-Mar-06 17:19
Troy Lundin13-Mar-06 17:19 
AnswerRe: Showing the image Pin
kamaraju26-Sep-06 20:34
kamaraju26-Sep-06 20:34 
GeneralEvent Handling Pin
XYZ22722-Jan-06 12:59
XYZ22722-Jan-06 12:59 
GeneralRe: Event Handling Pin
XYZ22722-Jan-06 13:06
XYZ22722-Jan-06 13:06 
Generaluse Pin
peterfrylol8-Mar-05 18:43
peterfrylol8-Mar-05 18:43 
GeneralRe: use Pin
Anonymous9-Mar-05 2:31
Anonymous9-Mar-05 2:31 
GeneralRe: use Pin
peterfrylol9-Mar-05 20:05
peterfrylol9-Mar-05 20:05 
GeneralGood Idea Pin
hachache3-Dec-03 2:55
hachache3-Dec-03 2:55 
Generalsome problem Pin
mahrayan16-Nov-03 17:57
mahrayan16-Nov-03 17:57 
GeneralRe: some problem Pin
Daniel Presman3-Dec-03 23:48
Daniel Presman3-Dec-03 23:48 
GeneralVery good!!! Pin
João Fornari Jr.28-Oct-03 4:10
João Fornari Jr.28-Oct-03 4:10 
GeneralSuggestion Pin
Michael P Butler19-Oct-03 22:42
Michael P Butler19-Oct-03 22:42 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.