Telerik blogs

Silverlight 2.0 Custom Scroll Viewer with Mouse Wheel

by Nikolay Atanasov
April 18, 2008 Web 0 Comments


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:



   <Style x:Key="ScrollBarStyle" TargetType="ScrollBar">

          <!-- Any other properties you want to set -->

          <Setter Property="Template">





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>

              <!-- Paste Here -->

         </Application.Resources>

     </Application>



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



  <!-- Default style for System.Windows.Controls.Primitives.ScrollBar -->

      <Style TargetType="ScrollBar">



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 x:Key="ScrollBarStyle" TargetType="ScrollBar">



  <Style x:Key="ScrollViewerStyle" TargetType="ScrollViewer">





   Style="{StaticResource ScrollBarStyle}"  





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



    <ScrollViewer Width="400" Height="500" x:Name="CustomScrollViewer" Style="{StaticResource ScrollViewerStyle}" >





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 the source code.

XAML
About the Author

Nikolay Atanasov

 was Product Manager in Telerik AppPrototyper Team.

Comments

Comments are disabled in preview mode.