Question

I am wondering if it is possible to dock the horizontal Scrollbar in the ScrollViewer control to the top rather than have it on the bottom? If not, would it be possible to use a whole separate Scrollbar control placed above the ScrollViewer and somehow assign the ScrollBar_Scroll events to it?

Thanks in advance!

Answer 1

Sure — here is the default template for ScrollViewer modified to transpose grid row 0 and grid row 1, which puts the horizontal scroll bar at the top:

<ControlTemplate x:Key="ScrollViewerHorizontalOnTopTemplate" TargetType="{x:Type ScrollViewer}">
            <Grid x:Name="Grid" Background="{TemplateBinding Background}">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="Auto"/>
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" MinHeight="17"/>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>
                <Rectangle x:Name="Corner" 
                    Fill="{DynamicResource {x:Static SystemColors.ControlBrushKey}}" 
                    Grid.Column="1" Grid.Row="0"/>
                <ScrollContentPresenter x:Name="PART_ScrollContentPresenter" Margin="{TemplateBinding Padding}" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" Grid.Column="0" Grid.Row="1" CanContentScroll="{TemplateBinding CanContentScroll}" CanHorizontallyScroll="False" CanVerticallyScroll="False"/>
                <ScrollBar x:Name="PART_VerticalScrollBar" 
                    Cursor="Arrow" 
                    Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" 
                    Grid.Column="1" Grid.Row="1" 
                    AutomationProperties.AutomationId="VerticalScrollBar" 
                    Maximum="{TemplateBinding ScrollableHeight}" 
                    Minimum="0" 
                    Value="{Binding VerticalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}" 
                    ViewportSize="{TemplateBinding ViewportHeight}"/>
                <ScrollBar x:Name="PART_HorizontalScrollBar" 
                    Cursor="Arrow" 
                    Grid.Column="0" 
                    AutomationProperties.AutomationId="HorizontalScrollBar" 
                    Maximum="{TemplateBinding ScrollableWidth}" 
                    Minimum="0" 
                    Value="{Binding HorizontalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}" 
                    Orientation="Horizontal" 
                    ViewportSize="{TemplateBinding ViewportWidth}"/>
            </Grid>
        </ControlTemplate>

Apply this template to your ScrollViewer and you should be all set.

Expression Blend makes tasks like this trivial — I recommend it.