Search code examples
wpfxamlscrollbarcontroltemplate

Clicking above or below thumb of scrollbar doesn't scroll

On a default ScrollBar, when clicking above or below the Thumb, the scrollbar moves in the direction of where you clicked.

I have a custom scrollbar template and this feature doesn't work anymore. I had a look at the scrollbar reference source, but don't seem to find anything that does this. So, how does this work?

Any idea on what I could be missing in my control template?

<ControlTemplate TargetType="{x:Type ScrollBar}">
   <Grid x:Name="Bg" SnapsToDevicePixels="true" Background="Transparent" Opacity="0.01">
      <Track x:Name="PART_Track" IsDirectionReversed="True" IsEnabled="{TemplateBinding IsMouseOver}">
         <Track.Thumb>
            <Thumb Style="{StaticResource DefaultVerticalScrollBarThumbStyle}"/>
         </Track.Thumb>
      </Track>
   </Grid>
   <ControlTemplate.Triggers>
      <DataTrigger Binding="{Binding IsMouseOver, RelativeSource={RelativeSource AncestorType={x:Type ScrollViewer}}}" Value="True">
         <DataTrigger.EnterActions>
            <BeginStoryboard>
               <Storyboard>
                  <DoubleAnimation Storyboard.TargetName="Bg" Storyboard.TargetProperty="Opacity" From="0.01" To="0.9" Duration="0:0:0.5"/>
               </Storyboard>
            </BeginStoryboard>
         </DataTrigger.EnterActions>
         <DataTrigger.ExitActions>
            <BeginStoryboard>
               <Storyboard>
                  <DoubleAnimation Storyboard.TargetName="Bg" Storyboard.TargetProperty="Opacity" From="0.9" To="0.01" Duration="0:0:0.5"/>
               </Storyboard>
            </BeginStoryboard>
         </DataTrigger.ExitActions>
      </DataTrigger>
   </ControlTemplate.Triggers>
</ControlTemplate>
Solution

  • If you search for information on control templates, better look at the documentation on that rather than reference source, it is easier to read and offers some examples.

    The area above and below the thumb of the ScrollBar are RepeatButtons. You have to add them to your Track with the DecreaseRepeatButton and IncreaseRepeatButton properties:

    <Track x:Name="PART_Track" IsDirectionReversed="True" IsEnabled="{TemplateBinding IsMouseOver}">
   <Track.DecreaseRepeatButton>
      <RepeatButton Command="ScrollBar.PageUpCommand" />
   </Track.DecreaseRepeatButton>
   <Track.Thumb>
      <Thumb Style="{StaticResource DefaultVerticalScrollBarThumbStyle}"/>
   </Track.Thumb>
   <Track.IncreaseRepeatButton>
      <RepeatButton Command="ScrollBar.PageDownCommand" />
   </Track.IncreaseRepeatButton>
</Track>

    Of course you should style those buttons to fit your design. By the way, the Up and Down buttons on the ScrollBar work the same way, you would add two RepeatButtons to your Grid, one above the Track and one below, but using the ScrollBar.LineUpCommand and ScrollBar.LineDownCommand.