Silverlight 2.0 Custom Scroll Viewer with Mouse Wheel

Nikolay Nedev — Fri, 18 Apr 2008 08:08:00 GMT

In this blog post i will demonstrate how to customize Scroll Viewer and enable the mouse wheel functionality. I would be using the mix08 controls for silverlight 2.0. they are free and with open license.

Before start please download Mix08 Controls.

1. Extract them and then open MixControls, after that see generic.xaml file, and open it. Find and copy the ScrollViewer style, it should be something like:

2. Open your Silverlight project in VS 2008, and go to App.xaml and paste in the <Application.Resources> the style for the scroll viewer. You would end up with something like:

<Application xmlns="http://schemas.microsoft.com/client/2007"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

x:Class="SilverlightApplication5.App"

<Application.Resources>

</Application.Resources>

</Application>

3.Switch back to the MixControls project and do the same for ScrollBar Style and paste it in the same place.

4. Next step is to define resource keys for ScrollBar and ScrollViewer styles, and set them to ScrollBar key as Style in Scroll Viewer for VerticalScrollBarElement and HorizontalScrollBarElement.

Style="{StaticResource ScrollBarStyle}"

5. Open the file where you define ScrollViewer and assign it style.

6. Now it's time to customize our ScrollBar. Main elements which we can modify in the skin are VerticalThumbTemplate, HorizontalThumbTemplate, HorizontalIncrementTemplate, VerticalIncrementTemplate, HorizontalDecrementTemplate, VerticalDecrementTemplate, HorizontalRootElement, VerticalRootElement. Just change the colors of the brushes. But you could change elements like "Rectangle" and put other animations as well.

7. After the changes you can see my theme for ScrollBar

7. Now it's time to define Mouse Wheel for ScrollViewer, I have used the idea from Jeff Prosise's Blog blog post. What I do here is check if either end of the scrollable area has been reached. Also the wheel affects the horizontal ScrollBar if the vertical is hidden.

if (CustomScrollViewer.ComputedVerticalScrollBarVisibility == Visibility.Visible)

{

if (CustomScrollViewer.ScrollableHeight < this.Offset)

{

this.Offset = CustomScrollViewer.ScrollableHeight;

}

else if (this.Offset < 0)

{

this.Offset = 0;

}

CustomScrollViewer.ScrollToVerticalOffset(this.Offset);

}

8. Here is an example and of cource the source code.

Nikolay Nedev's blog

Silverlight 2.0 Custom Scroll Viewer with Mouse Wheel