ScrollViewer customization – Part 2

|

Carrying on from my previous post, I’ve added a little more functionality to the CyclicScrollViewer control. I have added code to handle horizontal scrolling and included an attached property for turning off the cyclic behaviour, making the control behave similar to a standard ScrollViewer . I have also created a sample application to show all these new features:

CyclicListBox

For the top two ListBoxes cyclic scrolling is enabled; so, if you click and hold the ScrollBar buttons the list goes around and around as you would expect. However, for the bottom ListBox the CyclicScrollViewer is in use, but the  CanContentCycle attached property has been set to False (the default is True).

Here’s the code for the attached dependency property:

public static readonly DependencyProperty CanContentCycleProperty =
    DependencyProperty.RegisterAttached(
        "CanContentCycle",
        typeof(bool),
        typeof(CyclicScrollViewer),
        new FrameworkPropertyMetadata(true) { Inherits = true });

The reason I wanted to show this code is that there is a gotcha when working with attached properties in this way: by that I mean when you apply them to parent containers as opposed to child objects (you apply a DockPanel’s attach properties to the elements it contains, as opposed to the containing element). In our case, we’re contained rather that containing. Anyway, ensure you replace the property metadata, by using a FrameworkPropertyMetadata instance, and set the Inherits to true; otherwise all you’ll see at runtime is the default value, no matter what you’d applied it in the code. Here’s how to use the property:

<ListBox ...
         l:CyclicScrollViewer.CanContentCycle="False" />

What you may notice if you download the sample application is that we’re still missing one key feature… keyboard support. Currently items only cycle if you use your mouse on the ScrollBar buttons, so that’s the next feature.

Update: Here's an XBAP version of the sample application for your viewing pleasure.

No comments: