DesktopListBox - alternate row color

Getting Started
1

I’ve been searching the forum, the documentation and the sample databases for information on how to produce alternate row color in a DesktopListBox.
Found a couple of suggestions but nothing conclusive I got to work.

What is considered as best practise for coding alternate row color?

2

Did you try the sample code for DesktopListBox.PaintCellBackground?

3

In the event “PaintCEllBackground” on the ListBox, enter the following code :


If Color.IsDarkMode Then
  If (row mod 2) = 0 Then
    g.DrawingColor = ColBackListDm ' DarkMode
  Else
    g.DrawingColor = ColBackListDk ' Je ne laisse pas noir par défaut car on lit mal le texte
  End If
  g.FillRectangle(0, 0, g.Width, g.Height)
Else
  If (row mod 2) = 0 Then
    g.DrawingColor = ColBackListDf ' J'ai mis comme iTunes, avant c'était RGB(232,235,255)
    g.FillRectangle(0, 0, g.Width, g.Height)
    ' Else
    ' Reste à sa valeur (blanc)
  End If
End If

Return False

It is better to manage the DarkMode, I use constants in a Module which is insert as alias in all my projects. Like this I can change the color in all the listbox in all my projects changing only the constant.

Edit : Constants value :

 - ColBackListDm = &c292626
 - ColBackListDk = &c211E1E
 - ColBackListDf = &cF3F6FA
4

I use ColorGroups so I don’t have to worry about dark mode or light mode.

If Me.ListIndex = row Then
  // let Xojo draw selection
else
  
  If row Mod 2 = 0 Then
    g.ForeColor = ColorGroup.NamedColor("unemphasizedSelectedContentBackgroundColor")
  Else
    g.ForeColor = ColorGroup.NamedColor("alternatingContentBackgroundColors")
  End If
  
  g.FillRect 0, 0, g.Width, g.Height
End If
2 Likes
5

I do not do that and Xojo draw the selection…

Care to explain ?

6

Yes, as you see in my code I do not manage neither the case of the selected row :

If Me.ListIndex = row Then // let Xojo draw selection

and the row is selected.

For once it is not necessary to use a workarround in Xojo because it works well nativly!
Noooo, noooo, I’m kidding Xojo team. I wish you a nice week-end. :smiley: :laughing:

7

Thank you @Thomas_ROBISSON , @Mark_Sweeney and @Paul_Lefebvre for explanations and code samples.
Mentioning that this has to be executed in the context of a ‘PaintCellBackground’ event brought me on the right track (was too focused on filling the list box in the opening event)

I tried all 3 methods suggested, and all work:

  • the ‘Dark Mode’ method also works in dark mode, as it’s name suggests
  • the ‘Color Groups’ method also works in dark mode
  • the method from Xojo’s documentation works, but not in dark mode (uneven rows have white text on white background)

Thank you all again for help!

// draws alternate background color in ListBox
// methods as recommended in https://forum.xojo.com/t/desktoplistbox-alternate-row-color/70870

// DesktopListBox event: PaintCellBackground

// select here which method to use:
Var s As Integer = 0

Select Case s
Case 1
  // 'Dark Mode' method by Thomas Robisson
  // uses constants:
  // ColBackListDm = &c292626
  // ColBackListDk = &c211E1E
  // ColBackListDf = &cF3F6FA
  
  If Color.IsDarkMode Then
    If (row Mod 2) = 0 Then
      g.DrawingColor = ColBackListDm ' DarkMode
    Else
      g.DrawingColor = ColBackListDk ' Je ne laisse pas noir par défaut car on lit mal le texte
    End If
    g.FillRectangle(0, 0, g.Width, g.Height)
  Else
    If (row Mod 2) = 0 Then
      g.DrawingColor = ColBackListDf ' J'ai mis comme iTunes, avant c'était RGB(232,235,255)
      g.FillRectangle(0, 0, g.Width, g.Height)
      ' Else
      ' Reste à sa valeur (blanc)
    End If
  End If
  Return False
  
Case 2
  // 'Color Groups' method by Mark Sweeney
  // 'If Me.ListIndex = row Then' commented out because it threw an error
  
  //If Me.ListIndex = row Then
  // let Xojo draw selection
  //Else
  
  If row Mod 2 = 0 Then
    g.ForeColor = ColorGroup.NamedColor("unemphasizedSelectedContentBackgroundColor")
  Else
    g.ForeColor = ColorGroup.NamedColor("alternatingContentBackgroundColors")
  End If
  
  g.FillRect 0, 0, g.Width, g.Height
  //End If
  
Case 3
  // method from Xojo documentation, suggested by Paul Lefebvre
  // uneven rows are unredable in dark mode
  
  If row Mod 2 = 0 Then
    g.DrawingColor = &cf3f6fA
    g.FillRectangle(0, 0, g.Width, g.Height)
  End If
End Select
1 Like
8

This routine has been Frankensteined - it’s come from three different sources. Originally a Xojo example, then combined with a MBS example, and then finally the ColorGroup was used to eliminate having to check if IsDarkMode.

I never even thought to check if that was really needed.

I also subclass ListBoxes with this built in and added to my desktop templates so I never have to worry about remembering to add it to list boxers.