Friday, September 4, 2009

How to set WPF ListView or ScrollViewer Scrollbar width

A pretty common dirty hack to modify the scrollbars width is to set the OS value for scrollbars width to whatever you need in your app - this obviously sucks as not only your application will be affected.

In WPF you can override scrollbars width in both ListView and ScrollViewer controls pretty easily with the following XAML markup.

1) Include mscorlib with the sys prefix (or whatever prefix you want) in the page declaration:

<Page x:Class="AtlasPrototype.VehicleIdHistory"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:sys="clr-namespace:System;assembly=mscorlib"
DataContext="{Binding RelativeSource={RelativeSource Self}}"
Title="VehicleIdHistory">

2) Override vertical scrollbar width resource for the ScrollViewer (exact same for a ListView):

<ScrollViewer>
<ScrollViewer.Resources>
<sys:Double x:Key="{x:Static SystemParameters.VerticalScrollBarWidthKey}">60</sys:Double>
</ScrollViewer.Resources>
<-- other stuff -->
</ScrollViewer>

Sounds all cool and easy but I had to beg work hard on stackoverflow to get this figured out. Show due Respect.

3 comments:

Anonymous said...

Awesome hack, thanks! Works exactly the way I needed it to.

Vladimir said...

I've used this code to enlarge my scrollbar. But how can I make arrows on my Scrollbar buttons bigger? Looks not very fun - gigant scrollbar with tiny arrows in the middle

Anonymous said...

Thanks! Now i can use this on my touch screen project!