Styling A ScrollViewer/Scrollbar In WPF

Scroll Viewer design (Scroll bar) In WPF

STEP 1

Lookup and copy the original ScrollViewer and ScrollBar Templates from MSDN, for example

http://msdn2.microsoft.com/en-us/library/aa970847(VS.85).aspx
http://msdn2.microsoft.com/en-us/library/ms742173(VS.85).aspx

Then I Pasted that code from MSDN into a Resources file in a WPF window.

STEP 2

I examined the control parts required for the full ScrollViewer/Scrollbar controls. This was fairly ok actually as the MSDN default Styles and pretty easy to follow.

From looking at the default styles it became clear that I needed to look at the following Style/Templates if I wished to re-style a ScrollViewer, as all of these were used in the default Style for the ScrollViewer somewhere

STEP 3

I then decided which parts I want to swap out. I chose to swap out the and proceeded to hack the default Style/Templates to acheive the look I was after.

Anyway the results ScrollViewer looks like the following image

• RepeatButton
• Thumb
• ScrollBar
• ScrollViewer



When you consider the following image, you can see why these are the Style/Templates that need to be altered

So basically after that, its just a question of cutting code. So withour further ado, here is the code

This is what it looks like

And if you want to try this for yourself, here is a VS2010 demo project scrollviewertemplate.zip