ListBox with custom items (colors, images, text alignment)-VBForums
Results 1 to 32 of 32

Thread: ListBox with custom items (colors, images, text alignment)

  1. #1

    Thread Starter
    PowerPoster
    Join Date
    Apr 2007
    Location
    The Netherlands
    Posts
    5,070

    ListBox with custom items (colors, images, text alignment)

    Hey,

    Here is a very simple owner-drawn ListBox control that allows you to specify a Color and Image for each item. It uses a very simple method to only allow items of a specific type (and not all Objects as usual) which is easily extended.



    I know you could just use a ListView for this, but I came across this method when creating a different control (a 'large item' listbox that looks like the Downloads window in FireFox) and decided to share it, because it is conceptually easy and allows you to extend the items much more. For example, there's nothing stopping you to give each item it's own Font or something.

    As a 'bonus' there is also a TextAlign property which allows you to align the text of all items to whichever side you want (MiddleLeft in the image).



    How it works:

    The ColorListBox class inherits ListBox, and overloads the Items property. Instead of returning MyBase.Items, it returns its own ColorListBoxItemCollection.
    The original base items are then returned by a (private) property baseItems.
    vb.net Code:
    1. Private _Items As ColorListBoxItemCollection
    2.     <DesignerSerializationVisibility(DesignerSerializationVisibility.Content)> _
    3.     Public Overloads ReadOnly Property Items() As ColorListBoxItemCollection
    4.         Get
    5.             Return _Items
    6.         End Get
    7.     End Property
    8.  
    9.     'The original items that the user will never see.
    10.     Private ReadOnly Property baseItems() As ObjectCollection
    11.         Get
    12.             Return MyBase.Items
    13.         End Get
    14.     End Property

    The ColorListBoxItemCollection inherits System.Collections.ObjectModel.Collection(Of ColorListBoxItem) and overrides the Set/Remove/InsertItem and ClearItems methods. In those methods, it adds the item to it's collection but also adds the item to the baseItems property of the owner ColorListBox. This is necessary because the ColorListBox won't draw any items in your own custom collection; only those in the MyBase.Items collection.
    vb.net Code:
    1. Protected Overrides Sub ClearItems()
    2.             MyBase.ClearItems()
    3.             _listBox.baseItems.Clear()
    4.         End Sub
    5.  
    6.         Protected Overrides Sub InsertItem(ByVal index As Integer, ByVal item As ColorListBoxItem)
    7.             MyBase.InsertItem(index, item)
    8.             _listBox.baseItems.Insert(index, item)
    9.         End Sub
    10.  
    11.         Protected Overrides Sub RemoveItem(ByVal index As Integer)
    12.             MyBase.RemoveItem(index)
    13.             _listBox.baseItems.RemoveAt(index)
    14.         End Sub
    15.  
    16.         Protected Overrides Sub SetItem(ByVal index As Integer, ByVal item As ColorListBoxItem)
    17.             MyBase.SetItem(index, item)
    18.             _listBox.baseItems(index) = item
    19.         End Sub

    Finally, the ColorListBox is owner drawn, so it overrides the OnDrawItem method. The listbox actually wants to draw the original items, but I simply force it to use the items from my own collection (by using their index), and draw them with the correct color and possibly with an image.




    As I said, this is the 'base' for a different ListBox control which I'll hopefully also complete shortly.

    I am not 100&#37; sure whether this method will always work (I am afraid the baseItems and Items might become 'de-synchronised' for some reason for example), but I hope it will work fine.


    Enjoy!
    Attached Files Attached Files

  2. #2
    Hyperactive Member
    Join Date
    Dec 2009
    Posts
    511

    Re: ListBox with custom items (colors, images, text alignment)

    I'm having real trouble with this.

    i added the control not a problem.

    i added your code above and got errors. do you have that image as an example still that i could look at?

  3. #3

    Thread Starter
    PowerPoster
    Join Date
    Apr 2007
    Location
    The Netherlands
    Posts
    5,070

    Re: ListBox with custom items (colors, images, text alignment)

    You don't need to add any code, the code is all in the vb file. If you added the control without problems then all you need to do is build the project and it will be in your toolbox like any other control.

  4. #4
    Hyperactive Member
    Join Date
    Dec 2009
    Posts
    511

    Re: ListBox with custom items (colors, images, text alignment)

    edit resolved ta
    Last edited by kayleigh; Mar 19th, 2010 at 11:56 AM.

  5. #5
    Fanatic Member TDQWERTY's Avatar
    Join Date
    Oct 2003
    Location
    Oporto & Leiria, Portugal / Luanda, Angola
    Posts
    968

    Re: ListBox with custom items (colors, images, text alignment)

    I'd like to detect clicked regions in each and every item from the ColorListBox, but i dunno what has to be done in this class of yours to accomplish that. Wouldn't you have any idea would you?
    Maybe creating an other method "ItemClickedSpot"? But then, how?

    Thanks

    Edit:
    Here's how i managed to do it...for this thread here: http://www.vbforums.com/showthread.php?t=615255


    vb.net Code:
    1. Imports System.ComponentModel
    2.  
    3. Public Class ColorListBox
    4.     Inherits ListBox
    5.  
    6.     Public Enum HotSpots As Integer
    7.         ITEM_IMAGE = 0
    8.         ICON1 = 1
    9.         ICON2 = 2
    10.         ICON3 = 3
    11.         DoubleClick = -1
    12.     End Enum
    13.  
    14.     Public Event ClickedHotSpot(ByVal Index As Integer, ByVal Spot As HotSpots, ByVal Tag As String)
    15.  
    16.     Public Shadows Sub ItemClickedSpot(ByVal sender As Object, ByVal e As System.Windows.Forms.MouseEventArgs) Handles Me.MouseDown
    17.  
    18.         If e.Button = MouseButtons.Left Then
    19.             If e.Clicks = 1 Then
    20.                 Select Case (e.Y - (Me.IndexFromPoint(e.X, e.Y) * Me.ItemHeight))
    21.                     Case 22 To 63
    22.                         Select Case e.X
    23.                             Case 94 To 126
    24.                                 RaiseEvent ClickedHotSpot(Me.IndexFromPoint(e.X, e.Y), HotSpots.ICON1, Me.Items.Item(Me.IndexFromPoint(e.X, e.Y)).Tag)
    25.                             Case 234 To 266
    26.                                 RaiseEvent ClickedHotSpot(Me.IndexFromPoint(e.X, e.Y), HotSpots.ICON2, Me.Items.Item(Me.IndexFromPoint(e.X, e.Y)).Tag)
    27.                             Case 374 To 406
    28.                                 RaiseEvent ClickedHotSpot(Me.IndexFromPoint(e.X, e.Y), HotSpots.ICON3, Me.Items.Item(Me.IndexFromPoint(e.X, e.Y)).Tag)
    29.                         End Select
    30.                 End Select
    31.  
    32.                 Select Case (e.Y - (Me.IndexFromPoint(e.X, e.Y) * Me.ItemHeight))
    33.                     Case 10 To 58
    34.                         Select Case e.X
    35.                             Case 14 To 56
    36.                                 RaiseEvent ClickedHotSpot(Me.IndexFromPoint(e.X, e.Y), HotSpots.ITEM_IMAGE, Me.Items.Item(Me.IndexFromPoint(e.X, e.Y)).Tag)
    37.                         End Select
    38.                 End Select
    39.  
    40.             End If
    41.             If e.Clicks = 2 Then
    42.                 RaiseEvent ClickedHotSpot(Me.IndexFromPoint(e.X, e.Y), HotSpots.DoubleClick, Me.Items.Item(Me.IndexFromPoint(e.X, e.Y)).Tag)
    43.             End If
    44.         End If
    45.     End Sub
    46. '...

    Implementing
    vb.net Code:
    1. Private Sub ColorListBox1_ClickedHotSpot(ByVal Index As Integer, ByVal Spot As ColorListBox.HotSpots, ByVal Tag As String) Handles ColorListBox1.ClickedHotSpot
    2.         MsgBox("Item number: " & Index + 0 & " - button: " & Spot.ToString & " TAG: " & Tag)
    3.     End Sub

    Suggestions will be very welcome
    Last edited by TDQWERTY; May 23rd, 2010 at 03:38 PM.
    ::Winamp 5.xx id3v2 & modern skin support::
    ::NetCF DataGrid Programatically Scroll Example::
    Don't forget to rate posts from those who helped you solving your problem, clicking on and rating it.

  6. #6

    Thread Starter
    PowerPoster
    Join Date
    Apr 2007
    Location
    The Netherlands
    Posts
    5,070

    Re: ListBox with custom items (colors, images, text alignment)

    Ok, a couple of suggestions:

    1. Instead of handling the MouseDown event of your own class, you should generally override the OnMouseDown method instead. It has the same end effect, but there are a few reasons why that approach is better (I can't remember any though...)

    2. You seem to be hardcoding the 'hotspots' by their X and Y values. What if you decide to shift an icon 2 pixels? Then you'd need to change your code... Not very desirable I think!

    What you can do instead is make use of the fact that my ListBox is using custom items; the ColorListBoxItem class. As of now, it has only three properties (Text, Color and Image), but you can add to that of course.

    Why not add a few Rectangle properties that represent your hotspots. You would have a property for every hotspot (Icon1, Icon2, Icon3, ItemImage, etc), representing the bounds of that hotspot.
    Then, in your MouseDown event (or OnMouseDown override, see point 1), you can retrieve the item that the mouse is clicked on, and then check if the click location is inside any of the hotspots:
    vb.net Code:
    1. For i As Integer = 0 To Me.Items.Count - 1
    2.    If Me.GetItemRectangle(i).Contains(e.Location) Then
    3.       ' This is your item
    4.       Dim item As ColorListBoxItem = Me.Items(i)
    5.  
    6.       If item.Icon1.Contains(e.Location) Then
    7.          RaiseEvent ClickedHotSpot(... Icon1)
    8.       ElseIf item.Icon2.Contains(e.Location) Then
    9.          RaiseEvent ClickedHotSpot(... Icon2)
    10.       'etc
    11.       End If
    12.  
    13.       ' We've already found our item so stop looking
    14.       Exit For
    15.    End If
    16. Next

    Now, if you want to shift/enlarge/whatever Icon2 (for example), you just change the Icon2 Rectangle property of the item, and your code still works.

    You can do the same in the OnMouseMove method and OnMouseUp method to simulate a button; change the border of the icon when the mouse is moving over the item, change it another way when the mouse is down, and change it back when the mouse is up.
    How you're going to implement that depends on how you're drawing the icons. I suppose you have edited the OnDrawItem method so that it draws the icons too? By the way, if you have, you can make use of the Icon1, Icon2, etc properties too. Just draw the icon using those Rectangles.

  7. #7
    Fanatic Member TDQWERTY's Avatar
    Join Date
    Oct 2003
    Location
    Oporto & Leiria, Portugal / Luanda, Angola
    Posts
    968

    Re: ListBox with custom items (colors, images, text alignment)

    Good point...the square around the icons!
    Thanks

    (important, ItemHeight must be 70)
    Here's how your class looks like in my implementation...i'm still twicking it so it's supposed to have a few bugs..
    Here's how it's looking at the moment
    Attached Images Attached Images  
    Attached Files Attached Files
    Last edited by TDQWERTY; May 24th, 2010 at 05:22 AM.
    ::Winamp 5.xx id3v2 & modern skin support::
    ::NetCF DataGrid Programatically Scroll Example::
    Don't forget to rate posts from those who helped you solving your problem, clicking on and rating it.

  8. #8
    Addicted Member iactulip's Avatar
    Join Date
    Feb 2009
    Location
    Dubai UAE
    Posts
    139

    Re: ListBox with custom items (colors, images, text alignment)

    nice

  9. #9
    Hyperactive Member
    Join Date
    Apr 2010
    Posts
    300

    Re: ListBox with custom items (colors, images, text alignment)

    Hey Nick.

    Mind explaining me as a mini-guide how to make my Icon + Text ListBox?
    Thanks.

  10. #10

    Thread Starter
    PowerPoster
    Join Date
    Apr 2007
    Location
    The Netherlands
    Posts
    5,070

    Re: ListBox with custom items (colors, images, text alignment)

    You have the source code, so why not take a look? If you have a specific question I'd be happy to answer it, but try to see it in the source code first, it's not very hard at all.

  11. #11
    Fanatic Member coolcurrent4u's Avatar
    Join Date
    Apr 2008
    Location
    *****
    Posts
    970

    Re: ListBox with custom items (colors, images, text alignment)

    i get error when i try to buld my solution with the control added


    Error 1 'down' is not a member of 'Resources'. ColorListBox2.vb 128 34
    Error 2 'up' is not a member of 'Resources'. ColorListBox2.vb 134 34
    Error 3 Type 'OwnerDrawnListBox' is not defined. ColorListBox2.vb 446 14
    Error 4 'CreateGraphics' is not a member of 'color_listbox.FontListBox'. ColorListBox2.vb 456 29
    Error 5 'ItemHeight' is not a member of 'color_listbox.FontListBox'. ColorListBox2.vb 457 9
    Error 6 'Font' is not a member of 'color_listbox.FontListBox'. ColorListBox2.vb 457 50
    Error 7 'Items' is not a member of 'color_listbox.FontListBox'. ColorListBox2.vb 464 25
    Error 8 'SelectedIndex' is not a member of 'color_listbox.FontListBox'. ColorListBox2.vb 464 34
    Error 9 sub 'OnPaint' cannot be declared 'Overrides' because it does not override a sub in a base class. ColorListBox2.vb 484 29
    Error 10 'OffScreen' is not a member of 'color_listbox.FontListBox'. ColorListBox2.vb 491 57
    Error 11 'BackColor' is not a member of 'color_listbox.FontListBox'. ColorListBox2.vb 492 49
    Error 12 'ClientRectangle' is not a member of 'color_listbox.FontListBox'. ColorListBox2.vb 492 64
    Error 13 'VScrollBar' is not a member of 'color_listbox.FontListBox'. ColorListBox2.vb 498 17
    Error 14 'VScrollBar' is not a member of 'color_listbox.FontListBox'. ColorListBox2.vb 498 41
    Error 15 Name 'DrawCount' is not declared. ColorListBox2.vb 498 63
    Error 16 'Items' is not a member of 'color_listbox.FontListBox'. ColorListBox2.vb 501 21
    Error 17 'Font' is not a member of 'color_listbox.FontListBox'. ColorListBox2.vb 502 33
    Error 18 'Items' is not a member of 'color_listbox.FontListBox'. ColorListBox2.vb 504 38
    Error 19 'SelectedIndex' is not a member of 'color_listbox.FontListBox'. ColorListBox2.vb 507 20
    Error 20 'ClientSize' is not a member of 'color_listbox.FontListBox'. ColorListBox2.vb 508 98
    Error 21 'VScrollBar' is not a member of 'color_listbox.FontListBox'. ColorListBox2.vb 508 124
    Error 22 'VScrollBar' is not a member of 'color_listbox.FontListBox'. ColorListBox2.vb 508 147
    Error 23 'ItemHeight' is not a member of 'color_listbox.FontListBox'. ColorListBox2.vb 508 172
    Error 24 'ForeColor' is not a member of 'color_listbox.FontListBox'. ColorListBox2.vb 513 29
    Error 25 'Items' is not a member of 'color_listbox.FontListBox'. ColorListBox2.vb 516 40
    Error 26 'ItemHeight' is not a member of 'color_listbox.FontListBox'. ColorListBox2.vb 517 line 24
    Error 27 'OffScreen' is not a member of 'color_listbox.FontListBox'. ColorListBox2.vb 521 line 30
    Error 28 sub 'OnPaintBackground' cannot be declared 'Overrides' because it does not override a sub in a base class. ColorListBox2.vb 528 line 29
    Error 29 'ClientSize' is not a member of 'color_listbox.FontListBox'. ColorListBox2.vb 529 line 62
    Error 30 'ClientSize' is not a member of 'color_listbox.FontListBox'. ColorListBox2.vb 529 line 87
    Programming is all about good logic. Spend more time here


    (vHost for Apache) (Generate pronounceable password) (Generate random number c#) (Filter array with another array)

  12. #12
    Fanatic Member
    Join Date
    Mar 2009
    Posts
    760

    Re: ListBox with custom items (colors, images, text alignment)

    i have no idea how to use this
    walkthrough please :
    1 how to add the control ?
    2 how to customize the control ?
    3 where do i put the code of post 1, is it neccesary ?

  13. #13

    Thread Starter
    PowerPoster
    Join Date
    Apr 2007
    Location
    The Netherlands
    Posts
    5,070

    Re: ListBox with custom items (colors, images, text alignment)

    Just add the file to your project and build the solution, then it should come up in the toolbox as usual. Drag it to your form and add items via the Items property.
    You don't need the code of post 1, that is already in the control, I just posted it to clarify how it works in case anyone was interested.

  14. #14
    Fanatic Member coolcurrent4u's Avatar
    Join Date
    Apr 2008
    Location
    *****
    Posts
    970

    Re: ListBox with custom items (colors, images, text alignment)

    i added the control just as Nick described, but the control is not the one in post #1, but post #7.
    Programming is all about good logic. Spend more time here


    (vHost for Apache) (Generate pronounceable password) (Generate random number c#) (Filter array with another array)

  15. #15
    Fanatic Member
    Join Date
    Mar 2009
    Posts
    760

    Re: ListBox with custom items (colors, images, text alignment)

    Quote Originally Posted by NickThissen View Post
    Just add the file to your project and build the solution, then it should come up in the toolbox as usual. Drag it to your form and add items via the Items property.
    You don't need the code of post 1, that is already in the control, I just posted it to clarify how it works in case anyone was interested.
    i downloaded : colorlistbox.vb
    how do i add it from vb.net ?
    you also said "then build the solution" what is that supposed to mean ? how ?
    project (on the menu) then what ?
    walkthrough please

  16. #16

    Thread Starter
    PowerPoster
    Join Date
    Apr 2007
    Location
    The Netherlands
    Posts
    5,070

    Re: ListBox with custom items (colors, images, text alignment)

    See your Solution Explorer toolwindow. Rightclick the project you want it to be used in and select "Add - Add Existing File". Choose the .vb file and add it. Then go to the Build menu and select Build solution (or rightclick the project and select Build from there). If the build succeeds (you can see this in the output window) when there are no errors then the control should appear at the top of the toolbox.

  17. #17
    Fanatic Member
    Join Date
    Mar 2009
    Posts
    760

    Re: ListBox with custom items (colors, images, text alignment)

    it worked

  18. #18
    Fanatic Member coolcurrent4u's Avatar
    Join Date
    Apr 2008
    Location
    *****
    Posts
    970

    Re: ListBox with custom items (colors, images, text alignment)

    Quote Originally Posted by TDQWERTY View Post
    Good point...the square around the icons!
    Thanks

    (important, ItemHeight must be 70)
    Here's how your class looks like in my implementation...i'm still twicking it so it's supposed to have a few bugs..
    Here's how it's looking at the moment
    hello, there is a bug in your control. when you click and item then click another, the previous doesn't return to the normal state.

    have you corrected this, can you tell me how?
    Programming is all about good logic. Spend more time here


    (vHost for Apache) (Generate pronounceable password) (Generate random number c#) (Filter array with another array)

  19. #19
    New Member
    Join Date
    Dec 2009
    Posts
    13

    Re: ListBox with custom items (colors, images, text alignment)

    nice work

    you thought about doing a listview version of this?

  20. #20
    PowerPoster formlesstree4's Avatar
    Join Date
    Jun 2008
    Location
    On the Internet
    Posts
    3,249

    Re: ListBox with custom items (colors, images, text alignment)

    Quote Originally Posted by moeb1us View Post
    nice work

    you thought about doing a listview version of this?
    I recommend you look at the ObjectListView.

  21. #21
    New Member
    Join Date
    Dec 2011
    Posts
    2

    Re: ListBox with custom items (colors, images, text alignment)

    i'm sorry but how do i add image into the item list. i can't do the below can you help me please. thanks

    Dim img As Image
    img = Image.FromFile("c:\temp\thumbnails\" & filename)
    ColorListBox1.Items.Add(img)

  22. #22
    New Member
    Join Date
    Dec 2011
    Posts
    2

    Re: ListBox with custom items (colors, images, text alignment)

    nevermind got it.

  23. #23
    Member
    Join Date
    Feb 2011
    Posts
    53

    Re: ListBox with custom items (colors, images, text alignment)

    how do you check for duplicate items, I'm adding folder path, i want to check for duplicate, I'm using this code, but there is a problem, Its say "Value of type 'String' cannot be converted to 'ColorListBoxItem'.", it usually work on the normal listbox but this one is not working

    If fFolder.ShowDialog = DialogResult.OK Then
    If Not lstFolder.Items.Contains(fFolder.SelectedPath) Then
    lstFolder.Items.Add(fFolder.SelectedPath, Color.Black, My.Resources.FolderHorizontal)
    End If
    End If

  24. #24
    PowerPoster formlesstree4's Avatar
    Join Date
    Jun 2008
    Location
    On the Internet
    Posts
    3,249

    Re: ListBox with custom items (colors, images, text alignment)

    Quote Originally Posted by rojaldearintok View Post
    how do you check for duplicate items, I'm adding folder path, i want to check for duplicate, I'm using this code, but there is a problem, Its say "Value of type 'String' cannot be converted to 'ColorListBoxItem'.", it usually work on the normal listbox but this one is not working

    If fFolder.ShowDialog = DialogResult.OK Then
    If Not lstFolder.Items.Contains(fFolder.SelectedPath) Then
    lstFolder.Items.Add(fFolder.SelectedPath, Color.Black, My.Resources.FolderHorizontal)
    End If
    End If
    If you look at the ColorListBoxItem class, you will see there is a Text property that you can use.

  25. #25
    Member
    Join Date
    Feb 2011
    Posts
    53

    Re: ListBox with custom items (colors, images, text alignment)

    can you show me how, I try DirectCast as a String, not work...

  26. #26
    PowerPoster formlesstree4's Avatar
    Join Date
    Jun 2008
    Location
    On the Internet
    Posts
    3,249

    Re: ListBox with custom items (colors, images, text alignment)

    Quote Originally Posted by rojaldearintok View Post
    can you show me how, I try DirectCast as a String, not work...
    I'm want to say no because the source code is literally in front of you.

    Code:
    ColorListBoxItem1.Text

  27. #27
    Member
    Join Date
    Feb 2011
    Posts
    53

    Re: ListBox with custom items (colors, images, text alignment)

    okay thanks, i will try it...

  28. #28
    New Member
    Join Date
    Dec 2013
    Posts
    1

    Exclamation Help with mouse cursor

    hi

    i just used your Colorlistbox and its great .

    but i have one problem the mouse cursor is fixed on Wait and i cant change it not with the propery and not in code.

    please help.

    thanks.

  29. #29
    New Member
    Join Date
    Feb 2014
    Posts
    8

    Re: ListBox with custom items (colors, images, text alignment)

    I tried but it's not working
    need help sir, i really need this colorlistbox to my program

  30. #30
    PowerPoster JuggaloBrotha's Avatar
    Join Date
    Sep 2005
    Location
    Lansing, MI; USA
    Posts
    3,817

    Re: ListBox with custom items (colors, images, text alignment)

    Quote Originally Posted by yvne View Post
    I tried but it's not working
    need help sir, i really need this colorlistbox to my program
    What error messages are you getting?
    What where the steps you've tried?

  31. #31
    New Member
    Join Date
    Feb 2014
    Posts
    8

    Re: ListBox with custom items (colors, images, text alignment)

    Quote Originally Posted by JuggaloBrotha View Post
    What error messages are you getting?
    What where the steps you've tried?
    Name:  Untitled.jpg
Views: 2247
Size:  193.0 KB

  32. #32
    PowerPoster JuggaloBrotha's Avatar
    Join Date
    Sep 2005
    Location
    Lansing, MI; USA
    Posts
    3,817

    Re: ListBox with custom items (colors, images, text alignment)

    Quote Originally Posted by yvne View Post
    Name:  Untitled.jpg
Views: 2247
Size:  193.0 KB
    Not sure why it's erroring like that in the ToolBox, when I have this control in my project's it shows at the very top (once I've compiled the project) and it has a purple gear icon. Maybe you could try removing it from your toolbox, recompile your project and see if it shows up at the very top.

    Regardless of the toolbox issue, when you manually add it to a form does it still function normally?

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  



Featured


Click Here to Expand Forum to Full Width

Survey posted by VBForums.