Наш WYSIWYG UI XAML-редактор теперь доступен и в Visual Studio Code для OpenSilver-приложений. Карточка бургера на скриншоте полностью сделана через редактор.

Расширение можно установить из Visual Studio Marketplace абсолютно бесплатно.

Про OpenSilver

OpenSilver — это открытый фреймворк для разработки приложений, в котором для интерфейсов используется XAML, а для логики — C#, F# или Visual Basic.

Ранее я писал, что диалект XAML в OpenSilver основан на версии из Silverlight и главная цель фреймворка — миграция Silverlight-приложений. Однако команда OpenSilver уже завершила реализацию всех запланированных API из Silverlight. А поскольку Silverlight является подмножеством WPF, теперь проект ориентируется на покрытие возможностей WPF, чтобы разработчики могли переносить свои WPF приложения на веб и другие (мобильные и десктопные) платформы.

Дизайнер

Наш дизайнер доступен как:

1. Самостоятельное веб-приложение — https://xaml.io.

2. Часть расширения для Visual Studio.

3. Новое расширение для Visual Studio Code!

Дизайнер позволяет:

• Располагать готовые компоненты на рабочей области с помощью Drag’n’Drop.

• Гибко настраивать компоненты, используя различные подходы.

• Применять ИИ (AI) для редактирования текущего интерфейса и генерации нового.

При этом XAML-код обновляется моментально и синхронизируется в обе стороны, так что можно комбинировать визуальное редактирование и ручное изменение XAML.

Подробнее про дизайнер я писал полгода назад.

Миграция

Мы решили добавить дизайнер в Visual Studio Code, который работает на Windows, macOS и Linux. Следовательно, сам редактор тоже нужно было сделать кроссплатформенным.

С самого начала разработки мы закладывали архитектуру так, чтобы продукт мог работать в разных средах и на разных платформах. В итоге миграция прошла относительно легко и просто. Конечно, кое-где пришлось заменить «\» на Path.DirectorySeparatorChar, но мы справились. ;)

Из любопытных случаев: при тестировании на macOS в одном из смигрированных приложений возник OutOfMemoryException. Этот код 15 лет работал в Silverlight, затем 5 лет в OpenSilver (на Windows или в браузере), но на macOS в дизайнере внезапно “упал”.

Примерно такой был код:

double[] GetColumns(double availableWidth, double desiredColumnWidth)
{
    var numberOfColumns = (int)Math.Floor(availableWidth / desiredColumnWidth);
    var numColumns = Math.Max(1, numberOfColumns);
    return new double[numColumns];
}

Есть идеи почему так происходило?

Мы также были приятно удивлены, когда всё заработало на ARM без каких-либо правок. Теоретически мы понимали, что не используем платформозависимых вызовов, но практика иногда преподносит сюрпризы.

Глобально сам дизайнер — это отдельное .NET-приложение, работающее в фоновом режиме. Каждое IDE-расширение (для Visual Studio, VS Code и т. д.) реализует лишь тонкий слой для отображения результатов в IDE. Для взаимодействия между IDE и редактором мы используем Named или Anonymous Pipes в зависимости от платформы. Формат сериализации — MessagePack; он показал отличную производительность, хотя нужно внимательно подходить к выбору реализации. Для Node.js, например, взяли msgpackr, который, по нашим замерам, работает быстрее других аналогов.

Планы на будущее

Мы продолжим развивать наш дизайнер для всех платформ и добавлять новые функции. Будем рады услышать ваши идеи и пожелания, особенно если вы опытный XAML-разработчик. Задача сделать действительно удобный XAML-редактор оказалась намного сложнее, чем могло показаться вначале. Но, например, нам очень нравится наш UX с “якорями” — к нему мы пришли не сразу:

Также мы планируем продолжать улучшать IDE-версии дизайнера. В частности, хотим добавить XAML Language Server для расширения в Visual Studio Code. А ещё есть желание выпустить наше расширение для Rider.

Спасибо за внимание!