Is it possible to get OS X scrollbars on a ListBox

Tom_Catchesides · July 3, 2015, 5:07pm

Hey everyone,

A while back, Mac OS X changed its default scrollbar style to hide the scrollbar when it’s not being used, and to overlay a translucent scroll indicator that’s overlaid on top of the content when you’re actually scrolling.

Is it possible to get this type of scrollbar in Xojo’s ListBox control, instead of the default style that uses up that width all of the time?

Michel_Bujardet · July 3, 2015, 5:14pm

[quote=198475:@Tom Catchesides]Hey everyone,

A while back, Mac OS X changed its default scrollbar style to hide the scrollbar when it’s not being used, and to overlay a translucent scroll indicator that’s overlaid on top of the content when you’re actually scrolling.

Is it possible to get this type of scrollbar in Xojo’s ListBox control, instead of the default style that uses up that width all of the time?[/quote]

I believe you can get something similar by hiding the regular scrollbar, and show a canvas simulating the “new scrollbar” with a grey knob in the MouseWheel event, with a timer to hide it after a second.

Tom_Catchesides · July 3, 2015, 5:23pm

Thanks for the suggestion, Michel!

That approach had crossed my mind, but I was rather hoping that we might be able to tap the native scrollbar so that we benefit from any changes in its behaviour that Apple make in future.

Your suggestion would also allow us to get a similar effect on Windows, which would be a bonus except that I’m wary of ever overlaying controls on Windows because of redraw luckiness.

Michel_Bujardet · July 3, 2015, 5:29pm

[quote=198479:@Tom Catchesides]Thanks for the suggestion, Michel!

That approach had crossed my mind, but I was rather hoping that we might be able to tap the native scrollbar so that we benefit from any changes in its behaviour that Apple make in future.

Your suggestion would also allow us to get a similar effect on Windows, which would be a bonus except that I’m wary of ever overlaying controls on Windows because of redraw luckiness.[/quote]

ListBox is not a native control, which explains why you do not get it automatically on Mac. But I believe my approach would work.

On Windows indeed that would probably badly flicker. Also, Windows users would not expect such a thing. It is not at all usual.

Oliver_Osswald · July 3, 2015, 5:54pm

If plugins are an option then I believe Christian has several MBS examples on how to change style of a scrollbar.

https://www.monkeybreadsoftware.net/class-customnsscrollermbs.shtml

like the black one, for instance:

Axel_Schneider · July 3, 2015, 6:11pm

ListBox OverlayScrollbars by Massimo Valle

Albin_Kiland · July 3, 2015, 7:10pm

This works great! Just implemented it in an app
Thanks @Massimo Valle !

Richard_Berglund · July 3, 2015, 10:51pm

For $99, Imho the best listbox addon in Xojo.

Dataview

Tom_Catchesides · July 4, 2015, 7:46am

Awesome work, Massimo. I’m going to give that approach a go!

Michel_Bujardet · July 4, 2015, 11:36am

I just played with it. It is based on the same principle as what I was describing in the second post. Beautiful implementation.

To have the scrollbar appear the same way as in regular OSX apps, set the listbox with no scrollbar in the IDE, then in its MouseWheel event :

Function MouseWheel(X As Integer, Y As Integer, deltaX as Integer, deltaY as Integer) As Boolean
  me.ScrollBarVertical = True
  HideScrollBar.mode = Timer.ModeSingle
  HideScrollBar.enabled = False
  HideScrollBar.enabled = True
End Function

HideScrollBar is a Timer dragged over the Windows set to off with a period of 1000

It is reset to enabled = False so each time MouseWheel happens the period is pushed back. The last time MouseWheel takes place it will hide the scrollbar after one second, like it happens in for instance TextArea.

Here is the action of HideScrollBar :

Sub Action() ListBox1.ScrollBarVertical = False me.enabled = False End Sub

Axel_Schneider · July 4, 2015, 1:09pm

[quote=198577:@Michel Bujardet]I just played with it. It is based on the same principle as what I was describing in the second post. Beautiful implementation.

To have the scrollbar appear the same way as in regular OSX apps, set the listbox with no scrollbar in the IDE, then in its MouseWheel event :

Function MouseWheel(X As Integer, Y As Integer, deltaX as Integer, deltaY as Integer) As Boolean
  me.ScrollBarVertical = True
  HideScrollBar.mode = Timer.ModeSingle
  HideScrollBar.enabled = False
  HideScrollBar.enabled = True
End Function

HideScrollBar is a Timer dragged over the Windows set to off with a period of 1000

It is reset to enabled = False so each time MouseWheel happens the period is pushed back. The last time MouseWheel takes place it will hide the scrollbar after one second, like it happens in for instance TextArea.

Here is the action of HideScrollBar :

Sub Action() ListBox1.ScrollBarVertical = False me.enabled = False End Sub[/quote]

When I click the mouse on the scroll bar, the program crashes.

Tom_Catchesides · July 4, 2015, 2:29pm

I was experimenting with automatically showing and hiding regular ListBox scrollbars yesterday, too, and got intermittent hard crashes on Mac OS X. If I could reliably replicate it, I’d create a Feedback case.

Tom_Catchesides · July 4, 2015, 3:01pm

I’ve spent the last few hours trying to track down an odd ListBox oddity which is indirectly related to adopting Massimo’s extremely helpful scrollbar class, so I thought I’d report back on here in case anyone else encounters it.

My ListBoxes used custom painting code, and on OS X I was getting frustrated because in the CellBackgroundPaint event g.Width was 1px less than Me.Width. This was leaving a 1px wide artefact on the right hand edge of the ListBox that I couldn’t get rid of.

It turns out that programmatically turning off the ListBox.ScrollBarVertical property causes this. If I leave that turned off in the layout and modify OverlayScrollBars to not care about that setting, g.Width and Me.Width are the same. If I let the OverlayScrollBars class turn off the property in its Open event handler, I get that redraw bug.

I can replicate this in a sample project, so I’ll create a Feedback case.

Michel_Bujardet · July 4, 2015, 3:32pm

I could not reproduce the issue.

You may want to send a message to Massimo as well.

Tom_Catchesides · July 5, 2015, 6:27am

Just to be clear, my problem with intermittent crashes was from when I was experimenting with showing and hiding ListBox scrollbars myself: it had nothing to do with Massimo’s work.

Michel_Bujardet · July 5, 2015, 8:01am

OK. So indeed a Feedback is in order.

After playing with Massimo’s demo project, though, and in spite of it being quite polished, I would have probably done it differently. His programs depends on the values in ScrollBarVertical and ScrollBarHorizontal to display his OverlayScrollBar, so in effect, it complements the existing scrollbars rather than replace them. As a result it is not transparent, as the real scroll bars are in OS X.

And the bug you reported will exist as well.

I believe it would be better that the original scrollbars be off, and that a transparent canvas be overlaid when MouseWheel takes places in effect showing only the knob, as it happens throughout OS X.

If I find some time, I will try to do it that way.

Axel_Schneider · July 5, 2015, 3:16pm

[quote=198589:@Michel Bujardet] @Axel Schneider When I click the mouse on the scroll bar, the program crashes.

I could not reproduce the issue.[/quote]

Michael, can you please test this

Michel_Bujardet · July 5, 2015, 5:21pm

[quote=198662:@Axel Schneider]Michael, can you please test this

[/quote]

It does crash very badly. And this is visibly an issue with the code. Hopefully Massimo will be able to assist…

ChristopheDV · July 5, 2015, 6:20pm

Here is little project that includes native OSX scrollbars to a listbox with several declares. They are working natively so they are transparent, fade out, fade in, …

http://www.filedropper.com/nativeosxscrollerlistbox

Axel_Schneider · July 5, 2015, 6:33pm

but only with MBS ?