Silverlight ScrollBar with Blend Style


intermediate

note: This post is a re-edited version from an old one I wrote in my former blog, reviewed and adapted to current technology changes.

download download the sample code.

X

The goal for this tutorial is to show you how to change the default style of the ScrollBar control in Silverlight to look and behave similar to the one found in Expression Blend.

This post as many tutorial style posts is a bit long and, although, it might not be for everybody to read through it, if you are really interested in learning I hope you make it to the end.

Styling controls in Silverlight is an easy task; there are some concepts to grasp, but once that is accomplished the rest is very easy. To create a Silverlight application you can use either, Visual Studio or Expression Blend. Although in the latest releases of Visual Studio more and more Blend features have been ported to its designer.

Expression Blend started as part of Expression Blend Studio, a suite of applications targeted for graphical designers. Nowadays, Blend is a companion application for Visual Studio, to handle complex scenarios that deal mostly with visual changes in controls that involves styling and motion. Although Blend is targeted for graphical designers to integrate their work into applications that use XAML, consisting of Windows Presentation Foundation [WPF], Silverlight [SL] and Windows Phone [WP]; it is a very sophisticated editor to play with, and I personally recommend to every XAML developer to feel comfortable using it. Actually after a while you are going to depend on it for a lot of tricks.

Figure 1 – Blend ScrollBar

Let’s start by getting familiar with the task at hand. The following screenshot belongs to Blend for Visual Studio 2013, the interface of Blend has been very consistent since its inception, and in this case the ScrollBar hasn’t change much, at least not from the original post which was based on version 4. For this post the implementation will be updated to Silverlight 5.

The first step is to understand the elements that compose the ScrollBar control. You can use a graphic editor tool and capture a screenshot like the one above and start analyzing aspects such as colors used and dimensions for every piece and visual states of the control.


Control Breakdown Structure

The User Interface [UI] of a ScrollBar control is composed of the following pieces:

  • 1 container area.
  • 2 small buttons (increase and decrease).
  • 2 big buttons (increase and decrease).
  • 1 movement thumb.

Some of these pieces are easy to identify, you can see them in the following figure.

Figure 2 – ScrollBar Pieces

Container Area

This is a rectangle with a fixed width of 17 pixels for a vertical ScrollBar or a height of 17 pixels for a horizontal one; the other dimension depends on the size of the content or can be set by the user.

Small Increase and Decrease Buttons

These buttons have the goal to allow a one-step movement of the content affected by the ScrollBar, they are usually located on the extremes of the bar.

Each button is a rectangle of 17 pixels wide and 17 pixels tall, and the internal arrow point is an isosceles triangle with base of 7 pixels and height of 7 pixels. For the different buttons is just a matter of rotating the triangle.

Big Increase and Decrease Buttons

These buttons do not have any visual style, their goal is to allow the user to move the content with big steps; the width (or height for a horizontal bar) matches that of the container area.

Movement Thumb

The moving piece that allows the user to quickly scroll over the content into a desired location. It consists of a rectangle of 17 pixels wide and a 7 pixels wide internal rectangle with a value of 4.5 for both X and Y radius values. The height (or the opposite dimension) for the bar is defined by the space needed by the control.

download download the sample code.
jump to page
1 2 3 4 5
Comments (4)

  1. George Birbilis says:

    is there an updated article for the ScrollViewer control too?

  2. Juan Mejia Velez says:

    Hello George, I been working on moving and updating all the post from WordPress and moved then here, but at the same time organizing new content for newest technologies. I will give priority to the one you requested 😉

  3. Richard says:

    Thanks for the article (although the “jump to page” links don’t work, so I can one see page 1). I appreciate that the article is clearly targeted at Silverlight, so this is an unfair question. I’m trying to do the same thing for WPF; which I would have expected to be very similar. I don’t have Silverlight installed, so the best I could do was to put Assets/BlendStyles.xaml into a WPF project, and include it in the merged dictionary in App.xaml, and use the same contents of the MainWindow. The scrollbars appear; but the vertical one looks completely wrong and although mouseover is working, clicking on any part of any scrollbar has no effect.

    1. Richard says:

      Never mind… I found what I needed here… https://msdn.microsoft.com/en-us/library/ms742173(VS.85).aspx
      you may or may not wish to link to that for WPF people…