ListBoxes

  1. 7 months ago
    Edited 7 months ago

    I'm starting to realize that ListBox might be able to do much more than the basic examples offered in the docs..

    For example, I like alternating row colours. I also like a horizontal line between row items but the stock listbox properties don't have alternating row colours and the line are too 'severe' ..

    I like it 'softer' like this example.

    -image-

    I don't know how to make images show up in this forum.. this is the link
    https://www.dropbox.com/s/tv5qjgmeclvdsls/list.png?dl=0

    This is how I made it:

    Add event CellBackgroundPaint to your list box and then some code similar to this:

    ' ensure there are list items
    If Me.ListCount > 0 Then 
    
    	If IsDarkMode = False Then ' dark mode can make your color choices look bad so use different ones when dark mode is on.
    
    		' change the background color of alternate rows to light cyan when dark mode is off
    		If row Mod 2 = 0 Then
    			g.ForeColor = &cC0EDF4
    			g.FillRect(0, 0, g.Width, g.Height)
    		End If
    
    		' draw subtle light gray horizontal lines between the rows (much softer than the default listbox property)
    		g.ForeColor = &c808080 'e0e0eb
    		g.DrawLine(g.Height - 18 , 0, g.Width, 0)
    
    	Else
    
    		' draw dark grey horizontal lines between the rows when dark mode is on 
    		g.ForeColor = &c1f1f2e
    		g.DrawLine(g.Height - 18 , 0, g.Width, 0)
    
    	End If 
    
    End If 

    Edit (Paul): Fixed image URL.

  2. Paul L

    8 Feb 2019 Xojo Inc, Third Party Store http://docs.xojo.com

    Very nice! This page also covers a lot of the things you can do with ListBox:

    https://docs.xojo.com/UserGuide:Desktop_List_Box

  3. Julian S

    8 Feb 2019 Pre-Release Testers, Xojo Pro UK

    If you want to link an image from dropbox just take the download link:

    https://www.dropbox.com/s/tv5qjgmeclvdsls/list.png?dl=0

    and change the end part to

    raw=1

    https://www.dropbox.com/s/tv5qjgmeclvdsls/list.png?raw=1

    then surround it in the [img] tags by clicking the little button at the top right of the post.

    -image-

or Sign Up to reply!