Controlling ScrollViewer's vertical scrollbar height

Question

I need to make the vertical scrollbar a bit lower (shorter) because I need a space for a little button The button will be hovered over the ScrollViewer in the upper right corner. I would like to avoid separating the scrollbar out of the ScrollViewer just to add my button there.

It's a standard WPF ScrollViewer with

 <ScrollViewer Name="Scroller" CanContentScroll="True" VerticalScrollBarVisibility="Auto"  Height="{Binding ElementName=OuterContainer, Path=ActualHeight}" Width="{Binding ElementName=OuterContainer, Path=ActualWidth}">
            <Grid Name="Container" Margin="5,5,5,5"> 
            </Grid>
</ScrollViewer>

Is there any way I can style (or C# code) some hack which will free some space (it would be top margin, I guess) above the vertical scrollbar?

Answer 1

I would change the ScrollViewers style. According to the MSDN library http://msdn.microsoft.com/en-us/library/aa970847.aspx the default style is

<Style x:Key="LeftScrollViewer"
   TargetType="{x:Type ScrollViewer}">
  <Setter Property="OverridesDefaultStyle"
      Value="True" />
  <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>
          <Border Grid.Column="1"
                BorderThickness="0,1,1,1">
            <Border.BorderBrush>
              <SolidColorBrush Color="{DynamicResource BorderMediumColor}" />
            </Border.BorderBrush>
            <ScrollContentPresenter />
          </Border>
          <ScrollBar x:Name="PART_VerticalScrollBar"
                   Value="{TemplateBinding VerticalOffset}"
                   Maximum="{TemplateBinding ScrollableHeight}"
                   ViewportSize="{TemplateBinding ViewportHeight}"
                   Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}"/>
          <ScrollBar x: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>

So you could replace the vertical scroll bar as

<ScrollBar x:Name="PART_VerticalScrollBar"
                   Value="{TemplateBinding VerticalOffset}"
                   Maximum="{TemplateBinding ScrollableHeight}"
                   ViewportSize="{TemplateBinding ViewportHeight}"
                   Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}"
                     **Margin="0,12,0,0"**/>