True alternating row backgrounds for macOS Dark Mode

I have finally figured out and prototyped code to display true alternating row backgrounds for a Xojo Listbox. Using the cellbackgroundPaint event on Dark Mode clearly illustrates the the Xojo Listbox is not a native control.

However it’s all moot because I don’t know when the content is being scrolled, so the backgrounds easily come out of line with the content, which only makes matters worse IMHO.

So I’ve added a feature request for a scroll event on a listbox. If you’d like to be able to use true alternating row backgrounds on a Xojo listbox, please add as a favorite or through some weight behind it.

<https://xojo.com/issue/61217>

Why are you unable to use row mod 2 to choose one or the other color?

Edit: ah, you’re not using CellBackgroundPaint.

When in light mode painting tin the cellbackgroundPaint event shows no major difference.

However no matter what I try in Dark Mode, it simply doesn’t match, even when using pure NS functions (removing color rasterization). I have managed to modify my code so that it is closer, but it is still wrong.

What is the difference between true alternating row backgrounds and the false one? Why not simply use the Cocoa listbox if you need one? Even if the colors aren’t the “true” colors do you think your users will care?

The colors in Dark Mode.

I don’t really care if customers care or not, I care that it doesn’t look right.

I want to use alternating rows in other parts of my interface where I am not using a listbox, so I do want to get it right (if I can).

4 Likes

Please show us some screenshots what you mean. And ask your customers if they care or not.

Why? If he cares? :slight_smile:

Sam is a perfectionist. Nothing wrong with it - just much work.

2 Likes

Huh???

Yeah I’m confused too.

As far as I’m aware, getting the colors right requires first getting the window background color right, because Xojo’s is not. Then use ClearRect in CellBackgroundPaint of a Listbox with Transparent turned on, and then you can draw the system-supplied row colors as-is.

Even not fixing Xojo’s window color gets pretty close.

Apologies, the window color issue is just desktop tinting. So scratch all that. Still, the trick is getting the background correct first, and I’m not quite sure how to do that.

I don’t use the Xojo Listbox anymore. I use the NSTableView class made by Thomas Tempelman. It’s the only correct choice if you need a decent and native ‘listbox’ for macOS.
It’s super fast, smooth scrolling, correct macOS behaviour and has way more to offer.

@Thomas : it would be awesome if you implement grouping. :wink:

2 Likes

+1 for NSTableView.

@ChristophD: what do you mean with grouping? There is also a hierarchical version in the examples.

1 Like

With NSTableView you can have groups like you have with iOS. You can then fold/unfold groups. Would be awesome to add this.
I have little experience with declares etc… (read: too difficult for me to add this myself).

1 Like

I’m probably the only one who uses her phone only as navigation and as night light. How does the grouping look like?

1 Like

Curiously, your mentioning me did not flag me in any way. I only saw your comment by accident.

And to answer your request: Probably not going to happen. Maybe someone else takes on this task. That’s why it’s open source :slight_smile:

2 Likes

I’ve finally wrapped the code into something useful, which can demonstrate the problem.

On the left is a Xojo list box “Colorized” as best I can to match the OS. On the right is a control that I’m building which is using the technique I discovered.

You can test it yourself by downloading the following.
https://www.ohanaware.com/appkit/trueAlternatingRowColors10Development.zip

If you don’t want to switch your system into Dark Mode, click on the Help Icon in the top right and it will switch it for this window. Drag the window around the screen and it adopts color from your desktop picture (the Big Sur desktop image REALLY illustrates the problem).

Please go easy on me, this is only the second draft of this control, I’m aware the background rows don’t animate with the contents, I’ve yet to discover a solution for it, but hey at least they scroll together!

2 Likes

Is the right part a NSTableView?

Nope, its a 100% pure custom control.

I think I might have a plan as to how I can bring this to a regular Listbox… It conflicts with the other functionality I’d like to add, such as overlay scrollbars and elastic scrolling… So some more time working on the design can help.

Ideally, I’d love to have the opportunity to modernize the Listbox myself… Rather than creating hacks and patches to make it feel modern.