1

I have a WPF application that runs on a touch screen computer. I'd like to change all of the scroll bars in the app to be much wider. Is there a way to do that globally?

tzerb
  • 1,433
  • 1
  • 16
  • 35

3 Answers3

3

Yo have to override the default template of scrollViewer to increase the width of vertical scrollbar. To apply the template across all your scrollbars put the override style in your App resources -

<Style TargetType="{x:Type ScrollViewer}">
  <Setter Property="OverridesDefaultStyle" Value="True"/>
  <Setter Property="HorizontalContentAlignment" Value="Left" />
  <Setter Property="VerticalContentAlignment" Value="Top" />
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="{x:Type ScrollViewer}">
        <Grid>
          <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition/>
          </Grid.ColumnDefinitions>
          <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition Height="Auto"/>
          </Grid.RowDefinitions>

          <ScrollContentPresenter Grid.Column="1"/>

          <ScrollBar Name="PART_VerticalScrollBar"
            Value="{TemplateBinding VerticalOffset}"
            Width="40"
            Maximum="{TemplateBinding ScrollableHeight}"
            ViewportSize="{TemplateBinding ViewportHeight}"
            Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}"/>
          <ScrollBar Name="PART_HorizontalScrollBar"
            Orientation="Horizontal"
            Grid.Row="1"
            Grid.Column="1"
            Value="{TemplateBinding HorizontalOffset}"
            Maximum="{TemplateBinding ScrollableWidth}"
            ViewportSize="{TemplateBinding ViewportWidth}"
            Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}"/>

        </Grid>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

You can set width of 'PART_VerticalScrollBar' to your desired width (say 40 as in example above).Placing this style under Application Resources (App.xaml) makes it applied across complete application.

Rohit Vats
  • 79,502
  • 12
  • 161
  • 185
  • Thanks. This works but it's showing the scroll bars on the left hand of the screen. Any idea how to get around that? – tzerb Aug 15 '12 at 14:14
  • I have updated the answer. Set `HorizontalContentAlignment to Left` and `VerticalContentAlignment to Top` in style. See if it works. – Rohit Vats Aug 15 '12 at 14:23
  • Also for default template refer to this link - http://msdn.microsoft.com/en-us/library/cc278065(v=vs.95).aspx – Rohit Vats Aug 15 '12 at 14:23
  • The first suggestion didn't work but I took the entire default template and changed the width and it's just what I needed. Thanks for the help! – tzerb Aug 15 '12 at 14:32
1

You need to create an Style inside of the Resources indicating the TargetType.

This style will be applied to all ScrollBars in your xaml file.

<Window.Resources>
    <Style TargetType="{x:Type ScrollBar}">
        ....
    </Style>
Dante
  • 3,208
  • 9
  • 38
  • 56
0

I know this is old but I applied Kent's answer from this post-https://stackoverflow.com/questions/1321247/how-to-increase-scrollbar-width-in-wpf-scrollviewer but put it in a resource dictionary.

<ResourceDictionary xmlns:sys="clr-namespace:System;assembly=mscorlib">
  <sys:Double x:Key="{x:Static SystemParameters.VerticalScrollBarWidthKey}">10</sys:Double>
  <sys:Double x:Key="{x:Static SystemParameters.HorizontalScrollBarHeightKey}">10</sys:Double>
//a bunch of styles
</ResourceDictionary>
bbedson
  • 133
  • 1
  • 8