Controllerizing the ScrollViewer Thumbnail

In the last post we created a ScrollViewer Thumbnail feature using a just a bit of Xaml and databinding magic.

Since it's a pretty useful feature, it makes sense to 'Controllerize' it and make it more reusable. Originally, I was just planning to do this using a UserControl as this is a very lightweight way to Controllerize a bit of Xaml. However, creating a full custom control isn't much harder so it makes sense go that route.

We need to add a bunch of files to our new class library to get this started. First, we need a simple class that inherits from Control

public class ScrollViewerThumbnail : Control
{
    static ScrollViewerThumbnail()
    {
        DefaultStyleKeyProperty.OverrideMetadata(typeof(ScrollViewerThumbnail), new FrameworkPropertyMetadata(typeof(ScrollViewerThumbnail)));
    }

    public ScrollViewer ScrollViewer
    {
        get { return (ScrollViewer)GetValue(ScrollViewerProperty); }
        set { SetValue(ScrollViewerProperty, value); }
    }

    // Using a DependencyProperty as the backing store for ScrollViewer. This enables animation, styling, binding, etc...
    public static readonly DependencyProperty ScrollViewerProperty =
    DependencyProperty.Register("ScrollViewer", typeof(ScrollViewer), typeof(ScrollViewerThumbnail), new UIPropertyMetadata(null));
    
}

There's only two things going on in there. One is a new dependency property of type ScollViewer. We'll use this to specify the ScrollViewer whose content we should thumbnail. The other part is a static constructor that overrides the default style key so we can find our default template.

Next, we need a Generic.xaml file that should sit inside a 'Themes' folder:

Note: the Generic.xaml file's build action must be set to Page in the properties panel.

And here's the contents of our Generic.xaml file - it's just a resource dictionary with a single style that targets our ScrollViewerThumbnail type.

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:Controls="clr-namespace:TheJoyOfCode.Wpf.Controls">

    <Style TargetType="{x:Type Controls:ScrollViewerThumbnail}">
        <Setter Property="Template">
            <Setter.Value>
                <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>
                            <Border
                                Background="{TemplateBinding HighlightFill}"
                                Width="{Binding ViewportWidth}"
                                Height="{Binding ViewportHeight}"
                                HorizontalAlignment="Left"
                                VerticalAlignment="Top">
                                <Border.RenderTransform>
                                    <TranslateTransform
                                        X="{Binding HorizontalOffset}"
                                        Y="{Binding VerticalOffset}" />
                                </Border.RenderTransform>
                            </Border>
                        </Grid>
                    </Viewbox>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

This style has only one Setter that sets the Template of the control to a new ControlTemplate. From then on the xaml (inside the ControlTemplate) is almost identical to the previous example with two notable differences.

1. The DataContext of the Viewbox is now a TemplateBinding instead of a normal binding. This directly targets the ScrollViewer dependency property we created earlier.

2. The Background of the highlight is also a TemplateBinding that uses the HighlightFill property of our ScrollViewerThumbnail. Mmmm, but we didn't have a HighlightFill property. We better create that now (inside the ScrollViewerThumbnail class):

public Brush HighlightFill
{
    get { return (Brush)GetValue(HighlightFillProperty); }
    set { SetValue(HighlightFillProperty, value); }
}

public static readonly DependencyProperty HighlightFillProperty =
    DependencyProperty.Register("HighlightFill",
        typeof(Brush),
        typeof(ScrollViewerThumbnail),
        new UIPropertyMetadata(new SolidColorBrush(Color.FromArgb(128,255,255,0))));

Done. Notice that we specified a default fill of transparent yellow. Cool.

We're almost done. One really important last thing: You must add the following code to your assemblyinfo.cs file so WPF knows where to go looking for our default template:

[assembly: ThemeInfo(
    ResourceDictionaryLocation.None, //where theme specific resource dictionaries are located
    //(used if a resource is not found in the page,
    // or application resource dictionaries)
    ResourceDictionaryLocation.SourceAssembly //where the generic resource dictionary is located
    //(used if a resource is not found in the page,
    // app, or any theme specific resource dictionaries)
)]

Using the new ScrollViewerThumbnail control

... couldn't be easier!

<Grid>
    <ScrollViewer x:Name="scrollViewer" HorizontalScrollBarVisibility="Auto">
        <!-- Your ScrollViewer content here as normal -->
    </ScrollViewer>
    <Controls:ScrollViewerThumbnail ScrollViewer="{Binding ElementName=scrollViewer}"
        Width="150" Height="150"
        HorizontalAlignment="Right" VerticalAlignment="Bottom"
        Margin="10" />
</Grid>

We just bind the ScrollViewer proprety of the ScrollViewerThumbnail to a ScrollViewer. Done.

Next we'll look at making the ScrollViewerThumbnail interactive.