Мы занимаемся разработкой фреймворка OpenSilver — open-source наследника платформы Silverlight. В версии 3.0 мы добавили современный UI-дизайнер в Visual Studio расширение и сделали веб-версию дизайнера.

Немного про 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 чат работает абсолютно бесплатно, но есть дневные ограничения и для его использования требуется авторизация.

Подводные камни

Реализация Drag'n'Drop, особенно с точки зрения удобства для пользователя, оказалась сложнее, чем мы ожидали. В конечном итоге нам пришлось разрабатывать стратегии для разных типов элементов. Мы учли множество сценариев, но все еще есть желание улучшить и дополнить их.

Интеграция дизайнера в Visual Studio заняла больше времени, чем хотелось. В текущей версии сам дизайнер запускается как фоновый процесс, и вся логика работает в этом процессе. Расширение для Visual Studio максимально простое, с минимальным количеством зависимостей. Для отрисовки интерфейса расширение обменивается сообщениями с фоновым процессом. Такой подход позволяет мигрировать под другие IDE.

Неожиданно, не нашлось готового решения для модификации XML документа с сохранением форматирования. Например, пользователь в своем XAML файле может смешивать пробелы и табуляции, добавлять пробелы после имен аттрибутов и знаков равно и т.д. Нам нужно было внести изменения в существующий XAML документ и максимально сохранить форматирование, чтобы уменьшить изменения в git diff. Для этого пришлось писать собственный сериализатор с поддержкой всех этих сценариев. Мы справились, но до сих пор считаю, что должно быть готовое решение. Может, кто подскажет?

Веб версия — xaml.io

Поскольку дизайнер — это OpenSilver приложение, то мы с легкостью смогли сделать веб версию дизайнера — https://xaml.io. Подчеркну, что это веб-приложение написано на C#. Это стало возможным благодаря WebAssembly. Здесь также используются JavaScript библиотеки, такие как редактор Monaco и компонент для выбора цветов. Все это прекрасно работает вместе.

Веб версия обладает теми же функциями, что и расширение для Visual Studio, включая работу AI ассистента. А также здесь можно сверстать свой первый XAML компонент и продолжить разработку в любимой IDE, скачав текущий проект.

В будущем планируем добавить поддержку code-behind.

Что дальше?

Мы планируем интегрировать наш дизайнер в другие популярные IDE под все операционные системы.

Также хочется покрыть больше пользовательских сценариев в дизайнере. Тут огромный простор для усовершенствований.

И мы открыты к обратной связи и предложениям по улучшению.

Спасибо!