Speeding up .NET application development with Uno Studio

Developer productivity is one of those topics that never goes away. How can we not only make it easier to deliver code but also make that code more reliable and resilient? As a result, we’re seeing something of a renaissance in developer tools, from AI-based pair programming to low-level refactoring services, and even better ways of highlighting both syntax and errors before we’ve even started to run a compiler or a debugger.

We’ve seen a lot of new tools from advances in compilers and languages;.NET’s Roslyn compiler allows editors to examine what code will do, line by line, as you write it. At the same time, it allows developers to edit code as it’s being debugged so you can evaluate fixes or try novel approaches without having to switch context. It’s a more efficient way to work, using debugging tools at the same time as an editor, so you can see your code in a live application while you’re writing it.

This is an excellent way of working with business logic, but it doesn’t work well with a control-based layout tool such as XAML. Here you’re working with interactions between code and layout, both working through different sets of tools in the same IDE. With layout prerendered, you’re unable to use the default hot-reload tools to change design on the fly.

This puts a blocker on developer collaborations with designers. There’s no way to have the same type of pair-programming relationship where both disciplines can update a running application at the same time and see the effects on user experience and the back-end code that drives that experience. No matter what changes need to be made, whether something as small as changing a font size or as big as adding a whole new view, code needs to be passed from developer to designer and back again each time a change needs to be made. This slows down development and forces both sides to stop and start, breaking flow and switching contexts.

Bringing live development to design

Back in the early days of the web, Dreamweaver and other tools pioneered live page design, showing how a page would look to a user as you edited its layout. Today’s application development world has some of that capability through tools like Visual Studio’s Expression Blend XAML designer, but there is still a gap between the tools used by designers and by developers.

How can we allow designers and developers to work on code and design at the same time on the same screen, making changes to live applications as they’re running? Working with separate design-time tools has one big flaw—you’re never using live data. There’s often a need for developers to extract a set of placeholder data and build mock APIs so that designers can at least get a feel for what a running application should contain.

Hot Design in Uno Studio

The team behind the cross-platform Uno.NET tool recently announced a possible solution: the new Hot Design tool, shipping as part of Uno Studio. This brings a similar experience of Microsoft’s code-centric.NET dynamic development tools to XAML UI development. Instead of going through a long development/design cycle to update code, designers and developers can collaborate on quick edits to XAML layouts while debugging and testing code.

The new Hot Design tool allows you to inject new XAML code into a running application, opening a design tool inside your running application and letting you change the parameters and properties of the controls in a view. There’s no need to back out of your code either; you can be deep inside a stack and still edit the design of the current page.

The tool is part of the Uno Studio libraries, so when you’re debugging code with it enabled, a small overlay icon in your application title bar can be clicked to open the Hot Design view. This replaces the application window, giving you tools to navigate the control tree or simply select a control for editing from the application canvas. When the Hot Design window is active, the application is paused (much like using a debugger breakpoint), so you don’t have to contend with a live UI.

Uno calls this the Heads-Up Display, and it gives you access to the complete control hierarchy, starting with the window and going down to individual text items and more. The tool is only active when you’re running inside a debug environment, so there’s no worry about it activating when code is compiled and shipped, as it’s removed by the build process.

Changes made in the Hot Design tool are reflected in the application XAML. At the same time, if you’re editing the XAML in Blend or Visual Studio, any changes can be shown via the Hot Design process in the context of the application you’re building. The idea is to have a two-way process that lets designers and developers work in the tools they prefer. This matches well with Microsoft’s philosophy of going to where the developers are.

At the same time, you can use the Hot Load tools to change the underlying C# code, tying new data sources to grid controls and working with data bindings at the same time the design is being modified to fit new fields and controls. Maybe you’re adding a gallery to a shopping application or new, richer inputs and outputs to a customer support platform. You’re not limited to the built-in Uno WinUI 3 controls; you can use your own custom controls as well.

Getting started with Hot Design

Uno recently made a preview of its Hot Design tool available to any registered user, even those with a free account. I decided to give it a spin in a Windows desktop application in Visual Studio.

There are a lot of prerequisites before you can get started, but a simple command line tool checks for missing requirements and then tries to install them where necessary. For my development PC that meant ensuring that the latest version of Microsoft’s JDK and Google’s Android developer tool were installed and that I had the right version of Visual Studio with the correct workloads configured.

The uno-check tool is installed via the.NET command line and, once installed, you can run it from the same terminal. You may need a couple of reboots to ensure everything is in place. There was one requirement that uno-check couldn’t automate: installing an Android device emulator. You need to do this from inside Visual Studio, which launches the official Android device manager so you can quickly set up a local virtual machine (in my case, a Pixel 8 Pro running x64 code).

With everything in place, you can install the Uno Platform tool from the Visual Studio Marketplace. Installation can take a little time and requires restarting the IDE. Once installed, the Uno extension adds application templates and the Hot Reload and Hot Design plug-ins, ready for use. Initial code can be built from Uno’s web site.

If you haven’t logged into your Uno account from Visual Studio, you’re now prompted to do so. This gives both free and paid users access to the core Uno Studio services, with paid users able to use the platform’s Figma integration.

Once the tool is installed and you’ve started working in an Uno template, you can add some code. I built a basic two-view application that had an input box in one view and a text area to display my input in the second. To launch Hot Design, I simply set the target environment to desktop and launched the Visual Studio debugger. To switch to the Hot Design view, I clicked the icon in the Uno toolbar and started editing.

Having tools like this in Visual Studio (and VS Code and other.NET development tools) is a good way to speed up the developer/designer loop. You gain improved collaboration and integration with both code and XAML editing tools—with support for desktop, mobile, and WebAssembly—to get your code looking good quickly.

With application development deadlines getting ever shorter, a tool like this is essential. We need to avoid forcing context shifts on designers and developers. Keeping them in the flow of their code reduces the risks of errors and bugs. Uno may be best known as a set of cross-platform design controls, but developing and building applications with it has taught the team many lessons, and they’re passing that experience on to the rest of us.