Home > View Post

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.


    <Style TargetType="{x:Type Controls:ScrollViewerThumbnail}">
        <Setter Property="Template">
                <ControlTemplate TargetType="{x:Type Controls:ScrollViewerThumbnail}">
                    <Viewbox DataContext="{TemplateBinding ScrollViewer}" Stretch="Uniform">
                                Width="{Binding Content.ActualWidth}"
                                Height="{Binding Content.ActualHeight}">
                                    <VisualBrush Visual="{Binding Content}" />
                                Background="{TemplateBinding HighlightFill}"
                                Width="{Binding ViewportWidth}"
                                Height="{Binding ViewportHeight}"
                                        X="{Binding HorizontalOffset}"
                                        Y="{Binding VerticalOffset}" />

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 =
        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!

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

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

Next we'll look at making the ScrollViewerThumbnail interactive.

Tags: WPF

Josh Post By Josh Twist
12:01 PM
03 Dec 2008

» Next Post: Making the ScrollViewerThumbnail interactive
« Previous Post: Nesting Regions (or creating fractals) with Prism

Comments are closed for this post.

© 2005 - 2022 Josh Twist - All Rights Reserved.