Silverlight ScrollBar with Blend Style

Silverlight ScrollBar with Blend Style

Rate This
  • Comments 2
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
Leave a Comment
  • Please add 1 and 1 and type the answer here:
  • Post
  • is there an updated article for the ScrollViewer control too?

  • 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 ;)

Page 1 of 1 (2 items)