Как создать полосу прокрутки WPF, чтобы она выглядела как полоса прокрутки обложки iTunes?

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

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

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

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

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


scrollbar wpf itunes coverflow
person Elan    schedule 28.02.2010    source источник
comment
Удачи с этим, полосы прокрутки, как известно, сложно стилизовать, и просить кого-то сделать всю вашу работу, ИМХО, надуманно.   -  person bendewey    schedule 28.02.2010

Ответы (4)


arrow_upward
3
arrow_downward

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

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

person Nir    schedule 01.03.2010
comment
Вы упустили один момент: отражение обложки альбома должно быть видно под полосой прокрутки. - person Mart; 01.03.2010
comment
Просто установите непрозрачность полосы прокрутки менее 1 (или непрозрачность некоторых компонентов полосы прокрутки в шаблоне). - person Nir; 02.03.2010
comment
Спасибо, Нир, это дало мне хорошую отправную точку. Потребовался целый день проб и ошибок; Я сейчас очень близок к обертыванию! - person Elan; 02.03.2010

arrow_upward
1
arrow_downward

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

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

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

person ChrisF    schedule 28.02.2010
comment
Спасибо за совет. Я смог осуществить это, основываясь на рекомендациях Нира. Я установлю Expression Blend и ознакомлюсь с этим. - person Elan; 02.03.2010

arrow_upward
0
arrow_downward

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

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

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

person Mart    schedule 28.02.2010

arrow_upward
0
arrow_downward

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

person olli-MSFT    schedule 01.03.2010