question

SteveWood-4261 avatar image
0 Votes"
SteveWood-4261 asked ·

[UWP][C#]How to use ScrollBar?

I am trying to use the Windows.UI.Xaml.Controls.ScrollBar but it won't display.

I've tried all kinds of stuff, but can't get it to display. Is there a trick to displaying a ScrollBar in a UWP page? What I'm trying to do is display the ScrollBar to the user so that they can use it to scroll up and down any content that I put in the Canvas. I am not happy with how the ScrollViewer works when a Canvas is placed inside of it and want to have full control of the Scrollbar without the overhead of a full ScrollViewer. I would like to avoid constructing my own ScrollBar using two buttons and a rectangle for the thumb inside of a rectangle for the scrollable region because at least I know those controls do display on a UWP page..


Update

Thank You. I actually included the xaml with my original post using the Code Sample formatting button, but that feature isn't working...my xaml code was removed. So, here is the xaml code but without the angle brackets:

  ScrollBar x:Name="thisScrollBar" Height="200" Width="20" Orientation="Vertical" Maximum="1000" Minimum="0" LargeChange="10" SmallChange="1" ViewportSize="10" IndicatorMode="MouseIndicator" Visibility="Visible" IsEnabled="True"

Part of the problem was that the IndicatorMode property defaults to None which prevents the ScrollBar from being visible even though the Visibility property is set to Visible. However, even with the IndicatorMode set to "MouseIndicator" the ScrollBar only displays a sliver of the Thumb until the user hovers over it with their mouse and soon after moving the mouse away it returns to just a sliver of the Thumb. Is there a way to keep it displayed? Is there a programmatic way such as a method or property to cause it to display? Also, with the IndicatorMode set to MouseIndicator will the ScrollBar never display for Tablet or XBox users because the IndicatorMode isn't set to TouchIndicator? Because when I set it to TouchIndicator it doesn't display even when hovering or clicking on the ScrollBar with the mouse.

You have been very helpful and I hope you can help me further, but please focus on the problem of getting the ScrollBar to display and avoid expanding the scope to events or other controls.

uwp-xaml
· 1
10 |1000 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Hi, since your reply is not an answer, but an update to your question, I put it in the question description.

0 Votes 0 · ·

1 Answer

RichardZhang-MSFT avatar image
0 Votes"
RichardZhang-MSFT answered ·

Hello,​

Welcome to our Microsoft Q&A platform!

Can you elaborate on the use of ScrollViewer? And, it would be very helpful if you could show the problematic code


For ScrollBar, there are four key settings:

  • Maximum: used to determine the height of the entire scrollable content

  • ViewportSize: used to determine the size of the visible window

  • Orientation: scroll direction

  • IndicatorMode: This is the key to displaying the ScrollBar

When using the keyboard and mouse, you can set the IndicatorMode to MouseIndicator (the default is None). After setting, the ScrollBar can be displayed.

But this does not mean that the ScrollBar can implement the scrolling function. You need to listen to the ScrollBar.Scroll event and implement the scrolling effect yourself according to the event parameters (this may be complicated).

If there is no special need, using ScrollViewer is a common practice.


Update

You can assign a value to ScrollBar.IndicatorMode through the way that AnalyticsInfo.VersionInfo.DeviceFamily judges the current device, or determine the device type when the pointer is moved over (listen the PointerEntered event).

 private void Grid_PointerEntered(object sender, PointerRoutedEventArgs e)
 {
     var pointer = e.GetCurrentPoint(sender as UIElement);
     if (pointer.PointerDevice.PointerDeviceType == Windows.Devices.Input.PointerDeviceType.Mouse)
     {
         TestScrollBar.IndicatorMode = ScrollingIndicatorMode.MouseIndicator;
     }
     // ... other case
 }

As for how to make the ScrollBar always appear, this is more difficult. The show / hide animation you see, and the internal switching logic, this is the internal implementation of the ScrollBar. You can find the default Style of ScrollBar in generic.xaml and try to modify some animation effects.

In the case of general labor, the address of generic.xaml is located at: your_sdk_drive:\Windows Kits\10\DesignTime\CommonConfiguration\Neutral\UAP\your_system_version\Generic. You can also find a default resource reference, move the cursor to the resource name, press F12 to jump to generic.xaml to find the style resource of TargetType =" ScrollBar "

Thanks.

· 5 · Share
10 |1000 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Thanks...you've been very helpful. It looks like there's no way to use a ScrollBar by itself because it won't stay visible without some serious hacking on it to circumvent it's behavior. I'll just build my own...I'm not a graphics artist so it won't look pretty, but at least it will work properly and won't cause the user to panic because they can't see how to properly scroll their content until they accidentally hover over an invisible control or hover over a strange sliver of color to see what's wrong with it (probably after wiping the screen several times to remove the apparent dirt on the screen).

FYI I already spent several weeks on the ScrollViewer about a year ago and there's no way to keep it from scrolling so that some of the content is partially obscured by the edges of the control it is scrolling. And, trying to force it to align content led to inconsistent behavior and jerky movement and required that I handle the manipulations manually which has serious limitations.

0 Votes 0 · ·

Hi, You can set the ScrollViewer.Padding to leave a 25px position for the scroll bar so that it does not block the content.

0 Votes 0 · ·

Hello, do you have any other questions about ScrollBar?

0 Votes 0 · ·

Hello, do you have any other issues that need to be resolved?

0 Votes 0 · ·

Hi, If you have any other questions, please feel free to contact us

0 Votes 0 · ·