How To Change the Scroll Bar Color in Silverlight

Introduction

The color of the silverlight scroll bar was looking very ugly in one of my projects and it needs to be changed. Am so sure that the regular, default pale scroll bars suck most of the time. When the situation demands color tweaking for the scroll bar: Few simple steps and a few minutes of time, it’s done.

Prerequisites

Microsoft Expression Blend.

Implementation

Step 1: Open a new project in Expression Blend and drag a scroll viewer control on to the Layout. 

Step 2

• Go to Objects and timeline,
• Right click on the Scroll Viewer 
• Click on Edit Template and
• Select edit a copy 

Step 3:  Specify a name in the Dialog Box that appears. 

Step 4: Once you do so you will find the scroll viewer being made by mending many bits and pieces viz. Scroll Content Presenter, Rectangle, Vertical Scroll Bar, Horizontal Scroll Bar etc. 

Now, that we have already got the individual parts. Here starts the customization part. 

Step 5

Select the individual element you want to customize or change in the scroll viewer. My target now is to change the color of the scroll bar. So I select the Horizontal Scroll bar.  And repeat the Step #2.

Step 6

Specify a name in the Dialog Box that appears. Make sure that you give a meaningful name and remember it to use it at a later time. Otherwise you might end up in ruckus.

Step 7

You can now see that the Horizontal Scroll bar is made of few more isolated components such as Rectangles, Horizontal Thumbs etc.  The Horizontal thumb is the actual scrolling part of the scroll bar which can be moved. So our aim is to change its default color. Repeat the Step #2 on the Horizontal Thumb.  In the dialog box give any meaningful name.

Step 8

Now we arrive at a destination of the real work. The thumb is made of a group of nothing but just rectangles .  In order to change the basic Look and Feel of the Scroll Bar, select the “Background gradient” rectangle and navigate to the Properties window. 

You can see all the colors are set to white in the Properties panel. Now unleash the designer in you and sharpen the creativity as you proceed with the next step.

Step 9

Change the colors on the gradient bar to the colors you wish to or the colors you are demanded for.  You can change the no of colors and order of the colors. I now stick to 4 colors and change them to violet and shades of violet. 

P.S : Change the Background MouseOver Rectangle colors in the same manner. If you don’t do so your Scroll Bar looks UGLY

Step 10

Click on the Return to scope and Underlined Upper Arrow button in the Objects and Timeline window. Click the same button till you reach the Layout root level where you see the Scroll Viewer 

Step 11

Now its Climax time; Apply the Edited style to the scroll viewer. Identify the scroll viewer, right click on it, and Go to Edit Template, Click Apply resource (By doing this we apply the style which we have created). 
Step 12

Select the Style with the name you have specified in Step #6.

Save the application and Run it. This is how the Scroll Viewer looks like in the Browser. 

Conclusion

You can see the Ugly and Regular Pale scroll bar in 2 and 1 is the Colorful scroll bar which we have created. Now tell me which one really Looks rocking.Happy Coding