Dark Mode + ListBox + Alternate Background colors

General
1

I followed the Documentation and used in CellBackgroundPaint Event:

If row Mod 2 = 0 Then
g.DrawingColor= &cD2FFF3
Else
g.DrawingColor= &cD2EDF5
End If
g.FillRectangle(0, 0, g.Width, g.Height)

… and because I have to use the dark mode, I saw no text, unless I select a Row.

How do I Draw the Text ?

The code below have an error:

// Draw the Text
Var the_Text As String

  the_Text = Me.CellValueAt(row,column) // Error here
  
  g.DrawingColor = &c000000 // Black
  g.DrawText the_Text,0,LB.RowHeight - 2
2

Take a look at ColorGroup:
https://documentation.xojo.com/api/graphics/colorgroup.html#colorgroup

or check if you are in DarkMode and change the DrawingColor (not use the same for light mode) to make sure your text shows.

3

Hi Alberto,

I read the ColorGroup, and saw nothing that can help me to draw my ListBox.Row…

Using Color.Black (instead of cmy…) is not related to the trouble.

The crashing line is:

the_Text = Me.CellValueAt(row,column)

I tried
If Row > 0

and

If RowCount > 0

But I still get an OutofBounds error…

4

I checked carefully, and found TextColor who is the only ionstruction that seems to apply.

Unfortunately, it only have a getter (I cannot change its value).

Now I have:

If IsDarkMode Then
   // But what do I wrote here ?
Else
  // And here ?
End
5

At last, I found something:


Function CellTextPaint(g As Graphics, row As Integer, column As Integer, x as Integer, y as Integer) Handles CellTextPaint as Boolean
  If IsDarkMode Then
    // Change the Text Color for Dark Mode
    g.DrawingColor = Color.Black
  Else
    g.DrawingColor = Color.White
  End
End Function

But I get hard time 'cause the doc where I get the tip says:

image
image1066×548 26.5 KB

But now, the selected row is … hard to be read…

6

Usually for Light Mode and Dark Mode compatibility developers choose light colors for Light and Dark colors for Dark.

You said ‘and because I have to use the dark mode’, is this for applications for your use only?

You are using light colors and want to use them in Dark Mode. The recommendation is to learn to use ColorGroup, assign the colors you put on your first post as the Light option and select other darker colors for the Dark Mode option. Using the color group you will not to do anything else (but selecte the color group) and depending if you are in Light mode the light colors will be used (the text will be dark) and if you are in Dark mode the darker colors will be used and the text will be light, so the contrast will be good.

But it seems that you are working on a program for you, and you need to use Dark Mode for some personal reason (age, eyesight, etc.).

If you are set for the light colors on your listbox, then you need to handle the text color (as you did according to your last message) but now you also need to check if the row is selected to write the text in a light color.

So the options here are:

  • use color group, assign the 2 colors for Light mode and use other dark colors for dark mode
  • use darker colors if you never going to use light mode in your program, so the text can be seen in dark mode when the row is selected or not
  • use the colors that you want, then handle the need for dark text when the row is not selected and light text when the row is selected

My guess is that you are spending your time on the last one and the only thing left is to handle the selected rows. Do you think you can figure that out or do you need help?

7

Yes. Same text size: standard mode / dark mode, I can better read the text in dark mode (or must change glasses for a decent read speed in standard mode).

I will read your answer later (I have to go back home now), and act accordingly.

Thank you.

8

Creating a ColorGroup

I selected your colors to create 2 color groups, called ColorGroup1 and ColorGroup2.
First I selected ColorGroup1 changed the selection from Named to Dual, selected the color on the left and enter your color definition D2FFF3, it has a opacity of 85%
image

then selected the color on the right, same definition D2FFF3 but opacity of 45%

Now ColorGroup2, D2EDF5, opacity of 85% for light, 45% for dark.

Now changed your CellBackgroudPaint Event to:

If row Mod 2 = 0 Then
  g.DrawingColor= ColorGroup1
Else
  g.DrawingColor= ColorGroup2
End If
g.FillRectangle(0, 0, g.Width, g.Height)

and this is how it looks in Light Mode:
image

and this in Dark Mode:
image

without changing anything else.

Now if you want to force the colors at 85% opacity (too bright for Dark Mode) then you need to handle the text colors (as you did with the CellTextPaint event). The problem with your code is that in Ligth Mode the listbox will look like this:
image

so is better to not change the default color for Light mode and let the system handle that (in other words remove the else … Color.White)

Without color group having the list box show the same alternate color in light and dark mode (after you handle the selected row text color), your listbox will look like this:

In normal mode (light)
image

In dark mode
image

I may not be available later today to help you if you can’t figure out how to use color.White on the selected row. I will add the code as spoiler. If you want to try yourself to figure it out don’t look at it :wink:

Text Paint code 
If IsDarkMode Then
  If Me.SelectedRowIndex = row Then
    g.DrawingColor = Color.White
  Else
    // Change the Text Color for Dark Mode
    g.DrawingColor = Color.Black
  End If
End

Hope this helps with the use of Color Group and your final goal.

1 Like