Question

I followed a tutorial to create a scrollbar template from this site: http://sachabarber.net/?p=122

But some reason, the Thumb control is backwards, When the content of the scrollviewer is at the top, the thumb as at the bottom, when I click the bottom repeat button thecontent in the scrollviewer scrolls properly, however the thumb goes in the up direction. and vice versa, when I click the top repeat button the thumb goes down.

Not sure what I did to make it do this…When I remove the control template I created, it goes back to the default style and the thumb is properly placed.

Below is the code for the control template. I have this template referenced to Scrollbar control and everything displays fine except for the thumb.

<ControlTemplate x:Key="kd_VertScrollBar" TargetType="{x:Type ScrollBar}">
                <Grid Width="15">
                    <Grid.RowDefinitions>
                        <RowDefinition MaxHeight="25"/>
                        <RowDefinition Height=".00001*"/>
                        <RowDefinition MaxHeight="25"/>
                    </Grid.RowDefinitions>

                    <Border Grid.RowSpan="3" CornerRadius="2" Background="#CCCCCCCC" /> 

                    <RepeatButton Grid.Row="0"
                        Background="Aqua"
                        Height="25"
                        ContentTemplate="{StaticResource RepeatButtonImage}"
                        Command="ScrollBar.LineUpCommand" />

                    <Track Grid.Row="1">
                        <Track.DecreaseRepeatButton>
                            <RepeatButton Style="{StaticResource ScrollBarPageButton}" Command="ScrollBar.PageUpCommand" />
                        </Track.DecreaseRepeatButton>

                        <Track.Thumb>
                            <Thumb Style="{StaticResource ScrollBarThumb}" Background="Blue" BorderBrush="Black" />
                        </Track.Thumb>

                        <Track.IncreaseRepeatButton>
                            <RepeatButton Style="{StaticResource ScrollBarPageButton}" Command="ScrollBar.PageDownCommand" />
                        </Track.IncreaseRepeatButton>
                    </Track>

                    <RepeatButton x:Name="ToBottom" Grid.Row="2"
                        Background="Aqua"
                        Height="25"
                        ContentTemplate="{StaticResource RepeatButtonImage}"
                        Command="ScrollBar.LineDownCommand" />

                </Grid>
            </ControlTemplate>

Any help would be greatly appreciated

Answer 1

You must set IsDirectionReversed to true on the Track, which is what the default templates does.