Мы занимаемся разработкой фреймворка OpenSilver — open-source наследника платформы Silverlight. В версии 3.0 мы добавили современный UI-дизайнер в Visual Studio расширение и сделали веб-версию дизайнера.
![UI-дизайнер в Visual Studio UI-дизайнер в Visual Studio](https://habrastorage.org/getpro/habr/upload_files/fcb/1c0/058/fcb1c0058631363b78a051e473fee0b1.png)
Немного про OpenSilver
Когда компания Майкрософт объявила о прекращении поддержки Silverlight, независимая команда решила создать open-source реализацию, чтобы приложения, написанные на Silverlight много лет назад, могли работать в современных браузерах с минимальными изменениями.
В идеальных условиях достаточно просто скопировать код XAML и C#, сделать новый csproj, добавить OpenSilver nuget-пакет и запустить.
На сегодняшний день OpenSilver — это бесплатный фреймворк для разработки приложений. Для интерфейса используется язык разметки XAML, а для логики — C#, F# или Visual Basic. Вы можете разрабатывать веб-приложения без использования HTML, CSS и JavaScript. Но если вы хотите их использовать, это тоже возможно.
От Silverlight остались теплый ламповый дизайн и названия классов, методов, компонентов и тд., хотя это можно изменить. Например, можно добавить версию XAML из MAUI, и реализовать недостающие компоненты. И тогда появится возможность запускать MAUI приложения в браузере.
Как начинался UI-дизайнер
На определенном этапе развития фреймворка необходимость каждый раз перезапускать проект для просмотра изменений в верстке стала утомительной. Поэтому в прошлом году мы добавили возможность предпросмотра изменений компонентов прямо в Visual Studio во время разработки. Эта новая возможность явно выстрелила и как-то быстро стало ясно, что нужно делать полноценный дизайнер.
На чем писать? Так-то мы фреймворк разрабатываем, поэтому приняли решение писать на OpenSilver.
Что умеет первая версия?
Мы только в начале пути, но у нас большие планы. Надеюсь, что даже в первой версии уже есть чем гордиться:
Библиотека компонентов: Более 100 готовых к использованию компонентов с поддержкой Drag'n'Drop. Просто перетащите элемент на рабочую область, и xaml код сразу обновится, а новый элемент появится на экране.
Дерево документа: Возможность исследовать визуальное дерево с учетом шаблонов элементов.
Изменение существующих компонентов: Мы предусмотрели множество вариантов редактирования текущих свойств и добавили разные панели в зависимости от типа элемента или свойства, стараясь учесть разнообразные сценарии.
Синхронизация изменений: Вы можете изменять XAML код вручную или через дизайнер, и все изменения будут синхронизироваться в обе стороны в реальном времени.
Демо данные: Мы подготовили разнообразные демонстрационные данные, чтобы сразу было видно, как элемент будет работать. Это особенно полезно для графиков.
AI
Поскольку OpenSilver поддерживает максимальную совместимость с кодом Silverlight приложений, все популярные AI модели могут генерировать и изменять OpenSilver приложения. Мы не могли упустить эту возможность, поэтому добавили AI чат.
![Пример работы AI ассистента Пример работы AI ассистента](https://habrastorage.org/getpro/habr/upload_files/e7b/0ee/fad/e7b0eefadb48a955d0aad8b0bafe2136.png)
AI ассистент может вносить изменения в существующий код. Можно указывать конкретный элемент для изменения, а также подгружать картинки с желаемым дизайном.
Я сам использую его в повседневной работе, и он мне помогает, хотя иногда капризничает.
AI чат работает абсолютно бесплатно, но есть дневные ограничения и для его использования требуется авторизация.
Подводные камни
Реализация Drag'n'Drop, особенно с точки зрения удобства для пользователя, оказалась сложнее, чем мы ожидали. В конечном итоге нам пришлось разрабатывать стратегии для разных типов элементов. Мы учли множество сценариев, но все еще есть желание улучшить и дополнить их.
Интеграция дизайнера в Visual Studio заняла больше времени, чем хотелось. В текущей версии сам дизайнер запускается как фоновый процесс, и вся логика работает в этом процессе. Расширение для Visual Studio максимально простое, с минимальным количеством зависимостей. Для отрисовки интерфейса расширение обменивается сообщениями с фоновым процессом. Такой подход позволяет мигрировать под другие IDE.
Неожиданно, не нашлось готового решения для модификации XML документа с сохранением форматирования. Например, пользователь в своем XAML файле может смешивать пробелы и табуляции, добавлять пробелы после имен аттрибутов и знаков равно и т.д. Нам нужно было внести изменения в существующий XAML документ и максимально сохранить форматирование, чтобы уменьшить изменения в git diff. Для этого пришлось писать собственный сериализатор с поддержкой всех этих сценариев. Мы справились, но до сих пор считаю, что должно быть готовое решение. Может, кто подскажет?
Веб версия — xaml.io
![Пример компонента на xaml.io Пример компонента на xaml.io](https://habrastorage.org/getpro/habr/upload_files/bfa/4a2/7a6/bfa4a27a678d8d4e85badc26a4f12b60.png)
Поскольку дизайнер — это OpenSilver приложение, то мы с легкостью смогли сделать веб версию дизайнера — https://xaml.io. Подчеркну, что это веб-приложение написано на C#. Это стало возможным благодаря WebAssembly. Здесь также используются JavaScript библиотеки, такие как редактор Monaco и компонент для выбора цветов. Все это прекрасно работает вместе.
Веб версия обладает теми же функциями, что и расширение для Visual Studio, включая работу AI ассистента. А также здесь можно сверстать свой первый XAML компонент и продолжить разработку в любимой IDE, скачав текущий проект.
В будущем планируем добавить поддержку code-behind.
Что дальше?
Мы планируем интегрировать наш дизайнер в другие популярные IDE под все операционные системы.
Также хочется покрыть больше пользовательских сценариев в дизайнере. Тут огромный простор для усовершенствований.
И мы открыты к обратной связи и предложениям по улучшению.
Спасибо!