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

Question

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.

Answer

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.

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

1 answer