NEW: OpenSilver 3.2 Brings WPF Apps to iOS, Android, and Beyond with MAUI Hybrid!

Quote
Talk to an Expert

Introducing OpenSilver 3.0 with the First AI-Powered UI Designer for .NET!

 

July 9, 2024

Dear .NET community,

Today, we’re thrilled to announce the release of OpenSilver 3.0, the free and open-source UI framework for building modern .NET web applications in C# and XAML!

TL;DR;
What’s New in OpenSilver 3.0:

  • A drag-and-drop User Interface Designer with over 100 built-in controls, simplifying the creation of .NET apps and websites. We believe it’s one of the most user-friendly designers available. 
  • AI functionality (currently in Preview) integrated into the designer, allowing users to generate complex UIs and make modifications using natural language commands. Simply describe your desired changes, and the XAML code will be updated automatically. You can even upload an image or a mockup, and the AI will generate an approximation. 
  • OpenSilver 3.0 expands support to VS Code, in addition to the existing support for Visual Studio, extending the development environment to Windows, Mac, and Linux systems. 
  • XAML.io: the first Online XAML Designer: start building your app directly in the web browser – no installation required – then transition to Visual Studio for further development and deployment. XAML.io was itself built using OpenSilver.

Features Tour

  • Chat with AI to build or refine your user interface (Preview)

In the following example, while editing MainPage.xaml in Visual Studio 2022, we ask the AI to create a landing page for a fictitious product named Adventure Works CRM:
 
and this is the result:

 

  • Iterate and provide follow up instructions to the AI

You can refine the AI-generated UI by continuing the conversation. In the following example, we ask to add a top navigation menu and use pastel colors:

 

This is the result:

 

  • Make changes on specific elements

You can give the AI instructions for particular areas of the user interface. To do so, simply select an element, click the “AI” button from the contextual menu, and type your prompt. The AI will handle the rest.

In the following example, we select the “Pricing” section of the landing page, and we ask the AI to create a free tier, and to add Download buttons to the paid tiers:


and this is the result:

 

 

  • Upload Images and Mockups

The AI can also take into account images and mockups provided with the prompt.  In the following example, we use the Windows Snipping Tool to capture the UI and draw on top of it. For example, to replace a circle with a triangle, we just draw the triangle:
 

We then copy/paste the image into the AI chat, and the AI will make the adjustments:


 

Here is the result: