VB.Net Extended Listbox with colors and picture support

Hi All,

My first CodeBank submission. Exciting. Lets hope people like it :)

Every now and again in the forums we see people wanting to use colors or pictures in the listbox control (or making it transparent). As a standard this is not possible without knowing how to override or create your own.

I have for a few years now used my own custom control for this purpose. So today I share it. I have modified it to work similar to the listbox by adding properties and subs such as AddItem and RemoveAtItem.

Here is some pictures of it with just a sample of what it can do, sorry for the resolution of them

list with different colors as both forecolor,backcolor and even 2 with an image (the green shapes). the control has a color set as background
Attachment 112309

Exactly the same as the last one but with a transparent backcolor for the box itself
Attachment 112311

Same again but with scroll bars!
Attachment 112313

The listbox works by inheriting the FlowLayoutPanel, I have also double buffered the control so when using images it doesn't flicker. The items are made up of label controls inserted into the panel and are just as wide. This gives us a nice index based, auto reordering list to work with. As the control is just housing other controls you can refer to them direct but i have some properties and subs for some common things below. An example of accessing it directly would be

Code:

---

flowy1.Controls(2).BackColor = Color.Red

---

In the attachment is a little project thrown together with some examples of how to use the control, I will of course explain this here as well.

To add the control to your project, in your project click project->Add Existing Item, then navigate to the flowy folder and add the files: flowy.vb and flowy.Designer files, then build. This will add the control to your toolbox.

The Properties I have added are as follows:

Counts - returns the number of items in the control

Code:

---

Dim itemcount as integer
itemcount = flowy1.Counts

---

selectedText - returns/sets the text of the selected/highlighted item

Code:

---

Dim textme as String
textme = flowy1.selectedText

---

Code:

---

flowy1.selectedText = "Hello World"

---

selectedIndex - returns/sets the index of the selected/highlighted item

Code:

---

Dim indy as integer
indy = flowy1.selectedIndex

---

Code:

---

flowy1.selectedIndex = 5
'this will also highlight the chosen index

---

items - This works two ways, when getting it returns a list of items in the control, returns as list of label so you can use it much the same as listbox.items, when setting it takes a integer for the index and changes the text of the item at that index

Code:

---

For Each iteminlist In flowy1.items
Console.writeline(iteminlist.Text)
Next

---

Code:

---

flowy1.items(5) = "Updated Text"

---

RemoveItem - removes item from control by passing an object

Code:

---

'will remove all items
For Each t In flowy1.items
flowy1.RemoveItem(t)
Next

---

RemoveAtItem - removes item from control by passing its index

Code:

---

'removes the item at index 3
flowy1.RemoveAtItem(3)

---

AddItem - takes a string and adds it to the control, has an optional align property

Code:

---

'Adds text to the control
flowy1.AddItem("Hello World")

---

clicky - highlights the selected item in the control, no code or event raised as this is local to the control itself

ClearItems - clears all items in the list

Code:

---

flowy1.ClearItems

---

You can change the Font and color of the font of the items default by changing the flowy controls values, it sets them from there. The backcolor of the items is set however at transparent, this is for when you want an image in the background of the control. The highlighted color is preset in code to be LightSteelBlue, by all means feel free to change that. The control is by no means a finished product and is easily expandable further. If you want to change each items color or backcolor or anything then just add another sub or and optional parameter to the additem sub or use the method of accessing it directly as showed up the top.

If anyone has any suggestions on how to make this better let me know, I have posted the control based around what I mainly use it for which is holding text with a background image.

Hope I haven't missed anything :)

When making Codebank submissions like this I recommend you post a picture so readers can quickly get an idea of what it is you're submitting when they find the thread. Of course this recommendation only applies to certain kinds of submissions where there is actually something to see like a custom control or a GUI if its an application.

Just a suggestion ;)

Quote:

---

Originally Posted by Niya

When making Codebank submissions like this I recommend you post a picture so readers can quickly get an idea of what it is you're submitting when they find the thread. Of course this recommendation only applies to certain kinds of submissions where there is actually something to see like a custom control or a GUI if its an application.

Just a suggestion ;)

---

GREAT idea, I have now edited my post with some images :)