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

Written on 17 Марта 2009. Posted in WPF и Silverlight

Скиннинг элемента управления

Давайте создадим полноценный шаблон с нуля и увидим, что произойдет. Понять сам способ работы и полная реализация - это не одно и то же. Вернемся к проекту, с которым мы работали, и сделаем некоторые изменения до того, как мы начнем скиннинг кнопки. Перетащите стиль подсказки на пять элементов, если вы ещё не сделали этого (последние два выйдут за рамки, но это нормально). Как только вы сделаете это, щелкните дважды по пользовательскому элементу управления (UserControl) в Objects and TimeLine и, захватив справа элемент управления, измените его ширину к 500. Теперь вам понадобится изменить размер у левой колонки, и чтобы это было легко - перейдите в режим Split и просто настройте максимальную ширину (Max) с 150 на 250. Ваш элемент управления теперь должен выглядеть примерно так

Рисунок 6-15. Готовность к скиннингу кнопки изменения книги

Создание круглой кнопки

Мы хотим изменить внешний вид кнопки с нормальной формы на более привлекательную круглую форму со словом Change в ней. Кнопка будет распознавать курсор тогда, когда он будет над ней и будет поворачиваться при нажатии. Также текст будет затемнен в тех случаях, когда она не будет доступна. Для того, чтобы начать, найдите кнопку в закладке Objects and Timeline (и назовите ее Change) и щелкните правой кнопкой мыши. Выберите Edit Control Parts > Create Empty, как это показано на рисунке 6-16.

Рисунок 6-16. Создание пустого шаблона для кнопки

В диалоговом окне назовите новый шаблон RoundButon и расположите его в приложении (что создаст новый ресурс в App.xaml). Blend перейдет в режим редактирования шаблона (Template), который отличается от всех тем, что имеет в наличии закладки в верхней части экрана. Ваш пустой шаблон будет иметь табличную сетку. Наша кнопка будет состоять из эллипса (Ellipse), который также обладает текстом и будет заполнен линейным градиентом.

Начните с расположения эллипса в табличной сетке точно так же, как вы бы сделали это в нормальном режиме дизайнера. Установите ширину и высоту для начала в 75 и установите выравнивание в растягивающее значение (Stretch). Мы хотим заполнить эллипс радиальным градиентом (в отличие от стандартного линейного). Щелкните по кнопке кисти заполнения, щелкните по кнопке кисти с градиентом, и затем в нижней левой части закладки кистей (Brushes) нажмите на опцию Radial gradient, как это показано на рисунке 6-17

Рисунок 6-17. Выбор градиентной кисти

В зависимости от того, насколько вам удобно использовать инструмент, вы можете установить остановки градиента и его ориентацию в окошке кистей (Brushes) или, если вам так будет легче, сделать это явно в Xaml. Вот как это должно выглядеть в Xaml:

<Ellipse Width="75" Height="75"
   Margin="0,0,10,10" x:Name="ButtonEllipse" >
   <Ellipse.Fill>
    <RadialGradientBrush GradientOrigin="0.2,0.2" >
      <GradientStop Color="White" Offset="0.2"/>
      <GradientStop Color="Blue" Offset="1"/>
    </RadialGradientBrush>
   </Ellipse.Fill>
</Ellipse>

Ваш элипс должен выглядеть следующим образом

Рисунок 6-18. Эллипс с радиальным градиентом

Далее мы хотим добавить текст (в частности, слово Change!) к кнопке. Для этого перетащите текстовый блок куда-нибудь над эллипсом и затем переключитесь в окошко свойств, где вы сможете изменить его размер и позицию , как это показано на рисунке 6-19

Рисунок 6-19. Свойства, установленные для кнопки

Рисунок 6-19 был уменьшен для того, чтобы смог поместиться - были убраны части, которые не были изменены. На данном этапе ваша кнопка должна выглядеть примерно так

Рисунок 6-20. Кнопка с добавленным текстом

Управление состоянием кнопки

Как уже обсуждалось выше, кнопка обладает четырьмя стандартными состояниями ("Common states") и двумя состояниями фокуса ("Focus states"). Теперь нам надо настроить внешний вид для каждого из этих состояний, и при желании настроить время перехода между данными состояниями.

Состояние MouseOver

Давайте начнем с добавления кнопке действияпри наведении курсора на нее. Это простой переход, но нам необходимо оформить его для эллипса, поэтому нажмите на эллипс в панели Objects and Timeline и затем в закладке переходов (Transform) на кнопку масштабирования, как показано далее

Рисунок 6-21. Преобразование масштаба элипса

При нажатии на кнопку масштабирования значения x и y изменяются в 1. Нажав на MouseOver и введя 1.2 в X и Y вы указываете Blend на то, что в состоянии MouseOver кнопка расплывается на 20%.

Для проверки нажмите на Page.xaml в закладках и возвратитесь в режим редактирования. Удалите существующую измененную кнопку, нажмите на закладку ресурсов и перетащите вашу новую кнопку на полотно. Переключитесь к свойствам, назовите вашу кнопку Change (существует код, который зависит от кнопки, названной Change) и запустите приложение.

Не нажимая на кнопку, передвиньте курсор на нее и обратно. Она изменяет размеры, но выглядит это все по-мультяшески. Изменения появляются внезапно (выглядят внезапными) - щелкните правой кнопкой мыши по кнопке и выберите Edit Control Parts> Edit Template, тем самым вернувшись в режим редактирования шаблона. Обратите внимание на то, что стандартный переход равен 0 секунд. Давайте изменим этот на 0.2 секунды и заново запустим - вы увидите огромную разницу.

Состояние Pressed

Наверняка, наиболее интересным дизайном является тот, что происходит при нажатии кнопки. В нашем случае все будет достаточно просто - кнопка просто повернется и впадет. Нажмите на Pressed, тем самым указывая, что это именно то состояние, которое вы хотите настроить. Нажмите на Ellipse для того, чтобы указать, что вы хотите изменить cвойства эллипса. В окошке свойств нажмите на вторую кнопку (rotate) в окне Render Transforms (обработать переходы) и установите угол поворота в 25 градусов. Далее нажмите на первую кнопку (transition) и измените с 0 на 5.

Переход происходит нормально, но почему-то не выполняется поворот. Конечно же, как мы можем увидеть поворот круглой кнопки? Вы можете вернуться к редактированию шаблона и сделать круг более эллиптическим (то есть установить ширину, равную 90) , что сделает поворот видимым, но не очень красивым.

В качестве альтернативы мы можем повернуть текст вместо эллипса. В данном случае у нас будет более элегантная реакция, как это показано на рисунке 6-22

Рисунок 6-22. Поворот текста при нажатии кнопки

Вы можете выполнить это, переключившись обратно к шаблону. На этот раз сделайте это, переключившись к закладке ресурсов (Resources), развернув App.xaml и щелкнув дважды по RoundButton. Теперь вы можете щелкнуть ButtonEllipse и вернуть поворот, а затем нажать на ButtonText и установить угол поворота. Красиво, правда?

Состояние Disabled

Последнее состояние, которое вам необходимо установить, является Disabled. Нажмите на ButtonText - и давайте изменим ее цвет с белого на серый, для того чтобы указать неактивность кнопки. Поскольку изменение цвета может произойти очень быстро, нажмите на AddTransition в пределах кнопки Disabled, как это показано на рисунке 6-23

Рисунок 6-23. Добавление переключения

Выберите первую опцию (из любого состояния - в отключенное) и установите время в 0.1 секунды. Нажмите опять на кнопку добавления перехода (Add Transition) , выберите на этот раз Disabled > * и установите переход обратно в любое состояние в значение 0.1 секунда - состояния должны выглядеть так, как это показано на рисунке 6-24