Reputation: 151
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>
Upvotes: 2
Views: 874
Reputation: 16148
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.
Upvotes: 1