WPF - Horizontal ScrollBar thumb width
<p>I'm trying to change the width of the thumb of a <code>ScrollBar</code> with horizontal orientation.</p>

<p>I have this <code>ControlTemplate</code> </p>

<pre><code>    &lt;ControlTemplate x:Key="HorizontalScrollBar" TargetType="{x:Type ScrollBar}"&gt;
        &lt;Grid &gt;
            &lt;Grid.ColumnDefinitions&gt;
                &lt;ColumnDefinition MaxWidth="100"/&gt;
                &lt;ColumnDefinition Width="0.00001*"/&gt;
                &lt;ColumnDefinition MaxWidth="100"/&gt;
            &lt;/Grid.ColumnDefinitions&gt;
            &lt;Border Grid.ColumnSpan="3" CornerRadius="2"  Background="#F0F0F0" /&gt;
            &lt;RepeatButton Grid.Column="0" Style="{StaticResource ScrollBarLineButton}" Width="100" Command="ScrollBar.LineLeftCommand" Content="M 16 0 L 16 32 L 0 16 Z" /&gt; 
            &lt;Track Name="PART_Track" Grid.Column="1" IsDirectionReversed="False"&gt;
                &lt;Track.DecreaseRepeatButton&gt;
                    &lt;RepeatButton Style="{StaticResource ScrollBarPageButton}" Command="ScrollBar.PageLeftCommand" Width="50"/&gt;
                &lt;/Track.DecreaseRepeatButton&gt;
                &lt;Track.Thumb&gt;
                    &lt;Thumb Style="{StaticResource ScrollBarThumb}" Margin="0,1,0,1" Background="{StaticResource NormalBrush}" BorderBrush="{StaticResource NormalBorderBrush}" /&gt;
                &lt;/Track.Thumb&gt;
                &lt;Track.IncreaseRepeatButton&gt;
                    &lt;RepeatButton Style="{StaticResource ScrollBarPageButton}" Command="ScrollBar.PageRightCommand" /&gt;
                &lt;/Track.IncreaseRepeatButton&gt;
            &lt;/Track&gt;
            &lt;RepeatButton Grid.Column="3" Style="{StaticResource ScrollBarLineButton}" Width="100" Command="ScrollBar.LineRightCommand" Content="M 0 0 L 16 16 L 0 32 Z"/&gt;
        &lt;/Grid&gt;
    &lt;/ControlTemplate&gt;
</code></pre>

<p>And <code>ScrollBarThumb</code> is:</p>

<pre><code>    &lt;Style x:Key="ScrollBarThumb" TargetType="{x:Type Thumb}"&gt;
        &lt;Setter Property="SnapsToDevicePixels" Value="True"/&gt;
        &lt;Setter Property="OverridesDefaultStyle" Value="true"/&gt;
        &lt;Setter Property="IsTabStop" Value="false"/&gt;
        &lt;Setter Property="Focusable" Value="false"/&gt;
        &lt;Setter Property="Template"&gt;
            &lt;Setter.Value&gt;
                &lt;ControlTemplate TargetType="{x:Type Thumb}"&gt;                        
                    &lt;Border CornerRadius="2" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1" /&gt;
                &lt;/ControlTemplate&gt;
            &lt;/Setter.Value&gt;
        &lt;/Setter&gt;
    &lt;/Style&gt;
</code></pre>

<p>The thumb now looks like this:</p>

<p><a href="https://i.stack.imgur.com/1J0Pw.png" rel="nofollow"><img src="https://i.stack.imgur.com/1J0Pw.png" alt="enter image description here"></a></p>

<p>When I set <code>Width="100"</code> in the <code>&lt;Thumb Style="{StaticResource ScrollBarThumb}" ...</code>, the thumb looks like it has been expanded, but as if something is hiding it: 
<a href="https://i.stack.imgur.com/qnOI8.png" rel="nofollow"><img src="https://i.stack.imgur.com/qnOI8.png" alt="enter image description here"></a></p>

<p>Thanks.</p>