Question

I have a requirement to retemplate the ScrollBar so that only one Template is required, instead of separate horizontal and vertical ones. The designer’s assertion is that the ScrollBar can be rotated on a Trigger (Orientation = Horizontal), and the commands swapped on the buttons.

Since the single Template is set up as a Grid with rows, the horizontal ScrollBar is stuck in the center of the view when rotated, showing just the left and right buttons. This seems to be because the height of the center * row is the height of the track area, so it won’t stretch. Binding in the Trigger to the height of something like the parent ScrollViewer ActualWidth causes the usual stackoverflow.

Any thoughts? I presume there’s a reason all the examples have a horizontal and vertical templates separate.

Answer 1

Never mind. I figured it out:

            <Trigger Property="Orientation" Value="Horizontal">

            <!-- Rotate the ScrollBar from Vertical to Horizontal -->
            <Setter Property="LayoutTransform" TargetName="gLayoutRoot">
                <Setter.Value>
                    <RotateTransform Angle="90"/>
                </Setter.Value>
            </Setter>

            <!-- Change Track Orientation back to Vertical -->
            <Setter TargetName="PART_Track" Property="Orientation" Value="Vertical"/>
            <Setter TargetName="PART_Track" Property="IsDirectionReversed" Value="false"/>

            <!-- Change the commands to do Horizontal commands -->
            <Setter Property="Command" Value="ScrollBar.LineRightCommand" TargetName="DecreaseRepeat"/>
            <Setter Property="Command" Value="ScrollBar.LineLeftCommand" TargetName="IncreaseRepeat"/>
            <Setter Property="Command" Value="ScrollBar.PageLeftCommand" TargetName="PageDown"/>
            <Setter Property="Command" Value="ScrollBar.PageRightCommand" TargetName="PageUp"/>

        </Trigger>

Then in the style set everything to Stretch or Auto.

        <Setter Property="HorizontalAlignment" Value="Stretch"/> 
    <Setter Property="VerticalAlignment" Value="Stretch"/>
    <Setter Property="Width" Value="Auto"/> 
    <Setter Property="Height" Value="Auto"/>

Fortunately one of those things that worked out.