Why cant I get a Thumb to be larger on a styled scrollbar in WPF.

Question

I have taken the MSDN templates for styling a scrollbar and have been trying to apply my different styles (Image on each track repeater and separate Image on the thumb) but I am unable to make the thumb change size.

I have tried setting the Width on the Track.Thumb style and also in the ControlTemplate of the Thumb itself. For some reason the default size is only ever rendered even when the thumb actually occupies much more space. Does anyone know how to make the thumb render at the size that I want?

The XAML I am using for the styles is here:

 <Style x:Key="ScrollBarThumb" TargetType="{x:Type Thumb}">
        <Setter Property="Background" Value="Red" />
        <Setter Property="OverridesDefaultStyle" Value="True"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Thumb}">
                    <Image Source="sampleimg.png"  Stretch="Fill" />                        
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <ControlTemplate x:Key="ArfleHBar" TargetType="{x:Type ScrollBar}">
        <Grid >
            <Grid.ColumnDefinitions>
                <ColumnDefinition MaxWidth="18"/>
                <ColumnDefinition Width="0.00001*"/>
                <ColumnDefinition MaxWidth="18"/>
            </Grid.ColumnDefinitions>               
            <RepeatButton Grid.Column="0" Style="{StaticResource ScrollBarLineButton}" Width="18" Command="ScrollBar.LineLeftCommand" Content="M 4 0 L 4 8 L 0 4 Z" />
            <Track Name="PART_Track" Grid.Column="1" IsDirectionReversed="False" >                    
                <Track.DecreaseRepeatButton>
                    <RepeatButton  Style="{StaticResource ScrollBarPageButton}" Command="ScrollBar.PageLeftCommand" Width="100"/>
                </Track.DecreaseRepeatButton>
                <Track.Thumb>
                    <Thumb  Style="{StaticResource ScrollBarThumb}" Margin="0,1,0,1" Width="250" Padding="0,0,0,0">                            
                    </Thumb>
                </Track.Thumb>
                <Track.IncreaseRepeatButton> 
                    <RepeatButton  Style="{StaticResource ScrollBarPageButton}" Command="ScrollBar.PageRightCommand" Width="100" />
                </Track.IncreaseRepeatButton>                    
            </Track>
            <RepeatButton Grid.Column="3" Style="{StaticResource ScrollBarLineButton}" Width="18" Command="ScrollBar.LineRightCommand" Content="M 0 0 L 4 4 L 0 8 Z"/>
        </Grid>
    </ControlTemplate>

    <Style x:Key="ArfleBar" TargetType="{x:Type ScrollBar}">
        <Setter Property="SnapsToDevicePixels" Value="True"/>
        <Setter Property="OverridesDefaultStyle" Value="true"/>
        <Style.Triggers>
            <Trigger Property="Orientation" Value="Horizontal">
                <Setter Property="Width" Value="Auto"/>
                <Setter Property="Height" Value="18" />
                <Setter Property="Template" Value="{StaticResource ArfleHBar}" />
            </Trigger>                
        </Style.Triggers>
    </Style>

Answer 1

I don't know if it is the answer you are looking for, since I never tried to skin a scrollbar, but you can change the bar width/height by modifying some system properties :

<ScrollViewer>
    <ScrollViewer.Resources>
        <sys:Double x:Key="{x:Static SystemParameters.VerticalScrollBarWidthKey}">17</sys:Double>
        <sys:Double x:Key="{x:Static SystemParameters.HorizontalScrollBarHeightKey}">17</sys:Double>
    </ScrollViewer.Resources>

    ...

</ScrollViewer>