Элементы управления стилем (Styling Controls) в Silverlight - Шаблоны и скиннинг

Шаблоны и скиннинг

Иногда вам может понадобиться (полностью) изменить внешний вид элемента управления полностью, придав ему совершенно новый вид без каких-либо изменений в его функциональности. Тут уместно применять шаблоны Silverlight, менеджер визуальных состояний (Visual State Manager) и модель частей и состояния (Parts and State Model). 

Это как раз тот случай, когда легче сделать, чем объяснить. Простым, но эффективным способом распределения объекта будет триангуляция - просмотр объекта с двух и более точек обзора. Аналогичный эффект я наблюдаю при изучении чего-нибудь нового и запутанного, и в таких случаях полезно рассматривать объект с нескольких точек. 

Модель частей и состояний

Silverlight обладает некоторыми радикальными изменениями по сравнению с предыдущими технологиями (такими, как ASP.NET, WinForms и т.д.). В старых технологиях каждый элемент имел свой определенный внешний вид, и мы, как разработчики, были несколько ограничены в использовании стилей и, впоследствии, скиннинга. В Silverlight каждый элемент управления, предоставленный компанией Microsoft, поддерживает новую модель частей и состояний (Parts and States Model), которая вызывает строгую сеперацию между логикой элемента управления и его внешним видом. 

Преимуществом данного подхода является то, что разработчик может с легкостью изменить внешний вид элемента отдельно от его функциональности, тем самым обладая свободой в действиях, особенно при работе с дизайнерами. Внешний вид инкапсулирован в шаблоне, использующем модель Parts and State, и регулируетсяменеджером визуальных состояний (Visual State Manager) (VSM). Expression Blend знает, как читать и создавать части и состояния, тем самым делая скиннинг элементов управления практически тривиальной задачей ... во всяком случае тогда, когда вы знаете, как это сделать.

Модель частей и состояний построена на следующих ключевых принципах: 

1. Части (Parts) 
2. Состояния (States) и Группы состояний (State Groups) 
3. Переходы (Transitions) 

Части (Parts)

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

Состояния и группы состояний

Каждый элемент управления имеет несколько состояний ("States") - определенных разработчиком элемента управления. Как показано на рисунке 6-11, кнопка имеет четыре стандартных состояния ("Common States") 

• Normal - нормальное
• MouseOver - наведенное
• Pressed - нажатое
• Disabled - отключенное 

А также она обладает двумя состояниями фокуса ("Focus States")

• Focused - сфокусированное
• Unfocused - без фокуса 

Обратите внимание на то, что вторые два состояния выделены в отдельную группу состояний. Идея заключается в том, чтобы создавать группы для уменьшения потенциального "взрыва" комбинаций состояний (то есть используя группы состояний, вы потенциально уменьшаете количество различных состояний с 64 до 12, путем разделения смешанных состояний в группы по три или четыре)

Рисунок 6-11. Button States and State Groups

Переходы

То, что показано на рисунке 6-11 является обходным путем - я вырезал маркеры времени переходов для того, чтобы упростить изображение, которое в оригинале должно выглядеть следующим образом 

Рисунок 6-12. Состояния со значениями времени 

Цифры, которые я обвел являются временами переходов (измеряются в секундах). Они указывают длительность перехода из одного состояния к другому.  

Два значения, которые обведены красным цветом, являются стандартными для двух групп состояний, в то время как два значения, обведенные белым цветом, являются переписанными. Если вы исследуете тщательнее изображение, то увидите стрелку со звездочкой, которая показывает состояние MouseOver, тем самым указывая, что данный промежуток времени в 0.2 секунды необходим для перехода из любого состояния в состояние MouseOver, и во втором случае 0.1 секунды - для переключения из любого состояния в Pressed. То, что произойдет во время перехода, определяется самим переходом (Transition), который является раскадровкой (основой анимации) и будет описан ниже. Основной идеей переходов является возможность избегать прыжков из одного состояния в другое, а также более гладкое изменение между состояниями.

Опять же, исследовав существующий шаблон, мы можем понять, как элементы управления, предоставленные компанией Microsoft, обрабатывают данные переходы. Щелкните по состоянию Pressed в режиме Object and Timeline - State изменяется в Pressed и подсвечиваются две части: Background Gradient (фоновый градиент) и Downstroke (подчеркивание).  

При расширении данных частей при помощи стрелок, мы увидим те подчасти, которые были изменены при переходе кнопки в состояние Pressed, как это показано на рисунке 6-13 

Рисунок 6-13. Исследуем шаблон на Button Pressed 

Обратите внимание на то, что под фоновым градиентом заливка состоит из четырех остановок Gradient и что все четыре изменяют свои цвета, но второй изменяет также и свое положение. Вы можете нажать на каждый цвет поочереди и, исследовав окошко свойств и/или Xaml, увидеть все изменения. Это особенно важно в случае со второй остановкой, когда изменяются цвет и расположение, как это показано на рисунке 6-14

Рисунок 6-14. Состояние нажатой кнопки (Button Pressed)