Making the ScrollViewerThumbnail interactive

In the last post we took the simple ScrollViewer thumbnail and controllerized it. This time, we're going to make it interactive.

And, because WPF totally rocks, it's stupidly easy to do.

Normally, we'd do lots of mouse capture, remember the original location and the new location to calculate the delta etc etc. With WPF, we can simply use the Thumb control that fires a DragDelta event if the user makes a drag gesture over the control. Huzzah.

So, we need to quickly change the ScrollViewerThumbnail's template in Generic.xaml to look like this:

<ControlTemplate TargetType="{x:Type Controls:ScrollViewerThumbnail}">
    <Viewbox DataContext="{TemplateBinding ScrollViewer}" Stretch="Uniform">
        <Grid>
            <Rectangle
                Width="{Binding Content.ActualWidth}"
                Height="{Binding Content.ActualHeight}">
                <Rectangle.Fill>
                    <VisualBrush Visual="{Binding Content}" />
                </Rectangle.Fill>
            </Rectangle>
            <Thumb Name="PART_Highlight"
                Background="{TemplateBinding HighlightFill}"
                Width="{Binding ViewportWidth}"
                Height="{Binding ViewportHeight}"
                HorizontalAlignment="Left"
                VerticalAlignment="Top">
                <Thumb.RenderTransform>
                    <TranslateTransform
                        X="{Binding HorizontalOffset}"
                        Y="{Binding VerticalOffset}" />
                </Thumb.RenderTransform>
                <Thumb.Template>
                    <ControlTemplate TargetType="Thumb">
                        <Border Background="{TemplateBinding Background}" />
                    </ControlTemplate>
                </Thumb.Template>
            </Thumb>
        </Grid>
    </Viewbox>
</ControlTemplate>

Note that we've changed the highlight from a Border to a Thumb. We've named it PART_Highlight and I've given the thumb a ControlTemplate that is a simple Border (Thumbs can't have content).

Next, we need to find the PART_Highlight in our ScrollViewerThumbnail template and attach a handler to it's DragDelta event. We can't just use this.FindName("PART_Highlight") because it's part of a template. We have to override the OnApplyTemplate method of the ScrollViewerThumbnail class and use this.Template.FindName("PART_Highlight"):

private const string PART_Highlight = "PART_Highlight";

public override void OnApplyTemplate()
{
    base.OnApplyTemplate();

    var partHighlight = (Thumb)this.Template.FindName(PART_Highlight, this);
    partHighlight.DragDelta += partHighlight_DragDelta;
}

Next, we need to move the ScrollViewer when the DragDelta event occurs.

void partHighlight_DragDelta(object sender, DragDeltaEventArgs e)
{
    ScrollViewer.ScrollToVerticalOffset(ScrollViewer.VerticalOffset + e.VerticalChange);
    ScrollViewer.ScrollToHorizontalOffset(ScrollViewer.HorizontalOffset + e.HorizontalChange);
}

And we're done. Seriously! I'm blown away that this can be achieved with just four-ish lines of code.

I've uploaded an example (ClickOnce deployed that you can play with).... get it here:

>>> Download ClickOnce Demo <<<

PS - you can use the mouse wheel to change the size of the ScrollViewerThumbnail control too.