Скиннинг контролов. Слайдер.

С выходом Blend 3 Preview делать скиннинг элементов управления стало еще проще. Все благодаря замечательной команде Make Into Control.  В официальном документе описания новых возможностей Бленда идет упоминание о новом способе скиннинга и горизонтальном слайдере – который сделать очень просто (ну это всегда так, если знать как). А если порыться в докладах Микса – можно найти инструкцию как практически из чего угодно сделать приличную прокрутку.

Разбираясь с новшествами Бленда, решила сделать небольшой пример слайдера, предназначенного для регулировки звука.  Расскажу, как сделать вот такой работающий ключик.

Первым делом, первым делом…
создаем в Бленде проект Silverlight 3, и импортируем туда нашу графику. В нашем случае у нас не сильно много элементов – аж три.

А нам собственно, много элементов не надо. Если подумать, то нам надо поле, по которому будет ездить слайдер (красная и серая кривые), и сам бегунок слайдера (музыкальный ключ).

Брюки превращаются….
Теперь – один из простых шагов на пути к созданию слайдера. Нажимаем на нашем элементе компоновки (в нашем случае это Canvas music_slider) правую кнопку мышки до появления контекстного меню и выбираем команду Make Into Control…

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

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

Внимательно смотрим по сторонам…
Если осмотреться в рабочем пространстве, то как только мы зашли в режим редактирования шаблона, можно заметить, что появилась новая панелька Parts – …, содержащая немаленький список частей для слайдера.

Да, сколько частей для маленького слайдера. Ну если кто помнит документацию по стилям и шаблонам для слайдера, то так оно и есть. Для начала можно спокойно делить это кол-во пополам. Так как стандартный слайдер у нас всегда имеет вертикальную и горизонтальную части, которые по своей функциональности идентичны с учетом поворота. В нашем случае  с собственным художественным слайдером вертикальной частью можно пренебречь, т.е. про нижнюю половину этого списка забыть. Останется 4 части.

Давайте рассмотрим из чего фактически состоит горизонтальный слайдер. Приведу небольшую схему.

Есть общий шаблон в котором все хранится – HorizontalTemplate. Есть тумблер (ползунок), с помощью которого мы и изменяем значение слайдера. И есть две кнопки-области – уменьшающаяся левая и увеличивающая правая. При чем ширина этих двух кнопок должна автоматически изменятся с положением слайдера.

И нам эти четыре части и необходимо внедрить в результате.

HorizontalTemplate
Преобразовываем наш верхний элемент компоновки music_slider из Canvas в Grid (эта структура необходима для вышеуказанного растяжения кнопок HLCDRB & HLCIRB (сократим названия для удобства)). Вызываем контекстное меню, выбираем Change Layout Type –> Grid.

После этого, наш Grid переводим в разряд горизонтального шаблона.

CM – > Make Into Part of Slider – > HorizontalTemplate

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

Аналогичное действие делаем с тумблером. На нашем контуре музыкального ключа вызываем контекстное меню и выбираем Make Into Part of Slider –> HorizontalThumb… Сразу появится окошко с предложением сделать шаблон, выбираем название и сохраняем.

Разметка в три колонки…
Теперь необходимо разбить наш Grid на три колонки, в одну из них поместить кнопку HLCDRB, в среднюю - тумблер, и в третью – кнопку HLCIRB.

Для этого на рабочем холсте (обязательно перед этим нужно выделить Grid на панели Objects & Timeline ) – на Grid наносим новые колонки. Одну перед ключом, вторую после.

Либо если у кого сразу не получилось – всегда можно сделать это через ручное задавание колонок в Grid. Набираем на закладке Properties в поиске column – чтоб долго не искать по закладкам и в ColumnDefinition задаем нужное кол-во колонок и их ширину.

Правила для ширин.
[0] и [2] колонки должны иметь ширину Auto (так как должны автоматически растягиваться) и минимальную ширину 0.
[1] колонка должна иметь постоянную ширину, равную также максимальной и минимальной ширине и содержимому вашего тумблера.

Ну или если быстро глянуть в коде что получилось, то следующее.

<Grid.ColumnDefinitions>
     <ColumnDefinition MinWidth="0" Width="Auto"/>
     <ColumnDefinition MaxWidth="19" MinWidth="19" Width="19"/>
     <ColumnDefinition MinWidth="0" Width="Auto"/>
</Grid.ColumnDefinitions>

Положение фонового изображения.
Наши два контура – серый и красный не несут какой-либо функциональной нагрузки. Только декоративную. Но они должны заполнять все пространство HorizontalTemplate, чтоб тумблер мог скользить от одного края к другому. Поэтому для каждого контура необходимо сделать следующее расположение – поместить в [0] колонку, и сделать объединение трех колонок, задав свойство Grid.ColumnSpan="3".

Положение тумблера.
элемент HorizontalThumb должен находиться как раз в колонке [1] (Не забываем, что ведем нумерацию с [0]).

Добавление кнопок HLCDRB & HLCIRB.
Не нужно сильно ломать голову над тем, как добавить эти две кнопки. Не меняя коней, вернее выделение в шаблоне (остаемся на HorizontalTemplate) делаем следующее.

На панели Parts кликаем поочередно на каждой оставшейся горизонтальной кнопке. Они автоматически попадают в НУЖНУЮ правильную колонку. (Только не поместите случайно одну кнопку в другую, они должны находиться на одном уровне).

И визуально это должно выглядеть следующим образом (если не выглядит – смотрите правила для колонок выше и положение в колонках):

Стили кнопок HLCDRB & HLCIRB.
Вполне логично, что для этих кнопок должны быть стили (взять даже тот же слайдер из видео-плееров – левая и правая части абсолютно кликабельны, таким образом можно дополнительно перемещаться по видео). Так вот, а в нашем случае – эти области нам не нужны и должны быть абсолютно прозрачны, что мы и сделаем, задав им в свойствах Opacity=”0”.

Остаточные допиливания слайдера.

Можно уже потестировать слайдер в браузере, но перед этим необходимо сделать некоторые изменения внутри шаблона HorizontalThumb для тумблера.

1. Нам под ключик необходимо подложить прозрачный прямоугольник, либо контур, покрывающий весь ключ. Необходимо это сделать для того, чтобы было удобнее таскать тумблер. Так как иначе нам придеться четко попадать в тонкий контур ключа – чтоб изменить значени слайдера.
2. Кроме этого немного затемним цвет ключика, так как в правой части он будет сливаться с красной линией.
3. На панеле состояний States сделаем некоторые изменения для контура ключа:
   1. для состояния MouseOver и Pressed – сделаем заливку черным цветом.
   2. для Disabled – серым в тон серой линии. Этого будет достаточно.

Задание значений для самого слайдера уже выбираем на самой страничке размещения. Например, с учетом того что это музыкальный слайдер, значения будут следующие:

1. Minimum=”0”
2. Maximum=”1”
3. Value=”0,5”

Вот и все. Осталось подобрать мелодию, сделать привязку значения громкости к значению слайдера и можно тестировать слайдер.

Оригинал: Скиннинг контролов. Слайдер.