New AI UI designer for “Silverlight” applications

We are developing a framework OpenSilver — open source successor to the Silverlight platform. In version 3.0, we added a modern UI designer to Visual Studio extension and they did it web version designer.

A little bit about OpenSilver

When Microsoft announced that it was ending support for Silverlight, an independent team decided to create an open-source implementation so that applications written in Silverlight many years ago could run in modern browsers with minimal changes.

In ideal conditions, it's easy enough to copy the XAML and C# code, make a new csproj, add the OpenSilver nuget package and run it.

Today, OpenSilver is a free application development framework. The XAML markup language is used for the interface, and C#, F# or Visual Basic is used for the logic. You can develop web applications without using HTML, CSS and JavaScript. But if you want to use them, it is also possible.

Silverlight left a warm, lamp-like design and names of classes, methods, components, etc., although this can be changed. For example, you can add a XAML version from MAUI, and implement the missing components. And then it will be possible to launch MAUI applications in the browser.

How a UI designer started

At a certain stage of the framework development, the need to restart the project every time to view changes in the layout became tiresome. That's why last year we added the ability to preview component changes directly in Visual Studio during development. This new feature clearly took off and somehow quickly became clear that a full-fledged designer needed to be made.

What to write in? Well, we are developing a framework, so we decided to write in OpenSilver.

What can the first version do?

We are just at the beginning of our journey, but we have big plans. I hope that even the first version already has something to be proud of:

• Component library: More than 100 ready-to-use components with Drag'n'Drop support. Just drag an element to the work area, and the xaml code will immediately update, and the new element will appear on the screen.

• Document tree: Ability to explore the visual tree based on element patterns.

• Modifying existing components: We've provided a variety of options for editing current properties and added different panels depending on the type of element or property, trying to accommodate a variety of scenarios.

• Synchronization of changes: You can change XAML code manually or through the designer, and all changes will be synchronized in both directions in real time.

• Demo data: We have prepared a variety of demo data so that you can see at a glance how the element will work. This is especially useful for charts.

AI

Since OpenSilver supports maximum compatibility with Silverlight application code, all popular AI models can generate and modify OpenSilver applications. We couldn't miss this opportunity, so we added AI chat.

The AI ​​assistant can make changes to the existing code. You can specify a specific element to change, as well as upload images with the desired design.

I use it myself in my daily work, and it helps me, although sometimes it is capricious.

AI chat works absolutely free, but there are daily restrictions and authorization is required to use it.

Pitfalls

Implementing Drag'n'Drop, especially from a user experience perspective, turned out to be more complex than we expected. We ended up having to develop strategies for different types of elements. We've covered a lot of scenarios, but there's still room for improvement and additions.

Integrating the designer into Visual Studio took longer than expected. In the current version, the designer itself runs as a background process, and all logic runs in this process. The Visual Studio extension is as simple as possible, with a minimum number of dependencies. To render the interface, the extension exchanges messages with the background process. This approach allows migration to other IDEs.

Unexpectedly, there was no ready-made solution for modifying an XML document while preserving formatting. For example, a user can mix spaces and tabs in their XAML file, add spaces after attribute names and equal signs, etc. We needed to make changes to an existing XAML document and preserve formatting as much as possible to reduce changes in git diff. To do this, we had to write our own serializer with support for all these scenarios. We managed to do it, but I still think there should be a ready-made solution. Maybe someone can tell me?

Web version — xaml.io

Since the designer is an OpenSilver application, we were able to easily make a web version of the designer — https://xaml.io. I would like to emphasize that this web application is written in C#. This is made possible by WebAssembly. It also uses JavaScript libraries such as the Monaco editor and the color picker component. All of this works together beautifully.

The web version has the same functions as the extension for Visual Studio, including the work of the AI ​​assistant. And here you can also lay out your first XAML component and continue development in your favorite IDE by downloading the current project.

In the future we plan to add code-behind support.

What's next?

We plan to integrate our designer into other popular IDEs for all operating systems.

I would also like to cover more user scenarios in the designer. There is a huge scope for improvement here.

And we are open to feedback and suggestions for improvement.

Thank you!