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

Question

I would like to create a scrollbar in WPF that looks like the one seen in iTunes cover flow. See scrollbar image below, which also shows the reflection of the album art underneath the scrollbar.

Scrollbar Image http://www.barramsoft.com/pub/images/scrollbar2.jpg

Below is a basic scrollbar control in xaml.

<ScrollBar Name="scrollBar1" Height="24" Width="Auto" Orientation="Horizontal"  
           SmallChange="1" />

How can I get from the above to an iTunes cover flow scroll bar look? The full ready to use source code sample would be preferred.

Answer 1

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 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

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 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.