How create WPF scrollbar to look like iTunes cover flow scrollbar?

Answer 1

The first task is to show the scrolled area underneath the scrollbar. You have to change the structure of the ScrollViewer control. By default it is a 2x2 Grid so the horizontal scrollbar is under the scrolled area. Edit its template to put the scrolled area and the scrollbar in the same cell, vertically aligning the scrollbar to bottom.

The second part is to style the scrollbar itself. I don't believe this can't be done with rounded rectangles.

I usually extract the template to modify it using Blend, there is also a free ShowMeTheTemplate tool.

Answer 2

Have you got Expression Blend? If not I'd recommend installing it (there is a 30 day trial version if you don't have an MSDN license).

There are quite a few Expression Blend tutorials out there here's a good place to start for example.

Basically you copy the template for the standard scroll bar which will give you all the elements that go to make it up. You then change what each element looks like until you get it looking how you want it. There will be a fairly large amount of trial and error in this process.

Answer 3

Start with the ScrollBar ControlTemplate Example in MSDN from http://msdn.microsoft.com/en-us/library/ms742173.aspx (that is much easier to modify than the window style you can get from Blend or ShowMeTheTemplate)

Now start to edit the template, change the colors, the templates for the arrow buttons and the thumb until it looks like you want.

Answer 4

Have a look at the WPF Themes project at codeplex. The Expression Blend Theme (light/dark) is very close to the example you've provided. It is released under Ms PL.