title: Custom Listbox Scrollbar style Issue
body: <p>I have the following xaml for WPF ListBox control. I have customized it so suit my UI requirements. However, the scrollbar thumb won't reach the top &amp; bottom of the scrollbar. Also the thumb won't scroll if I click elsewhere on the vertical scrollbar track. Please help me resolve the issues. Any help is appreciated.</p>
  
  <p>This is the snapshot of the ListBox control i have customized :</p>
  
  <p><img src="https://i.stack.imgur.com/urUT4.png" alt="enter image description here"></p>
  
  <pre><code>&lt;Window
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:Microsoft_Windows_Themes="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Aero"
  x:Class="MovieMessageBox.ListBoxStyles2"
  x:Name="Window"
  Title="ListBoxStyles2"
  Width="370" Height="200"&gt;
  
  &lt;Window.Resources&gt;
  
      &lt;SolidColorBrush x:Key="ListBorder" Color="#828790"/&gt;
      &lt;Style x:Key="ListBoxStyle1" TargetType="{x:Type ListBox}"&gt;
          &lt;Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.WindowBrushKey}}"/&gt;
          &lt;Setter Property="BorderBrush" Value="{StaticResource ListBorder}"/&gt;
          &lt;Setter Property="BorderThickness" Value="1"/&gt;
          &lt;Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/&gt;
          &lt;Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/&gt;
          &lt;Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/&gt;
          &lt;Setter Property="ScrollViewer.CanContentScroll" Value="true"/&gt;
          &lt;Setter Property="ScrollViewer.PanningMode" Value="Both"/&gt;
          &lt;Setter Property="Stylus.IsFlicksEnabled" Value="False"/&gt;
          &lt;Setter Property="VerticalContentAlignment" Value="Center"/&gt;
          &lt;Setter Property="Template"&gt;
              &lt;Setter.Value&gt;
                  &lt;ControlTemplate TargetType="{x:Type ListBox}"&gt;
                      &lt;Grid&gt;
                          &lt;Rectangle Fill="Pink" RadiusX="10" RadiusY="10" Opacity="0.195" /&gt;
                          &lt;Border CornerRadius="10" x:Name="Bd" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Padding="1" SnapsToDevicePixels="true"&gt;
                              &lt;ScrollViewer Focusable="false" Padding="{TemplateBinding Padding}" Template="{DynamicResource ScrollViewerControlTemplate1}"&gt;
                                  &lt;ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/&gt;
                              &lt;/ScrollViewer&gt;
                          &lt;/Border&gt;
                      &lt;/Grid&gt;
                      &lt;ControlTemplate.Triggers&gt;
                          &lt;Trigger Property="IsEnabled" Value="false"&gt;
                              &lt;Setter Property="Background" TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/&gt;
                          &lt;/Trigger&gt;
                          &lt;Trigger Property="IsGrouping" Value="true"&gt;
                              &lt;Setter Property="ScrollViewer.CanContentScroll" Value="false"/&gt;
                          &lt;/Trigger&gt;
                      &lt;/ControlTemplate.Triggers&gt;
                  &lt;/ControlTemplate&gt;
              &lt;/Setter.Value&gt;
          &lt;/Setter&gt;
      &lt;/Style&gt;
      &lt;ControlTemplate x:Key="ScrollViewerControlTemplate1" TargetType="{x:Type ScrollViewer}"&gt;
          &lt;Grid x:Name="Grid" Background="{TemplateBinding Background}"&gt;
              &lt;Grid.ColumnDefinitions&gt;
                  &lt;ColumnDefinition Width="*"/&gt;
                  &lt;ColumnDefinition Width="Auto"/&gt;
              &lt;/Grid.ColumnDefinitions&gt;
  
              &lt;ScrollContentPresenter x:Name="PART_ScrollContentPresenter" CanContentScroll="{TemplateBinding CanContentScroll}" CanHorizontallyScroll="False" CanVerticallyScroll="False" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Grid.Column="0" Margin="{TemplateBinding Padding}" /&gt;
              &lt;ScrollBar x:Name="PART_VerticalScrollBar" AutomationProperties.AutomationId="VerticalScrollBar" Cursor="Arrow" Grid.Column="1" Maximum="{TemplateBinding ScrollableHeight}" Minimum="0" Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" Value="{Binding VerticalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}" ViewportSize="{TemplateBinding ViewportHeight}" Style="{DynamicResource ScrollBarStyle1}"/&gt;              
          &lt;/Grid&gt;
      &lt;/ControlTemplate&gt;
      &lt;LinearGradientBrush x:Key="VerticalScrollBarBackground" EndPoint="1,0" StartPoint="0,0"&gt;
          &lt;GradientStop Color="#E1E1E1" Offset="0"/&gt;
          &lt;GradientStop Color="#EDEDED" Offset="0.20"/&gt;
          &lt;GradientStop Color="#EDEDED" Offset="0.80"/&gt;
          &lt;GradientStop Color="#E3E3E3" Offset="1"/&gt;
      &lt;/LinearGradientBrush&gt;
      &lt;SolidColorBrush x:Key="ScrollBarDisabledBackground" Color="#F4F4F4"/&gt;
  
      &lt;Style x:Key="ScrollBarButton" TargetType="{x:Type RepeatButton}"&gt;
          &lt;Setter Property="OverridesDefaultStyle" Value="true"/&gt;
          &lt;Setter Property="Focusable" Value="false"/&gt;
          &lt;Setter Property="IsTabStop" Value="false"/&gt;
          &lt;Setter Property="Template"&gt;
              &lt;Setter.Value&gt;
                  &lt;ControlTemplate TargetType="{x:Type RepeatButton}"&gt;
                      &lt;Microsoft_Windows_Themes:ScrollChrome x:Name="Chrome" RenderMouseOver="{TemplateBinding IsMouseOver}" RenderPressed="{TemplateBinding IsPressed}" SnapsToDevicePixels="true" Microsoft_Windows_Themes:ScrollChrome.ScrollGlyph="{TemplateBinding Microsoft_Windows_Themes:ScrollChrome.ScrollGlyph}"/&gt;
                  &lt;/ControlTemplate&gt;
              &lt;/Setter.Value&gt;
          &lt;/Setter&gt;
      &lt;/Style&gt;
      &lt;Style x:Key="VerticalScrollBarPageButton" TargetType="{x:Type RepeatButton}"&gt;
          &lt;Setter Property="OverridesDefaultStyle" Value="true"/&gt;
          &lt;Setter Property="Background" Value="Transparent"/&gt;
          &lt;Setter Property="Focusable" Value="false"/&gt;
          &lt;Setter Property="IsTabStop" Value="false"/&gt;
          &lt;Setter Property="Template"&gt;
              &lt;Setter.Value&gt;
                  &lt;ControlTemplate TargetType="{x:Type RepeatButton}"&gt;
                      &lt;Rectangle Fill="{TemplateBinding Background}" Height="{TemplateBinding Height}" Width="{TemplateBinding Width}"/&gt;
                  &lt;/ControlTemplate&gt;
              &lt;/Setter.Value&gt;
          &lt;/Setter&gt;
      &lt;/Style&gt;
      &lt;Style x:Key="ScrollBarThumb" TargetType="{x:Type Thumb}"&gt;
          &lt;Setter Property="OverridesDefaultStyle" Value="true"/&gt;
          &lt;Setter Property="IsTabStop" Value="false"/&gt;
          &lt;Setter Property="Template"&gt;
              &lt;Setter.Value&gt;
                  &lt;ControlTemplate TargetType="{x:Type Thumb}"&gt;
                      &lt;Rectangle Height="25" Width="8" Fill="White" RadiusX="5" RadiusY="5"&gt;
                          &lt;Rectangle.Effect&gt;
                              &lt;DropShadowEffect ShadowDepth="0" BlurRadius="10" Color="White" /&gt;
                          &lt;/Rectangle.Effect&gt;
                      &lt;/Rectangle&gt;
                  &lt;/ControlTemplate&gt;
              &lt;/Setter.Value&gt;
          &lt;/Setter&gt;
      &lt;/Style&gt;
      &lt;LinearGradientBrush x:Key="HorizontalScrollBarBackground" EndPoint="0,1" StartPoint="0,0"&gt;
          &lt;GradientStop Color="#E1E1E1" Offset="0"/&gt;
          &lt;GradientStop Color="#EDEDED" Offset="0.20"/&gt;
          &lt;GradientStop Color="#EDEDED" Offset="0.80"/&gt;
          &lt;GradientStop Color="#E3E3E3" Offset="1"/&gt;
      &lt;/LinearGradientBrush&gt;
      &lt;Style x:Key="HorizontalScrollBarPageButton" TargetType="{x:Type RepeatButton}"&gt;
          &lt;Setter Property="OverridesDefaultStyle" Value="true"/&gt;
          &lt;Setter Property="Background" Value="Transparent"/&gt;
          &lt;Setter Property="Focusable" Value="false"/&gt;
          &lt;Setter Property="IsTabStop" Value="false"/&gt;
          &lt;Setter Property="Template"&gt;
              &lt;Setter.Value&gt;
                  &lt;ControlTemplate TargetType="{x:Type RepeatButton}"&gt;
                      &lt;Rectangle Fill="{TemplateBinding Background}" Height="{TemplateBinding Height}" Width="{TemplateBinding Width}"/&gt;
                  &lt;/ControlTemplate&gt;
              &lt;/Setter.Value&gt;
          &lt;/Setter&gt;
      &lt;/Style&gt;
      &lt;Style x:Key="ScrollBarStyle1" TargetType="{x:Type ScrollBar}"&gt;
          &lt;Setter Property="Background" Value="Transparent"/&gt;
          &lt;Setter Property="Stylus.IsPressAndHoldEnabled" Value="false"/&gt;
          &lt;Setter Property="Stylus.IsFlicksEnabled" Value="false"/&gt;
          &lt;Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/&gt;
          &lt;Setter Property="Width" Value="{DynamicResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}"/&gt;
          &lt;Setter Property="MinWidth" Value="{DynamicResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}"/&gt;
  
          &lt;Setter Property="Template"&gt;
              &lt;Setter.Value&gt;
                  &lt;ControlTemplate TargetType="{x:Type ScrollBar}"&gt;
                      &lt;Grid x:Name="Bg" Background="{TemplateBinding Background}" SnapsToDevicePixels="true"&gt;
                          &lt;Border Width="1" Background="#FFFFFF" HorizontalAlignment="Center"/&gt;  
                          &lt;Track x:Name="PART_Track" IsDirectionReversed="true" IsEnabled="{TemplateBinding IsMouseOver}"&gt;
  
                              &lt;Track.Thumb&gt;
                                  &lt;Thumb Style="{StaticResource ScrollBarThumb}" Microsoft_Windows_Themes:ScrollChrome.ScrollGlyph="VerticalGripper"/&gt;
                              &lt;/Track.Thumb&gt;
                          &lt;/Track&gt;
                      &lt;/Grid&gt;
                      &lt;ControlTemplate.Triggers&gt;
                          &lt;Trigger Property="IsEnabled" Value="false"&gt;
                              &lt;Setter Property="Background" TargetName="Bg" Value="{StaticResource ScrollBarDisabledBackground}"/&gt;
                          &lt;/Trigger&gt;
                      &lt;/ControlTemplate.Triggers&gt;
                  &lt;/ControlTemplate&gt;
              &lt;/Setter.Value&gt;
          &lt;/Setter&gt;
          &lt;Style.Triggers&gt;
              &lt;Trigger Property="Orientation" Value="Horizontal"&gt;
                  &lt;Setter Property="Width" Value="Auto"/&gt;
                  &lt;Setter Property="MinWidth" Value="0"/&gt;
                  &lt;Setter Property="Height" Value="{DynamicResource {x:Static SystemParameters.HorizontalScrollBarHeightKey}}"/&gt;
                  &lt;Setter Property="MinHeight" Value="{DynamicResource {x:Static SystemParameters.HorizontalScrollBarHeightKey}}"/&gt;
                  &lt;Setter Property="Background" Value="{StaticResource HorizontalScrollBarBackground}"/&gt;
                  &lt;Setter Property="Template"&gt;
                      &lt;Setter.Value&gt;
                          &lt;ControlTemplate TargetType="{x:Type ScrollBar}"&gt;
                              &lt;Grid x:Name="Bg" Background="{TemplateBinding Background}" SnapsToDevicePixels="true"&gt;
                                  &lt;Grid.ColumnDefinitions&gt;
                                      &lt;ColumnDefinition MaxWidth="{DynamicResource {x:Static SystemParameters.HorizontalScrollBarButtonWidthKey}}"/&gt;
                                      &lt;ColumnDefinition Width="0.00001*"/&gt;
                                      &lt;ColumnDefinition MaxWidth="{DynamicResource {x:Static SystemParameters.HorizontalScrollBarButtonWidthKey}}"/&gt;
                                  &lt;/Grid.ColumnDefinitions&gt;
                                  &lt;RepeatButton Command="{x:Static ScrollBar.LineLeftCommand}" IsEnabled="{TemplateBinding IsMouseOver}" Style="{StaticResource ScrollBarButton}" Microsoft_Windows_Themes:ScrollChrome.ScrollGlyph="LeftArrow"/&gt;
                                  &lt;Track x:Name="PART_Track" Grid.Column="1" IsEnabled="{TemplateBinding IsMouseOver}"&gt;
                                      &lt;Track.DecreaseRepeatButton&gt;
                                          &lt;RepeatButton Command="{x:Static ScrollBar.PageLeftCommand}" Style="{StaticResource HorizontalScrollBarPageButton}"/&gt;
                                      &lt;/Track.DecreaseRepeatButton&gt;
                                      &lt;Track.IncreaseRepeatButton&gt;
                                          &lt;RepeatButton Command="{x:Static ScrollBar.PageRightCommand}" Style="{StaticResource HorizontalScrollBarPageButton}"/&gt;
                                      &lt;/Track.IncreaseRepeatButton&gt;
                                      &lt;Track.Thumb&gt;
                                          &lt;Thumb Style="{StaticResource ScrollBarThumb}" Microsoft_Windows_Themes:ScrollChrome.ScrollGlyph="HorizontalGripper"/&gt;
                                      &lt;/Track.Thumb&gt;
                                  &lt;/Track&gt;
                                  &lt;RepeatButton Grid.Column="2" Command="{x:Static ScrollBar.LineRightCommand}" IsEnabled="{TemplateBinding IsMouseOver}" Style="{StaticResource ScrollBarButton}" Microsoft_Windows_Themes:ScrollChrome.ScrollGlyph="RightArrow"/&gt;
                              &lt;/Grid&gt;
                              &lt;ControlTemplate.Triggers&gt;
                                  &lt;Trigger Property="IsEnabled" Value="false"&gt;
                                      &lt;Setter Property="Background" TargetName="Bg" Value="{StaticResource ScrollBarDisabledBackground}"/&gt;
                                  &lt;/Trigger&gt;
                              &lt;/ControlTemplate.Triggers&gt;
                          &lt;/ControlTemplate&gt;
                      &lt;/Setter.Value&gt;
                  &lt;/Setter&gt;
              &lt;/Trigger&gt;
          &lt;/Style.Triggers&gt;
      &lt;/Style&gt;
      &lt;Style TargetType="{x:Type ListBoxItem}"&gt;
          &lt;Setter Property="Foreground" Value="White" /&gt;
          &lt;Setter Property="Background" Value="Transparent"/&gt;
          &lt;Setter Property="HorizontalContentAlignment" Value="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/&gt;
          &lt;Setter Property="VerticalContentAlignment" Value="{Binding VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/&gt;
          &lt;Setter Property="Padding" Value="2,0,0,0"/&gt;
          &lt;Setter Property="Template"&gt;
              &lt;Setter.Value&gt;
                  &lt;ControlTemplate TargetType="{x:Type ListBoxItem}"&gt;
                      &lt;Border x:Name="Bd" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}" SnapsToDevicePixels="true"&gt;
                          &lt;ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/&gt;
                      &lt;/Border&gt;
                      &lt;ControlTemplate.Triggers&gt;
                          &lt;Trigger Property="IsSelected" Value="true"&gt;
                              &lt;Setter Property="Background" TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/&gt;
                              &lt;Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.HighlightTextBrushKey}}"/&gt;
                          &lt;/Trigger&gt;
                          &lt;MultiTrigger&gt;
                              &lt;MultiTrigger.Conditions&gt;
                                  &lt;Condition Property="IsSelected" Value="true"/&gt;
                                  &lt;Condition Property="Selector.IsSelectionActive" Value="false"/&gt;
                              &lt;/MultiTrigger.Conditions&gt;
                              &lt;Setter Property="Background" TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/&gt;
                              &lt;Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/&gt;
                          &lt;/MultiTrigger&gt;
                          &lt;Trigger Property="IsEnabled" Value="false"&gt;
                              &lt;Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/&gt;
                          &lt;/Trigger&gt;
                      &lt;/ControlTemplate.Triggers&gt;
                  &lt;/ControlTemplate&gt;
              &lt;/Setter.Value&gt;
          &lt;/Setter&gt;
      &lt;/Style&gt;
  
  &lt;/Window.Resources&gt;
  &lt;Window.Background&gt;
      &lt;ImageBrush ImageSource="@aleaf-1920.jpg"/&gt;
  &lt;/Window.Background&gt;
  
  &lt;Grid x:Name="LayoutRoot"&gt;
      &lt;ListBox HorizontalAlignment="Center" Height="150" Width="203" Style="{DynamicResource ListBoxStyle1}"&gt;
          &lt;ListBoxItem Content="India"/&gt;
          &lt;ListBoxItem Content="America"/&gt;
          &lt;ListBoxItem Content="Russia"/&gt;
          &lt;ListBoxItem Content="Germany"/&gt;
          &lt;ListBoxItem Content="France"/&gt;
          &lt;ListBoxItem Content="Australia"/&gt;
          &lt;ListBoxItem Content="Thailand"/&gt;
          &lt;ListBoxItem Content="England"/&gt;
          &lt;ListBoxItem Content="Holand"/&gt;
          &lt;ListBoxItem Content="Poland"/&gt;
          &lt;ListBoxItem Content="Lesotho"/&gt;
          &lt;ListBoxItem Content="Tanzania"/&gt;
      &lt;/ListBox&gt;
  &lt;/Grid&gt;
  &lt;/Window&gt;
  </code></pre>