How to increase scrollbar width in WPF ScrollViewer?

Question

I am working on a touch screen on a small device and the custom width of the scroll-bar is no good as one of my requirements is that everything needs to be doable by finger gestures.

How can I set the width of the WPF ScrollViewer scrollbar?

Note that I don't wanna change the width of all the scrollbars on the device (doable through windows settings) - only the ones in my app.

score 79 · Accepted Answer · edited Sep 27 '11 at 15:06

79

The ScrollBar template reaches out for system parameters to determine its width/height (depending on orientation). Therefore, you can override those parameters:

<ScrollViewer>
    <ScrollViewer.Resources>
        <sys:Double x:Key="{x:Static SystemParameters.VerticalScrollBarWidthKey}">100</sys:Double>
    </ScrollViewer.Resources>
</ScrollViewer>

edited Sep 27 '11 at 15:06

answered Aug 24 '09 at 09:12

Kent Boogaart

175,602
35
392
393

thanks - it looks like what I need! I have the scrollviewer in a page - when I try to apply your suggestion I get sys:Double was not found --> any clue why? not really familiar with WPF – JohnIdol Aug 24 '09 at 09:22
15

You need to map the sys namespace to System in mscorlib like this: xmlns:sys="clr-namespace:System;assembly=mscorlib" – Kent Boogaart Aug 24 '09 at 10:11

score 33 · Answer 2 · answered Sep 02 '13 at 00:27

Kent's answer can also be applied to easily all scrollbars in your application by placing it in your App.xaml resources, and by specifying the horizontal height key as well.

<Application
    xmlns:sys="clr-namespace:System;assembly=mscorlib"
    ...
>
    <Application.Resources>
        <sys:Double x:Key="{x:Static SystemParameters.VerticalScrollBarWidthKey}">50</sys:Double>
        <sys:Double x:Key="{x:Static SystemParameters.HorizontalScrollBarHeightKey}">50</sys:Double>
    </Application.Resources>
</Application>

score 32 · Answer 3 · answered Aug 15 '12 at 17:07

32

Here is a XAML solution:

<Style x:Key="{x:Type ScrollBar}" TargetType="{x:Type ScrollBar}">
    <Setter Property="Stylus.IsFlicksEnabled" Value="True" />
    <Style.Triggers>
        <Trigger Property="Orientation" Value="Horizontal">
            <Setter Property="Height" Value="40" />
            <Setter Property="MinHeight" Value="40" />
        </Trigger>
        <Trigger Property="Orientation" Value="Vertical">
            <Setter Property="Width" Value="40" />
            <Setter Property="MinWidth" Value="40" />
        </Trigger>
    </Style.Triggers>
</Style>

answered Aug 15 '12 at 17:07

Kulvir

524
4
5

4

What's this "IsFlicksEnabled" about? – Eduardo Wada Nov 16 '15 at 19:35
2

IsFlicksEnabled related to whether it can respond to gestures when used in a touchscreen setup: https://msdn.microsoft.com/en-us/library/system.windows.input.stylus.isflicksenabled(v=vs.100).aspx – lazarus Jan 17 '16 at 09:14

score 6 · Answer 4 · answered Apr 21 '20 at 10:22

And if you don't want to use XAML, you can do it in the Application's constructor, e.g.

using System.Windows;

public partial class App
{
    public App()
    {
        Resources.Add(SystemParameters.VerticalScrollBarWidthKey, 50d);
        Resources.Add(SystemParameters.HorizontalScrollBarHeightKey, 50d);
    }
}

How to increase scrollbar width in WPF ScrollViewer?

4 Answers4

Linked

Related