ScrollViewer width to be narrower

Question

I want to override the width of the scroll bar of ScrollViewer in WPF. I manage to widen its width but when I tried to make it slimmer it didn't work. It seems that it has a minimum width that can't be overridden. Below is the code that I have.

Why is the code below does not work to make the width of the scrollbar slimmer?

Thanks

           <ScrollViewer.Resources>
                <Style TargetType="ScrollBar">
                    <Style.Triggers>
                        <Trigger Property="Orientation" Value="Vertical">
                            <Setter Property="Width" Value="20"/>
                        </Trigger>
                    </Style.Triggers>
                </Style>
            </ScrollViewer.Resources>

I tried to modify the ColumnWidth of the Scrollbar (Vertical) from the Control Template. Template you can take it from this link docs.microsoft.com/en-us/dotnet/framework/wpf/controls/…. Not sure if this helps you are not. — G K

Mark Feldman Mark Feldman · Accepted Answer · 2019-06-01T07:01:45

You need to edit the template.

Place the editor cursor inside the ScrollViewer tag and then in your properties window go to "Miscellaneous -> Template", click the little rectangle to the right and select "Convert to New Resource" from the popup menu:

That will create a new template containing, among other things, a scrollbar named PART_VerticalScrollBar. Put the cursor over that scrollbar tag and repeat the above to template that out as well, this will create a control template that starts like this:

    <ControlTemplate x:Key="ScrollBarControlTemplate1" TargetType="{x:Type ScrollBar}">
        <Grid x:Name="Bg" SnapsToDevicePixels="True">
            <Grid.RowDefinitions>
                <RowDefinition MaxHeight="{DynamicResource {x:Static SystemParameters.VerticalScrollBarButtonHeightKey}}"/>

Now set MaxWidth=10 (or whatever on that Grid element).

The only other problem you may encounter is that if you make it too small then the up/down arrows on the scrollbar buttons might disappear, that's because their default template places a margin around their path:

<Path x:Name="ArrowTop" Data="M0,4C0,4 ..etc ... " Fill="#FF606060" Margin="3,4,3,3" Stretch="Uniform"/>

This can be easily solved by removing that margin setting and/or replacing the path altogether with something else.

ScrollViewer width to be narrower

1 Answers