Windows Phone Tutorial 10: Добавление визуальных состояний в пользовательский элемент управления

Учебники

В рамках серии руководств по Windows Phone в последнем руководстве мы рассмотрели, как создать пользовательскую кнопку в Expression Blend. В этом руководстве вы обновите шаблон элемента управления, добавив в него различные визуальные состояния, которые позволяют кнопке отображать контур, когда она находится в фокусе, и смещают свое положение на странице, чтобы указать, когда она нажата.

1. На панели Объекты и временная шкала выберите элемент управления Граница .

2. Теперь переключитесь на панель Состояния и проверьте визуальные состояния, доступные для кнопки управления.

3. В категории FocusStates выберите состояние Не сфокусировано , чтобы включить запись для состояния, которое вызывается, когда кнопка не имеет фокуса. Любые изменения в шаблоне в этом режиме применяются только к этому конкретному состоянию.

4. Чтобы скрыть границу вокруг кнопки, когда она теряет фокус:

  • Выберите Границу на панели Объекты и временная шкала .
  • На панели Свойства разверните категорию Кисти и выберите свойство BorderBrush .
  • Нажмите значок Показать дополнительные свойства и установите для свойства Непрозрачность кисти значение 0 .


5. Вернитесь на панель Состояния и выберите состояние Нажатие в категории CommonStates , чтобы включить запись для состояния, вызываемого при щелчке мыши.

6. На панели Свойства разверните категорию Преобразование и выберите преобразование Перевести . Установите значения X и Y равными 2 . Это изменение приводит к небольшому сдвигу в положении кнопки при каждом нажатии, что предполагает ее нажатие.

7. Наконец, на панели Состояния выберите шаблон База , чтобы отключить режим записи.

8. Нажмите CTRL + S , чтобы сохранить обновленный файл.

9. Теперь, когда вы завершили добавление визуальных состояний в пользовательский элемент управления, вы готовы протестировать обновленную кнопку:

  • Нажмите F5, чтобы собрать и запустить приложение
  • Введите текст, а затем нажмите клавишу Tab, чтобы изменить фокус ввода на кнопку
  • Обратите внимание, что когда кнопка имеет фокус, вокруг кнопки появляется рамка, указывающая, что она активна
  • Теперь нажмите клавишу пробела или нажмите кнопку и обратите внимание, как ее позиция сдвигается, чтобы показать, что она нажата

Это оно!

Оцените статью
TechArks.Ru
Добавить комментарий