Самое важное в плагине для Revit — это анимации (с), Лао-цзы, VI в. до н.э.
Всем привет! Сегодня расскажу, как добавить анимацию к кнопке WPF. Тема особо не касается Revit, да и многие её пренебрегают — ведь плагин без анимаций будет выполнять бизнес-задачу, а анимация без плагина никому не нужна, но почему бы и не рассказать о том, как сделать пользовательский интерфейс своего приложения более интересным.
Задача
Сделаем так, чтобы наша кнопка при наведении увеличивалась на 5%, а её границы становились толстыми. Сделаем это 2 вариантами: чтобы изменение происходило мгновенно, и чтобы плавно в течение 0,5 секунды.
После чего создадим стиль кнопки, чтобы потом просто указывать, что эта кнопка имеет такой стиль, а не писать каждый раз код заново.
Добавление словаря ресурсов
Создадим словарь ресурсов, чтобы сохранять отображение кнопок там, а не загромождать основное окно:
И добавим его как ссылку к нужному окну (строка 18):
Отлично, теперь мы можем в словаре определить стиль кнопки, а в окне просто назначить его на кнопку.
Триггеры
Создадим стиль для кнопки и добавим в него триггеры. Это специальные параметры, которые говорят "когда свойство N имеет значение 1, такие-то свойства должны принять такие-то значения". Давайте рассмотрим на примере:
Мы создали стиль для типа Button и назначили ему ключ. Внутри стиля мы определили коллекцию Triggers, в которое создали 2 триггера — для наведения мыши и для отведения мыши.
Триггер состоит из 2 частей: определения, на каком свойстве и при каком его значении он срабатывает, и коллекции Setters, которая говорит, какие свойства при этом меняются.
Я меняю свойства RenderTransform и BorderThickness, а при отведении мыши возвращаю их обратно.
Для подключения стиля к кнопке просто зададим ей стиль, добавив свойство:
Style="{StaticResource TrigerredButtonStyle}"
Для иллюстрации на картинке я увеличу кнопку не на 5, а на 50 процентов:
Кнопка увеличилась в размерах, и её границы выросли тоже. Теперь сделаем тоже самое с помощью анимаций:
Анимации
Подключим анимации так же с помощью триггеров, но на этот раз поступим по другому:
1. Определим дефолтные значения прямо в стиле, а не будем возвращать их в триггере
2. В триггере переопределим коллекции EnterActions и ExitActions и добавим в них анимации.
Стиль получился длинный, поэтому 2 скрина (ссылка на гитхаб будет в конце статьи):
Что происходит:
- На строках 65-66 определили тип, для которого пишем стиль, и его ключ
- На строках 66-72 определили дефолтные значения, если ничего не происходит
- Далее только один триггер — на IsMouseOver=True
- В нём переопределяем коллекции EnterActions и ExitActions
- Далее внутри BeginStoryboard и Storyboard определяем наши анимации: какое свойство анимируем, как долго идёт анимация и до какого значения.
- В коллекции ExitActions делаем анимацию до первоначальных значений
Такой результат получился (без гифки, но можете зайти в репозиторий и проверить):
Заключение
Что ж, сегодня мы узнали про стили, триггеры и анимации в WPF. Изучайте, экспериментируйте и делайте свои плагины красивыми.
Дублирую ссылку на итоговый коммит в моём репозитории.
Не забывайте подписываться на мой телеграм-канал о Revit API и до новых встреч!