Sometimes, if you want to get an early look at a new tool from Microsoft, you must get out your compiler and build it from source. That’s the case with the first public look at the new open source release of XAML Studio, one of its .NET UI design tools, which is transitioning to the stewardship of the .NET Foundation.

XAML Studio is a tool for prototyping .NET user interfaces. Developed in Microsoft’s Garage internal incubation program, it was initially developed to build Universal Windows Platform (UWP) applications. Since its initial launch, UWP has evolved to the more widely applicable WinUI, making XAML Studio less useful, especially when building cross-platform .NET applications.

What came before

If you downloaded the original release, you would see a basic grid view along with a code editor. Edit the code, and changes would be reflected in the grid, allowing you to quickly design new application UIs. It’s a powerful tool, bringing some of the familiar experience of tools like Adobe’s Dreamweaver to XAML and .NET. A library of controls can be dropped into the editor and configured with links to either mock data or real-time data, so you can see how your design works with the data users will be accessing.

The latest public build of XAML Studio is Version 1.1, from 2019. There’s been a lot of change in .NET during the past six years, and as updates to XAML Studio needed new WinUI components, development continued behind closed doors. With the release of essential controls in the Windows App SDK, development can now move into public view again, and the first version of XAML Studio 2.0 has appeared on GitHub.

Building XAML Studio 2.0

Getting started with the new release requires an up-to-date Windows development environment, with Visual Studio 2022 configured for building Windows applications and with a recent release of the Windows SDK. Your Windows install should have developer mode enabled so that it will run an unsigned Store application from Visual Studio.

With the prerequisites in place, you first need to clone the application repository from GitHub and then switch to the dev branch because the main branch contains the 1.1 release currently in the Microsoft Store. Once downloaded, you can open the source’s solution file in Visual Studio, making sure the XamlStudio project is set as the startup project. There are three other projects in the solution: Microsoft.Toolkit.Future, XamlStudio.Toolkit, and XamlStudio.Toolkit.UnitTests.

You can now build and run the application. This may trigger downloading additional dependencies, but once they’re in place, the application should launch. I first used the Debug option, and as I was working on an x64 system, I made sure that I was building x64 binaries and debugging on my local system. The solution should build on Arm as well, but currently there are issues, and the development team is looking for Arm expertise to help find fixes.

Trying out the new XAML Studio

The new release looks much like the current 1.1 release, but a lot of work has been done to add support for the current generation of XAML controls and components, as well as support for the latest .NET releases. You can see a lot of this from the application’s Toolbox menu, which supports controls from the Community Toolkit and from WinUI. It’s a long list of tools, with the option to favorite frequently used controls and a search option to quickly narrow down the control you need. Work is ongoing, and the team has published a road map for the release.

Each control in the menu offers a link to online documentation so you can quickly check the requisite syntax. This feature turns out to be important, as adding a control to a page only adds the XAML tag without any parameters. The Monaco-based editor will indicate errors, but there’s no autocomplete or suggested syntax, so you may want to use this in conjunction with other development tools.

It’s important to note that XAML Studio is not a full visual designer. You will do all your work in its code editor, with the just-in-time compiler rendering XAML on the fly. It would be better to have some form of two-way link between the editor and layout, but it’s still very useful to see what your XAML will look like as you write it. If you have a connection to either a mock data source or to live data, you can see how it responds to and presents the data that a full application will use.

Understanding the Properties explorer requires a bit of work. You need to switch the editor mode to Modify and select the XAML element you want to explore. The relevant properties are then displayed in the explorer, and you can see what’s currently set as well as other possible properties. There appears to be a plan to allow this to edit your XAML code, but for now only a few properties can be changed; even then, the application throws an exception and needs to be manually stepped through in the Visual Studio debugger. Nothing seems to happen when you add new properties, though they do persist in the explorer.

Despite these issues, there’s a lot to like about a tool that gives you the foundations of an interactive XAML Designer. Blend is well past its prime, so a new tool that fits into modern development toolchains is worth supporting.

Contributing to development

If you want to contribute to the project, it’s running under Microsoft’s open source code of conduct, like many others, and as well as accepting code contributions (once you’ve accepted the project’s Contributor Licence Agreement), there is a discussion forum where it’s possible to suggest and vote on features. One area that certainly needs work is providing complete documentation for the application since much of the necessary feature discovery is currently by trial and error.

As this is pre-release code you will find bugs; I tripped over more than one as I explored the application. The public 1.1 release is stable, so you can expect the final Store release of XAML Studio 2.0 to be much the same. Issues are to be expected at this stage of development, even though the internal team has worked to keep on top of the many changes to .NET and to XAML in the past six years.

As part of that process, the team has released many of its own tools to the .NET community, including a C# wrapper for the Monaco editor used in Visual Studio Code. An annual release cadence for .NET and a rapid development model for WinUI require a lot of heavy lifting from teams building development tools—another good reason for open sourcing the application.

XAML Studio in the .NET toolchain

Open sourcing a tool like this makes a lot of sense, especially as the .NET community is working with three different UI platforms: Microsoft’s own Win UI and MAUI and the third-party Avalonia and Uno platforms. By open sourcing XAML Studio, Microsoft makes it possible for both Avalonia and Uno to add their own features and tools to a common development platform or even fork their own versions as part of their own developer environments. There’s even the possibility of third-party developer tool platforms like JetBrains’ Rider working with and contributing to what is now a community tool rather than part of a competing developer ecosystem.

Certainly, I’m looking forward to seeing how XAML Studio becomes integrated into Visual Studio Code–based workflows and how it might be used as part of Uno’s Hot Design. A lot of innovation is happening in the .NET community, and bringing projects like this to the .NET Foundation should help add that innovation to the tools we use in our day-to-day application development. If this move is successful, maybe it’s time for Microsoft to open source more of its .NET development tools.