Custom Silverlight Scrollbars Part 2: Customising!

Hello,

for those of you who followed the previous posting, I'm reopening my "Scrollbars" project now. If you are just reading this, I've created a basic application using only Expression Blend 3.0 and Silverlight 3.0. On my MainPage.xaml I have added a Scrollviewer containing a stackpanel, and that contains a bunch of coloured rectangles.



When you run this project (f5) you can scroll downwards to see more rectangles. Now we are going to change the style of the scrollbars.

What we need is to open up the default scrollviewer that microsoft has created for us. The scrollbar is situated inside the ScrollViewer Template. This is the trick you need, remember it: right-click the ScrollViewer, click "Edit Template" and then click "Edit a Copy".



Now you choose a name for your new template. I'm just going with the defaults this time, and pressing 'OK'.



The screen has not changed much once I press OK but the area on the left labelled "Objects and Timeline" has some new objects. You can open up the [Grid] to see VerticalScrollBar and HorizontalScrollbar.

Right click the VerticalScrollbar (You can do the horizontal one instead if that’s what your project needs) and click "Edit Template", then "Edit a Copy".



Again, I'm just going to go for defaults, thus creating "ScrollBarStyle1" in "This document..." when I press 'OK'.

In this view, I'm going to start by looking inside VerticalRoot, since, in my application, the vertical scrollbar is currently visible.

The components that are listed under "VerticalRoot" are the ones which make up the default scrollbar for Silverlight that was supplied to us by Microsoft. Now let's destroy it >:D !! Don't worry, we're editing a copy and it isn’t possible to destroy anything.

I'm going to demonstrate one way to style a scrollbar, but you will probably want to do some things differently. I apologise for my poor design sense, that’s what we developers are known for.

I'm going to start by getting rid of the three nameless [Rectangles] that were originally there for some sort of visual effects.



Next I'm going to edit the template of the VerticalSmallDecrease. In this case I'm using "Edit Current" instead of "Edit a Copy".

In this template, I've deleted everything except the "Path" and added a rectangle underneath the Path with a Black fill.

Now is probably a good time to save your work.

I've changed the Rectangle's Stroke property and the Path's Fill property to this colour #FF7F2CFF which can be pasted into blend here:



I also changed the Path's Width to 12 and Height to 8 using the Properties area after selecting [Path] on the left hand side.

The last thing we need to do before we are done with this VerticalSmallDecrease is find the "States" up in the top left. If you can't find it, you can activate it in the main "Window" menu. I've opened mine and it looks like this:



If you click on a state here, you will be editing only for that state, unless you choose “Base”. For example, if you click MouseOver and make some changes, those changes will only be visible when you mouse-over this part of the scrollbar. When you are editing a "State", such as MouseOver, a pop-down alert will appear at the top of the editing area saying something like “MouseOver state recording is on”. Be careful what you do when recording is on, changes you make are only for that state.

In my project, I'd like the "Fill" property of the path and the "Stroke" property of the rectangle to change based on Normal, MouseOver, Pressed, or Disabled state. Normal should generally be the same as Base.

In base, I change the path's Fill to Black (#FF000000). then in MouseOver I change the path's Fill to #FF7F2CFF. I want the colour to go lighter when the button is "Pressed", so in Pressed state I change the colour of the rectangle Stroke and the path’s Fill to #FF9C5CFF. Finally, I'm going to change the rectangle Stroke to black in the Disabled state.

I recommend you click through all your states one by one and see that they change as you would like. If I run my project now I can clearly see the modified scrollbar in action!



Now that you know how to edit the SmallDecrease, you can do the same for the SmallIncrease. All you need to do to get started is go “Up a level” and right click on the right part of the scrollbar and, of course, choose “Edit Template”. But how? like this:



the small arrow shaped grey name tags at the top act like breadcrumbs and you can follow them backwards step by step. To edit the VerticalSmallIncrease you need to go back one level, which can be done by going to (the same level as) "VerticalSmallDecrease".

Now you should see the same view, and the ability to “edit template” on the parts of the scrollbar: VerticalSmallIncrease, VerticalThumb, etc.

The VerticalThumb is the square part that floats between the arrows and shows how far down you are. It can be edited in a similar way as the smallincrease and decrease. The VerticalThumb has one default behaviour I'd like to keep. In "Disabled" state the "ThumbVisual" (which contains everything) becomes hidden.

Other than that I pretty much got rid of everything except the "Background" element and changed the colours of that to suit me. I've also added 2 rectangles with height=2 and some margins (left and right = 1). They will become visible only on MouseOver and Pressed states.

The last thing you need to change is the "LargeIncrease" and "LargeDecrease". This is the part of the scrollbar between the thumb and the arrow that will cause a "page down" effect if you click on it. This one is easy to edit, I just picked a background colour of Black (#FF000000 not #00000000) and margin left and right= 1.

As a final touch, I decided to change the "VerticalSmallDecrease" margin-bottom to 0 and the "VerticalSmallIncrease" margin-top to 0 to get rid of the white space between the thumb area and the buttons.

Now when I run my project I see this:



Sorry, it isn't pretty, but again I am a coder and not a designer! I hope you can do a better job customizing your scrollbars.

For Horizontal Scrollbars you can either create a new “ScrollBarStyle” or you can edit this one in the “HorizontalRoot” section. You can apply 1 scrollbarstyle to both horizontal and vertical scrollbars alike since the style has a definition for each.

To apply this style to any scrollbar once you are done, Right-click the horizontal scrollbar, click “Edit Template”, “Apply Resource”, and choose the “ScrollbarStyle1”.



If you find anything unclear please comment!



Have fun customising,

Zero Gravity C#himp