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.