UI Interest Group Discussions

cancel
Showing results for 
Search instead for 
Did you mean: 

Custom Large Scrollbar XControl

So I had a need for a custom scrollbar that was large for a touch screen UI.  Yes I could look into modifying the system scrollbar sizes in the OS but that generally changes the size of everything and I really only wanted this for my application, since other programs will be on there, and they aren't going to be used in the touch interface.

 

So attached is my very rough first go at making a custom XControl that appears as a system scrollbar, but is larger.  This XControl doesn't have a lot of functionality but can be resized, and has two properties that can be set.  One for the maximum value, and the other for the Page Size, which is basically like the number of rows that would be displayed if this were a scrollbar on a table or something.  Minimum is set to 0 for now.  And the value will coerce to the min/max.  Also included is a basic demo that allows for setting the maximum, page size, and will continually read the position into an indicator.  I also fit it to a pane so the window can be taller, and the splitter can be moved to make the scrollbar wider.  Saved in 2015.  If you find it useful and can improve it please do, you might find the source a little hacky. 

 

The actual control is a 2D picture control.  And the image is just not seen because the scrollbar is on top.  This allows me to draw the image with the size I want, and then invoke the image zoom which will scroll each pixel which can now be many pixels in size.

 

Vertical Scroll Large.png

Message 1 of 11
(6,857 Views)

Pretty nice DIY large-size scrollbar. I wouldn't even have thought of using a picture Ctrl...

Thanks for sharing!

0 Kudos
Message 2 of 11
(6,798 Views)

I've experimented with pictures as a scrollbar before but could never get it complete enough to not also need a standard scrollbar.  The advantage of a picture I sought was the ability to add marks on the scrollbar (below the green is where data has been taken, and the black lines are User markers.

 

Marker Scroll Bar.png

0 Kudos
Message 3 of 11
(6,788 Views)

Just to be clear, my hacky and crappy solution I've shown, doesn't show the scrollbar as an image.  The scrollbar control you see is a legit scrollbar control that does function when the facade is not running.  But the scrollbar you see is owned by a 2D picture control.  I just customized the control to show the vertical scrollbar on the picture control, and then resized, and reconfigured things a bit.  Like telling the scrollbar that it needed to grow to the left, and right, if the owning control grew in those directions.  I experimented with several control and this was one of the few that I could make look the way I wanted.

 

That being said since the picture control isn't the image of the scrollbar being used, there is no extra customization of it visually other than the size.

0 Kudos
Message 4 of 11
(6,785 Views)

It would be nothing native out of LabVIEW, but you can HiRes-screenshot the "bar" within a system scrollbar and put it into a strictly type def'd numeric slide in the place of the slide marker itself. Of course this looks a bit crappy when drawn to an abnormally large size, but may it's a workaround for some use cases...

0 Kudos
Message 5 of 11
(6,777 Views)

I've heard several people make this suggestion, but have yet to see an attempt posted.  Besides one thing I think that would bother me is the behavior of the slider isn't the same as a scrollbar.  There is no increment and decrement buttons, and normally clicking in the grey area (just above or below the scrollbar) would page that amount up or down.  I think the slider has a different, but in some cases desirable, behavior.  I don't think my XControl jumps by a page amount, just up or down one, but I think some work could be done to make it jump by a larger value.

0 Kudos
Message 6 of 11
(6,774 Views)

This is awesome. I am trying to figure out why I cant make it narrower than 44 pixels. I am wondering if it is a labview limitation on the minimum window width?

I want one that is 30 pixels wide so this is so close, but not quite there.

Has anyone else looked at it? 

0 Kudos
Message 7 of 11
(5,234 Views)

I haven't looked into this but I would suspect there is a minimum pane size, or minimum control size of the picture control that I'm using which can't be too small.  The minimum pane size can be set, but I believe there is a new minimum that will be greater than 0.  And as for minimum control size, there isn't much that can be done about that either.  Sorry.  If you do come up with a solution feel free to post it.

0 Kudos
Message 8 of 11
(5,231 Views)

I did a bit of manipulation and was able to make it a bit more flexible.

I ended up customizing the Picture control on the facade and shrinking each of the components individually (in the "tweezer mode") and then could shrink the whole thing.

I also didn't fully understand that it was a picture control where the picture was just a single pixel thick and it is the built in slider for the picture control. 

Ultimately I got it working for me just how I need it.

Thanks again. 

0 Kudos
Message 9 of 11
(5,224 Views)

Oh yeah that makes sense, glad you could shrink it a bit. Yeah using the picture control was a bit of a hack but using it allowed to reuse lot of the built in functionality of the system scrollbar and didn't mean I had to do things like looking for mouse down events, or figuring out what part was clicked or if dragging was taking place, etc.

0 Kudos
Message 10 of 11
(5,201 Views)