WPF Custom Scroll Bar cuts off thumb

Question

I have created a custom scrollbar template (for a WPF 4 project) for styling all the scroll bars in my project. The problem I am having is that I have set my scrollbar thumb to a rectangle object and now the virtualization(re-sizing of the thumb based on the number of records in the listbox) no longer works and the rectangle gets cut off if I try to set an explicit height.

Here is the xaml I used to create the custom template.

<!-- CUSTOM SCROLL BAR ELEMENTS -->
<Style x:Key="ScrollBarLineButtonStyleUp" TargetType="{x:Type RepeatButton}">
    <Setter Property="Focusable" Value="False"/>
    <Setter Property="Margin" Value="1,0,1,4" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type RepeatButton}">
                <Grid Margin="1">
                    <Path Name="UpButton" Fill="{StaticResource ScrollBarGray}" Data="M 0 6 L 12 6 L 6 0 Z"/>
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsPressed" Value="true">
                        <Setter TargetName="UpButton" Property="Fill" Value="{StaticResource SelectedGray}" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

<Style x:Key="ScrollBarLineButtonStyleDown" TargetType="{x:Type RepeatButton}">
    <Setter Property="Focusable" Value="False"/>
    <Setter Property="Margin" Value="1,4,1,0" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type RepeatButton}">
                <Grid Margin="1">
                    <Path Name="UpButton" Fill="{StaticResource ScrollBarGray}" Data="M 0 0 L 6 6 L 12 0 Z"/>
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsPressed" Value="true">
                        <Setter TargetName="UpButton" Property="Fill" Value="{StaticResource SelectedGray}" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

<Style x:Key="ScrollBarPageButtonStyle" TargetType="{x:Type RepeatButton}">
    <Setter Property="IsTabStop" Value="False"/>
    <Setter Property="Focusable" Value="False"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type RepeatButton}">
                <Border Background="Transparent" />
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

<Style x:Key="ScrollBarThumbStyle" TargetType="{x:Type Thumb}">
    <Setter Property="IsTabStop" Value="False"/>
    <Setter Property="Focusable" Value="False"/>
    <Setter Property="Margin" Value="3,0,4,0" />

    <Setter Property="Background" Value="{x:Null}" />
    <Setter Property="BorderBrush" Value="{x:Null}" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Thumb}">
                <Rectangle Fill="{StaticResource ScrollBarGray}" RadiusX="4" RadiusY="4" Width="8" />
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

<Style x:Key="stuff" TargetType="{x:Type ScrollBar}">
    <Setter Property="ViewportSize" Value="10"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ScrollBar}">
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition MaxHeight="14"/>
                        <RowDefinition Height="*"/>
                        <RowDefinition MaxHeight="14"/>
                    </Grid.RowDefinitions>
                    <RepeatButton Grid.Row="0" Style="{StaticResource ScrollBarLineButtonStyleUp}" Command="ScrollBar.LineUpCommand" />
                    <Track Name="PART_Track" Grid.Row="1" IsDirectionReversed="True" ViewportSize="0">
                        <Track.DecreaseRepeatButton>
                            <RepeatButton Command="ScrollBar.PageUpCommand" Style="{StaticResource ScrollBarPageButtonStyle}"/>
                        </Track.DecreaseRepeatButton>
                        <Track.Thumb>
                            <Thumb Style="{StaticResource ScrollBarThumbStyle}"/>
                        </Track.Thumb>
                        <Track.IncreaseRepeatButton>
                            <RepeatButton Command="ScrollBar.PageDownCommand" Style="{StaticResource ScrollBarPageButtonStyle}"/>
                        </Track.IncreaseRepeatButton>
                    </Track>
                    <RepeatButton Grid.Row="3"  Style="{StaticResource ScrollBarLineButtonStyleDown}" Command="ScrollBar.LineDownCommand"/>
                </Grid>
            </ControlTemplate>
        </Setter.Value> 
    </Setter> 

</Style> 

I would greatly appreciate if anyone could help me restore the virtualization of my scrollbar thumb

JK

Answer 1

As written here: https://learn.microsoft.com/en-us/dotnet/framework/wpf/controls/how-to-customize-the-thumb-size-on-a-scrollbar

You would need to set the Track Viewport Size to NaN and then you can freely set Thumb's Height (or Width) as you like.

<Track Name="PART_Track" Grid.Row="1" IsDirectionReversed="True" ViewportSize="NaN">
   <Thumb Height="20"> <!--Or set the height in the style-->

Answer 2

Never did find the answer, so I used another template that was provided through codeproject and customized it to what I wanted. The following is the article I used as the base for my new scrollbar. I would also included an image of the finished product scrollbar but I don't have enough reputation points.

http://www.codeproject.com/Articles/41787/Creating-a-Blend-like-Scrollbar