Refining a custom listbox control - vb.net

Question

I have made a sort of custom list box and have included the ability to add an image to each item.
I want to be able to change these images one by one at will and am not too sure on how to go about it. At the moment you can only select which image you would like in every item.
Public Class CustomListBox
Public label As Label
Public pic As PictureBox
Public panel As Panel
Public itemID As String
Public itemCollection As New Collection
Public bgColor As Color
Public txtEnterColor As Color = Color.FromArgb(80, 80, 80)
Public txtColor As Color = Color.FromArgb(150, 150, 150)
Public bgEntercolor As Color = Color.FromArgb(230, 230, 230)
Public x, y, paddingInt As Integer
Public itemHeight As Integer = 40
Public image As Image = My.Resources.FavNone
Public Event Item_Clicked()
Private Property ItemBackColor As Color
Get
Return BackColor
End Get
Set(ByVal value As Color)
bgColor = value
End Set
End Property
Private Property ItemPadding As Padding
Get
Return Padding
End Get
Set(ByVal value As Padding)
Padding = value
End Set
End Property
Public Property HoverBackColor As Color
Get
Return bgEntercolor
End Get
Set(ByVal value As Color)
bgEntercolor = value
End Set
End Property
Public Property ItemImage As Image
Get
Return image
End Get
Set(ByVal value As Image)
image = value
End Set
End Property
Public Property HoverTextColor As Color
Get
Return txtEnterColor
End Get
Set(ByVal value As Color)
txtEnterColor = value
End Set
End Property
Public Property TextColor As Color
Get
Return txtColor
End Get
Set(ByVal value As Color)
txtColor = value
End Set
End Property
Public Property TrueItemHeight As Integer
Get
Return itemHeight
End Get
Set(ByVal value As Integer)
itemHeight = value
End Set
End Property
Public Sub UpdateItems()
For Each item As String In itemCollection
label = New Label
pic = New PictureBox
panel = New Panel
With pic
.Width = itemHeight
.Height = itemHeight
.SizeMode = PictureBoxSizeMode.Zoom
.Image = image
End With
With label
.BackColor = (bgColor)
.ForeColor = (txtColor)
.Width = Me.Width - itemHeight
.Height = itemHeight
.Tag = item
.Height = itemHeight
.Padding = ItemPadding
.Text = item
.Left = itemHeight
.TextAlign = ContentAlignment.MiddleLeft
AddHandler label.MouseEnter, AddressOf Item_Enter
AddHandler label.MouseLeave, AddressOf Item_Leave
AddHandler label.MouseUp, AddressOf Item_Mousedown
End With
With panel
.Location = New Point(x, y)
.Width = Me.Width
.Height = itemHeight
.Controls.Add(pic)
.Controls.Add(label)
y += .Height + paddingInt
End With
Me.Controls.Add(panel)
Next
End Sub
Private Sub Item_Enter(ByVal sender As Label, ByVal e As EventArgs)
sender.BackColor = (bgEnterColor)
sender.ForeColor = (txtEnterColor)
itemID = sender.Tag
End Sub
Private Sub Item_Leave(ByVal sender As Label, ByVal e As EventArgs)
sender.BackColor = (bgColor)
sender.ForeColor = (txtColor)
End Sub
Private Sub Item_Mousedown(ByVal sender As Label, ByVal e As MouseEventArgs)
Select Case e.button
Case Windows.Forms.MouseButtons.Left
RaiseEvent Item_Clicked()
End Select
End Sub
End Class
I know I'll need to add something into the click event of the items.Possible set a variable with the index number of the label, maybe...?
Also, how do I get auto-suggestions when typing the code. For example, I want to be able to type CustomListBox1.itemCollection.add("Text", imageSrc)...etc I just have no idea what to type into Google apart from looking through loads of custom controls until I find one that includes this.
EDIT
I have looked into this custom Listbox.
I tried to add a MouseMove event to each item so thought it would be as easy as placing this:
Private Sub HoverItem(ByVal item As ColorListboxItem, ByVal e As MouseEventArgs)
msgbox(1)
End Sub
...in the "Methods" region and then
AddHandler .mousemove, AddressOf HoverItem
to the "OnDrawItem" sub. Unfortunately for me, it obviously isn't that easy as no msgbox shows.
Could anybody with experience on this control give a bit of insight as to how it works. And maybe an example of the MouseMove event so then I'll get an idea on how to add in more events (Mouseleave, DblClick...etc)

Answer 1

What #JoshMason said is correct for the most part, but if you insist on doing that, then you need not only an indexed collection/array for your items but also a linked associated collection/array for the corresponding images.
So that way the index of the item/image is accessible to you (properly exposed of course) so that you can assign an image to it like you would assign a text to the item(index) and you need to make sure your code accounts for removing an item also removes the corresponding image, but if you link them properly, that should happen automatically.
EDIT: For inspiration, give this a quick look.

Answer 2

That looks familiar - I have something very similar to house and track a bunch of thumbnails. A few things. The way it is written it is more of a ListBox helper than a custom control. There is nothing wrong with that, but if you want it to show up in the toolbox and be more reusable, consider reworking it:
Public Class CustomListBox
Inherits Panel ' or maybe Component, depending....
The way yours is written, you are trying to emulate ListBox functionality by maintaining a collection of labels and picboxes and panels. If you start to think about each panel+picbox+textbox as its OWN integral thing (control), you can internalize some of the functionality at that level (Event processing for instance) and leave the ListBox helper mainly to manage the interactions with the user or app (or go away). I dont think auto-suggest is going to work until it is an actual control or component.
Private WithEvents mLbl As TextBox ' just recently decided to allow text edits
Private WithEvents mPic As PictureBox
Public Sub New(ByVal uniqueName As String)
mLbl = New TextBox
mPic = New PictureBox
Name = uniqueName
.... set required lbl/txt properties
MyBase.Controls.Add(mLbl) ' we inherit from Panel
.... set pic controls
MyBase.Controls.Add(mPic)
...
...
' no need for AddHandler, each Item comes with its own built in event
Private Sub mPic_DClick(ByVal sender As Object, ByVal e As System.EventArgs) _
Handles mPic.DoubleClick, mLbl.DoubleClick
IsSelected = Not _IsSelected
End Sub
After it is created with default or basic props, the class that is creating it sets the unique ones like Text, Image and location on the scrolling panel before adding it to the scrollpanel:
frmMain.pnlImgList.Controls.Add(newImgItem)
IsSelected (above) is a property, that when it changes from False to True, I raise a new event ItemSelected to notify the app/panel housing each "ImgItem" Control. The app need not know whether it was the textbox or pic clicked because ImgItem will handle that (like edit Text). In your case, this could be changing the color when selected/focused etc. (Breaking it down into 2 pieces would eventually let you get rid of that big procedure to create all new items).
What I dont have is any internal collection of these. They are added to a panel on the form and that panel's controls collection serves that purpose. When a new one of these things is added to the form, it DOES have to be hooked up to events using AddHandler to process events like ItemSelected (there is a ControlAdded/ControlRemoved event that makes a nice spot for hooking/unhooking these to the Selected event handler!)
You could do something similar using a scrolling panel of items which looks and acts like a Listbox.
Before you can do things like change an image, you need a unique identifier so you know WHICH picture to change. It looks like you use the text as the name. Depending on how you use it, that might work but if the user can edit the text, they could create a duplicate; and if the name changes you run the risk of loosing track of things. So, consider tagging them with your own unique name that isnt exposed to the user:
' this would be passed to Sub New when creating a new Item
newName = System.Guid.NewGuid.ToString()
The unique ID (Name) is part of the events args in the ItemSelected event, making it easy to find each control on the form:
ThisCtl = pnlItems.Controls(sender.Name)
To change an image, just expose it at the "item" level:
Friend Property Pic() As Bitmap
Get
' I dont recall why this is this way, maybe an artifact
' from trying different things.
Return CType(mPic.BackgroundImage, Bitmap)
End Get
The form or your helper can then change the image:
ThisCtl = pnlItems.Controls(sender.Name)
ThisCtl.Pic = newImage
Or frmName.pnlItems(sender.Name).Pic = newImage
Re your edit: Some of what you want to do with the mouse (Change colors) might be able to be done on the cheap by changing BackColor in mouse events. Some things though might be better handled by making it a proper component so that you can Shadow and OVerride mouse and paint procedures as needed. If you keep the items in an actual ListBOx, you almost certainly are going to have to hook into the DrawItem paint events. Worry about that after you decide whether or not to convert it to a component.
HTH