Всем привет! Решил написать небольшой цикл статей по созданию плагина с пользовательским интерфейсом с нуля. Для того, чтобы было проще ориентироваться в происходящем, рекомендую для начала ознакомится с подборками статей про Revit, если вы их ещё не читали:
Описание задачи
Имеем вот такую ситуацию: труба пересекается с воздуховодом (с чем угодно, на самом деле).
Необходимо сделать обход трубой препятствия. Пользователь выбирает направление обхода (вверх/вниз) для горизонтальных/наклонных, вправо/влево/вперёд/назад для вертикальных, расстояние смещения и необходимость работать циклично с теми же настройками или после каждого раза спрашивать о новых настройках. Затем нажимает "Запуск" и выбирает трубу. Нужно сделать 2 клика на трубе в точках разрыва. Результат работы плагина:
Плагин реализуем для версий Revit 2020 — 2024, в плагине добавим создание установочного файла, чтобы пользователю не приходилось что-либо перемещать куда-либо.
Создание проекта
Чтобы не мучаться с созданием проекта, я воспользуюсь готовым шаблоном от Романа Nice3Point, расположенного в открытом доступе по ссылке. В шаблоне Романа реализована поддержка нескольких версий Revit, создание установочника msi, поддержка библиотеки Community.Toolkit.Mvvm, а также некоторые другие фичи.
Почему я не использую свой шаблон, о котором писал в своей статье? Главным образом потому, что там нет поддержки нескольких версий Revit и создания установочного файла, а я не вижу смысла изобретать велосипед, когда он уже изобретён. Да и основная цель той статьи была — показать, что так можно сделать, откуда что берётся и как получается.
Установка шаблона
Перед созданием проекта рекомендую внимательно прочитать его описание на странице в Wiki — там много всего и я могу не учесть все нюансы. Отмечу принципиальные:
- Установим .NET SDK
- Установим nuget-пакет Nice3point.Revit.Templates (это действие добавит нам в VS нужные шаблоны), как работать с nuget-пакетами я рассказывал здесь.
- Установим Nuke global tool командой в терминале:
dotnet tool install Nuke.GlobalTool --global
Эта штука позволит нам выполнять локальную сборку msi файла на компьютере.
Создание проекта
Создаём проект также, как обычно, но выберем другой шаблон:
Далее зададим название и выберем тип надстройки Application и тип окна Modal.
Получим что-то подобное:
Обратите внимание, что тут немножко по другому выполняется отладка. При запуске проекта (в режиме отладке или без) запускается Revit, версии в соответствии с выбранной конфигурацией. Если у вас запустился не тот Ревит, выберите другую конфигурацию, а не меняйте существующую. Все нужные файлы сразу переносятся в нужные папки. В режиме отладки работает горячая перезагрузка (только с изменениями XAML не работает).
Создание окна
Мне не очень нравится стиль элементов WPF по умолчанию. Однако, этот фреймворк даёт нам возможность самостоятельно создать какой угодно дизайн какого угодно элемента. Минусом является то, что это сложно, долго, и может получится некачественный результат. Поэтому я спросил ChatGPT, какие есть бесплатные библиотеки элементов WPF и решил использовать MaterialDesignXAML Toolkit.
Добавление библиотеки
Необходимо установить 3 nuget-пакета:
Далее просто добавим в ресурсы следующую информацию (об этом есть указание на их сайте. При добавлении ресурсов учитывайте, что у нас не Application, а Window:
Чтобы было проще разобраться в библиотеке компонентов, я скачал демо-приложение со страницы последнего релиза: https://github.com/MaterialDesignInXAML/MaterialDesignInXamlToolkit/releases/tag/v4.9.0
Там можно смотреть, какие есть компоненты, как они себя ведут, и выбирать понравившиеся. Вот так оно выглядит:
Основной цвет темы и цвет акцента можно менять из одного места в ресурсах нашего окна, что довольно удобно.
Ну и накидаем первоначальный дизайн окна. Я не дизайнер, поэтому покажу вам, что получилось, потом отдельно остановимся на интересных моментах. А в конце вы сможете посмотреть код на GitHub.
Круглые кнопки, подсказки в текстовых полях, ещё и анимации встроенные. Красота!
Давайте по порядку:
Скруглённые кнопки
Я выбрал понравившуюся кнопку в демо-приложении, нажал рядом с ней на кнопку с кодом. Увидел это:
Значит, нам надо сделать 3 вещи:
- Задать ссылку на namespace materialDesign
- Скопировать стиль (необязательно, они и по дефолту красивые)
- Выбрать радиус закругления
На гитхабе подсмотрим ссылку — в начало окна добавим:
xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
Ну а код для кнопок будет такой:
Сверхкастомные текстовые поля
Обычный TextBox такого не позволяет, поэтому тут разработчики библиотеки создали дополнительные классы: TextFieldAssist и HintAssist. Обращаясь к их свойствам, мы задаём иконку в начале текста, и текст подсказки.
Также я решил использовать валидацию введённого значения на базе примера из Microsoft — написал класс, который производит проверку введённого значения. Поэтому получилось чуть сложное выражение для записи привязки, зато пользователь поймёт, что от него хотят:
Код для текстбоксов получился такой:
Честно говоря, библиотека Material Design даёт огромное поле для экспериментов над дизайном окон, и там можно надолго залипнуть в демо-приложении, выбирая стиль элемента для своего приложения.
Остальные элементы
Тут я особо ничего не выдумывал — просто выбрал стиль понравившегося элемента и скопировал его. Так что и описывать особо нечего. Отмечу, что стандартные элементы имеют анимации при взаимодействии с ними и это выглядит очень прикольно.
Заключение
Итоговый код смотрите в моём новом репозитории на GitHub.
Заполнение окна, завершение написание плагина и создание msi-установочника рассмотрим в следующих частях.
Не забывайте подписываться на мой телеграм-канал и до новых встреч!