Search code examples
c#uwpscrollbaruwp-xamlcustomscrollview

How to Create a Custom Scrollbar in UWP?

I need to create a custom Scrollbar in UWP ? But I can't find any clear logic to calculate Scrollbar thumb width and Position. What I have tried ?

ThumbWidth=(VisibleLength/TotalLength)*ScrollRegionWidth;
ThumbPosition=(ScrollLeft/TotalLength)*ScrollRegionWidth;

where,

VisibleLength -> viewable area width  
TotalLength -> Total Content width  
ScrollRegionWidth -> Scrollbar width - (2 x ArrowWidth)  (or) Thumb Track width
ScrollLeft -> how much content scrolled !!

Is it correct ? I tried like this . But the scrollbar thumb won't goes to end of thumb track while my whole content is scrolled to end !

I need to create a custom Scrollbar and how to do it ? I need complete logic for thumb width and position .

Solution

  • How to Create a Custom Scrollbar in UWP?

    ThumbWidth=(VisibleLength/TotalLength)*ScrollRegionWidth;

    Your first line is correct. and you could verify it with VisibleLength = TotalLength, then ThumbWidth will fill all the ScrollRegion.

    ThumbPosition=(ScrollLeft/TotalLength)*ScrollRegionWidth;

    But the second line looks not correct, Thumb's start position should be left top, the ScrollRegion should be (ScrollRegionWidth - ThumbWidth).

    ThumbPosition=(ScrollLeft/TotalLength)*(ScrollRegionWidth-ThumbWidth);