Как создать полосу прокрутки WPF, похожую на полосу прокрутки обложки iTunes?

Question

Я хотел бы создать полосу прокрутки в WPF, которая будет выглядеть так же, как в обложке iTunes. См. Изображение полосы прокрутки ниже, где также показано отражение обложки альбома под полосой прокрутки.

Изображение полосы прокрутки http://www.barramsoft.com/pub/images/scrollbar2.jpg

Ниже приведен базовый элемент управления полосой прокрутки в xaml.

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

Как перейти от вышеперечисленного к виду полосы прокрутки обложки iTunes? Полностью готовый к использованию пример исходного кода будет предпочтительным.

Answer 1

Начните с примера ScrollBar ControlTemplate в MSDN с http://msdn.microsoft.com/en-us/library/ms742173.aspx (это гораздо проще изменить, чем стиль окна, который вы можете получить из Blend или ShowMeTheTemplate)

Теперь начните редактировать шаблон, меняйте цвета, шаблоны для кнопок со стрелками и большого пальца, пока он не будет выглядеть так, как вы хотите.

Answer 2

Есть ли у вас Expression Blend? Если нет, я бы порекомендовал установить его (есть 30-дневная пробная версия, если у вас нет лицензии MSDN).

Существует довольно много уроков по Expression Blend вот хорошее место для начала , например.

По сути, вы копируете шаблон для стандартной полосы прокрутки, которая предоставит вам все элементы, необходимые для его создания. Затем вы изменяете внешний вид каждого элемента, пока не получите его таким, каким вы хотите. В этом процессе будет довольно много проб и ошибок.

Answer 3

Взгляните на проект WPF Themes на codeplex. Тема Expression Blend (светлая / темная) очень близка к приведенному вами примеру. Выпускается под Ms PL .

Answer 4

Первая задача - показать область прокрутки под полосой прокрутки. Вы должны изменить структуру элемента управления ScrollViewer. По умолчанию это 2x2 Grid, поэтому горизонтальная полоса прокрутки находится под областью прокрутки. Измените его шаблон, чтобы поместить область прокрутки и полосу прокрутки в одну и ту же ячейку, выровняв полосу прокрутки по вертикали.

Вторая часть предназначена для стилизации самой полосы прокрутки. Я не верю, что это нельзя сделать с помощью закругленных прямоугольников.

Я обычно извлекаю шаблон, чтобы изменить его, используя Blend, также есть бесплатный ShowMeTheTemplate инструмент.