Listbox scrollbar style

Hi, I have been making a custom listbox and could do with a different vertical scroller style. Nothing drastic, I simply would like the same style as Xojo has in it’s Navigator listbox. i.e. I’d like to see the ‘scroller knob’ but without the background. I note that the knob is semi-transparent also and the list selection highlight scrolls underneath it.

None of the standard Xojo scrollbars seem to work like this. Any ideas? How I can do this. Surely it should be a simple property for all scrollbars by now ‘transparent background’?



The one in the navigator is drawn completely custom, on a canvas. If you want something like this it has to be created from scratch for now.

If someone could create a custom scroll bar that mimics OSX native one I for one would sure be interested in it :slight_smile:

I did a quick, very crude test with a scrollbar simulating Canvas on top of a Listbox and it appears to work well. I mean the scroll knob drawing didn’t disappear or flicker. I try to stay away from stacking controls but is this a viable way?

Drawing the scrollbar within the Listboxes CellBackgroundPaint and/or CellTextPaint might be possible too.

For mac I think you can make an NSScroller and put that on top like the Canvas.

The trouble I see with all 3 approaches is knowing when to update the scroller. Listbox Height, number of rows and scroll position all affect the scrollbar but how to best trap for them?

Thanks for the responses.

I’ve made progress with a custom canvas and the MBS plugins. I do something like this…
• hide the listbox scrollbar
• put a small canvas on the right edge of the listbox. Make it as thin as the new Mac OS X style scrollbars. Set the super to my new custom class
• I’ve also added a invisible scrollbar on the window. Set the height to that of the listbox.
• My class references the scrollbar
• I use the mouseWheel event in the listbox instance to work out how much to scroll the listbox. Each time that moves I send the deltaY value to the custom class
• the Scrollbar control has NSScrollerMBS. Each time the maximum or value is changed (these effect the size and position of the knob) - I pass the value to the referenced scrollbar and then use this to work out how big the Knob should be and the position
PartRect = Buddy.NSScrollerMBS.rectForPart(NSScrollerMBS.NSScrollerKnob)
• This tells me where to move the canvas to horizontally and the size. So I do.
• In the paint event I draw a roundrect with a alpha value.

It’s working well so far - no flicker.
I still have some more events to implement - up and down keys and also the drag event for the canvas.

I am not sure how much to adjust the scrollbar value each time the canvas moves by one pixel. Any ideas? (My maths isn’t great)



Is there some reason that one is drawn so thin? I wish I had a nickel for every time I grabbed for it and missed. The one library is much more functional, if not quite as nice looking.

The new thinner scrollbar on the navigator somewhat matches the latest Mac OS X look and feel so I guess that is where the design comes from. The ‘real’ Mac OS X scrollbar automatically expands when you move the mouse over it to make it easier to select.
I might even do that myself in the custom canvas I am working on (that and add the fade effects).

Right, I am aware of where the inspiration for the design came from. I’m just wondering why something you have to grab hundreds of times a day they would make so thin. A classic case for form over function.