La bla bla
La bla bla

Reputation: 8718

WPF - Horizontal ScrollBar thumb width

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:

enter image description here

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: enter image description here

Thanks.

Upvotes: 2

Views: 1131

Answers (1)

La bla bla
La bla bla

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

Related Questions