Reputation: 8718
I'm trying to change the width of the thumb of a ScrollBar
with horizontal orientation.
I have this ControlTemplate
<ControlTemplate x:Key="HorizontalScrollBar" TargetType="{x:Type ScrollBar}">
<Grid >
<Grid.ColumnDefinitions>
<ColumnDefinition MaxWidth="100"/>
<ColumnDefinition Width="0.00001*"/>
<ColumnDefinition MaxWidth="100"/>
</Grid.ColumnDefinitions>
<Border Grid.ColumnSpan="3" CornerRadius="2" Background="#F0F0F0" />
<RepeatButton Grid.Column="0" Style="{StaticResource ScrollBarLineButton}" Width="100" Command="ScrollBar.LineLeftCommand" Content="M 16 0 L 16 32 L 0 16 Z" />
<Track Name="PART_Track" Grid.Column="1" IsDirectionReversed="False">
<Track.DecreaseRepeatButton>
<RepeatButton Style="{StaticResource ScrollBarPageButton}" Command="ScrollBar.PageLeftCommand" Width="50"/>
</Track.DecreaseRepeatButton>
<Track.Thumb>
<Thumb Style="{StaticResource ScrollBarThumb}" Margin="0,1,0,1" Background="{StaticResource NormalBrush}" BorderBrush="{StaticResource NormalBorderBrush}" />
</Track.Thumb>
<Track.IncreaseRepeatButton>
<RepeatButton Style="{StaticResource ScrollBarPageButton}" Command="ScrollBar.PageRightCommand" />
</Track.IncreaseRepeatButton>
</Track>
<RepeatButton Grid.Column="3" Style="{StaticResource ScrollBarLineButton}" Width="100" Command="ScrollBar.LineRightCommand" Content="M 0 0 L 16 16 L 0 32 Z"/>
</Grid>
</ControlTemplate>
And ScrollBarThumb
is:
<Style x:Key="ScrollBarThumb" TargetType="{x:Type Thumb}">
<Setter Property="SnapsToDevicePixels" Value="True"/>
<Setter Property="OverridesDefaultStyle" Value="true"/>
<Setter Property="IsTabStop" Value="false"/>
<Setter Property="Focusable" Value="false"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Thumb}">
<Border CornerRadius="2" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
The thumb now looks like this:
When I set Width="100"
in the <Thumb Style="{StaticResource ScrollBarThumb}" ...
, the thumb looks like it has been expanded, but as if something is hiding it:
Thanks.
Upvotes: 2
Views: 1131
Reputation: 8718
Thanks to grek40, I found the answer.
Adding ViewportSize="NaN"
to
<Track Name="PART_Track" Grid.Column="1" IsDirectionReversed="False">
shows the entire thumb and then setting its Width
property had the desired effect.
Upvotes: 0