Hot Design: The Next-Generation Visual Designer for .NET Apps

Last Updated on May 14, 2025 by Aram

Hot Design is the latest and greatest tool introduced by Uno Platform as part of Uno Platform Studio.

It is an evolutionary innovation that transforms the way you can design your app interfaces in Uno Platform.

A unique approach that turns your running app into a live designer where you can apply all your design changes which will be directly reflected on XAML.

Besides the announcement of .NET 9, Hot Design was revealed at the dotnetconf 2024, but has recently been announced as GA.

This article will give you an overview of Hot Design along with its key benefits, and you will learn how to setup your development environment to use the latest version of Uno Platform and its flagship feature – Hot Design using Visual Studio 2022 (but can also be used with VS Code or Rider).

We will modify an existing Uno Platform project to redesign its main screen using Hot Design.

Hot Design Key Benefits

Accelerate the Design Iterations

Design your app screens in no time without the need to learn XAML or have special design skills

Get Instant Feedback

Unleash the benefits of Hot Design and Hot Reload and See UI changes in real-time. No more wait for rebuilds

Super-charge your Productivity with Live Data

Test your designs against Real Data rather than lorem ipsum or mocks using DataContext Explorer

Focused Development

Eliminate Context switching between tools and focus on delivering your UI development tasks efficiently and effortlessly

Two-way Sync

Any change using Hot Design directly reflects on XAML, ensuring consistent and unified UI code updates

Consistent UI Across All Platforms

Rapidly explore different screen layouts and instantly visualize how your app will adjust to different form factors

Hot Design Sections

Toolbar & Live Designer Canvas

Quick access to essential actions like: Visualize Layouts & Form Factors, Light/Dark Theme, Hot reload updates

Properties Explorer

Quickly find, modify, and bind key UI properties without leaving the live design environment

Let’s build a dictionary app using Hot Design in Uno Platform

If you are new to Uno Platform, then you can check my other blog post to get a solid start and overview about Uno Platform and its capabilities along with a detailed step-by-step tutorial for how to build a Dictionary App using Uno Platform.

You can otherwise skip the previous tutorial and directly follow my steps here, we will rebuild the same dictionary app but using the new fiery groundbreaking tool – Hot Design.

Development Environment Setup

This tutorial will be based on Visual Studio 2022, if you are using a different IDE, like VS Code or Rider, it should not be that much different.

You can check this getting started guide from the Uno Platform Docs, to help you get started with your preferred IDE.

Open VS 2022, let’s make sure first that you have the latest update of VS 2022, so as of the time of writing this tutorial the latest version is 17.14

Uno Platform Extension

Go to Extensions Menu and Choose Manage Extensions, search for and install Uno Platform extension.

Uno Check

Uno Check is another flagship tool by Uno Platform that helps you prepare your development environment for cross-platform development by a super simple and clear command-line based installation wizard.

Open command prompt and run the follow command to install/update Uno Check:

Then we need to run Uno Check to make sure our environment is ready to start using Hot Design.

Then follow the instructions of Uno-Check, to check and install all the relevant components for your Uno Platform Development.

Activating Hot Design

From Visual Studio 2022, you should be able to easily access the Uno Platform settings window.

Normally, you should be getting a little alert panel from Uno Platform Extension:

So, this is where you will be prompted to sign in or register if you are a new user.

Since I have an account, I will sign in using the login portal of Uno Platform.

Once logged in, you will see your logged in account settings along with the enabled features:

Hot Reload and Hot Design

Using Hot Design on an existing Project

Cloning a Repo

Let’s clone the below project from my GitHub account.

Using VS 2022, choose Clone a repository: https://github.com/aram87/MyDictionaryApp

The project was built using Uno Platform SDK version 5.3.96 using .NET 8.

Upgrading Uno SDK and .NET

Now, in order to use Hot Design, we need to make sure we are using the latest version of Uno SDK, which is currently 6 and .NET 9 of course.

Complete details on the Uno SDK version can be found in this page: https://www.nuget.org/packages/uno.sdk

So let’s edit the global.json solution-level file to make it point to the latest version of Uno SDK which is “6.0.67”

And then edit the project file and replace all the target framework versions from net8.0-* to net9.0-*

Restart VS with the solution, you will notice that all dependencies will be automatically resolved to the latest .NET 9

Before building, we need to amend few breaking changes from Uno Platform 6

Program.cs file

You need to replace SkiaHostBuilder with UnoPlatformHostBuilder which comes from namespace Uno.UI.Hosting;

so your program.cs file should be like the below:

Then edit the project file, and inside the tag <UnoFeatures> replace Http with HttpRefit.

Save and restart Visual Studio with your solution, then build the solution.

It should compile successfully with no errors.

Choose a target run framework. I will choose desktop, since it provides the most stable and reliable experience for Hot Design.

Before running the app, make sure to edit the App.xaml.cs file to replace the EnableHotReload() Method call with UseStudio();

Now run the app in debug mode.

Once the app runs, you will notice a flame icon appearing somewhere on the screen.

This means that Hot Design is readily available for you to start designing and building your interfaces while the app is running.

Enter Hot Design

Now let’s go ahead and select the flame icon (Hot Design).

You will notice that your running app Window has transformed into a full fledged designer canvas:

The current screen shows some basic UI components that displays the dictionary functionality, which is connected to Oxford Dictionaries API.

You can see the actual app, with real data while you are able to edit the design and get an instant feedback.

That’s the power of Hot Design.

Now, let’s see how can we improve this screen design by introducing some UI tweaks with Hot Design:

A burger menu action button, a tab bar, and some UI enhancements.

Adding a burger Menu

From the Elements section, select The [NavigationBar], now from the right panel, search for “main command”, change the Main command mode to ‘Action’

And press on the edit complex button beside the ‘AppBarButton’, you will get a different view, where you can add an AppBarButton:

Now, search for icon and select edit complex type from the Icon in the Miscellaneous section:

Then Choose BitmapIcon:

Now you can choose your preferred icon in the Uri Source, make sure you have the image in your projects, preferrably in the Assets folder

Also, let’s remove the HorizontalAlignment property from the NavigationBar element

And change the content to display a different text:

Also, change the style:

So, you get the final result for the navigation bar design as the below:

I’ll skip the textbox and the search button, since they look fine for now.

Of course you can do whatever you want on any element, like changing their style, font properties, colors, or even placing them side by side but using a different layout element, like a grid.

Now let’s move to the content section, where we will introduce the TabBar and split our search results into separate categories.

Better Experience with TabBar

With a TabBar you can toggle views based on the selection of a tab bar item, this way you can better group your search results to display content relevant to a specific category.

For our dictionary app, we will have 2 categories: Definitions and Thesaurus.

The Definitions section will display the meaning of the term in each of the lexical categories it might have, like noun, verb, adjective…etc.

While the Thesaurus view will display the synonyms of the searched term.

Now, let’s do some minimal changes on the code, to change the way we are processing the synonyms response from the Oxford Dictionaries API.

Code Changes Accompanying the TabBar Addition

Close the running window, and navigate to DictionaryService.cs file

In the Definition record, change the Synonyms property type to be IImmutableList<string>

And then in the Lookup method, fill the Synonyms property with the text selection of the synonyms in senses property

Now when you run the app, you will notice the synonyms is displaying the class name

To fix this, we will move the Synonyms section all together into a different view

Press the flame icon to enter Hot Design Mode.

Adding TabBar

Let’s drag a TabBar into the designer canvas:

Since we are designing inside a Grid, give it a Row value of 2, so it would be positioned right after the button.

Adding TabBarItem

Now drag/drop 2 TabBarItems inside the TabBar

Give them names and region names: Definitions and Thesaurus

Tab bar items work with regions, this is how they get identified when a tab bar item is selected.

Another important property is the Region Attached flag.

You need to enable the attached property for the tab bar, the root grid and the container element that you are toggling the display.

FeedViews Container Grid

Now, since we will be using 2 views to display the content: Definitions and Thesaurus, we will create a new Grid that will hold the FeedViews, one the is the DefinitionFeedView and the other is a new feedview for the thesaurus, which will display the synonyms listed.

Drag/drop a grid into the canvas or inside the elements section, underneath the root Grid element, and give the new grid a row of 3 inside the properties panel.

Make the Region Navigator property as Visibility and keep the visibility property of both FeedViews as collapsed.

and go back to the root grid element and make sure to add another row in the row definitions property, so it would align the new grid element correctly within the root grid

Regions

Now, you will have to set the Region attached flag for the new grid. The same flag should also be checked for both the TabBar and the root grid:

Also you can set the selected tab bar item, so it would be selected by default, let’s do that for the definitions tab bar item.

Change the style to TopTabBarStyle, so it would fit make the height fit with the content of the tab bar items.

The TabBar final look should appear as the below screenshot:

Editing the Feedview Value Template:

As mentioned earlier, we need to move the Synonyms section into the Thesaurus View, so first let’s edit the Value Template of the Definitions FeedView to remove the synonyms text blocks

Then we need to enter the template edit mode of the ListView element inside the FeedView.

Next, delete the synonyms block by either using the delete button on the keyboard, or by choosing delete element name command, and navigate back to the first page.

FeedView to display the synonyms (thesaurus)

Now, let’s drag/drop a new Feedview inside the new Grid

Let’s give it a proper name, as ‘ThesaurusFeedView’, by editing the Name property in the Hot Design mode.

As mentioned earlier, this will be used to hold the synonyms for the searched word

Now, let’s select the ThesaurusFeedView.

Edit the ItemTemplate for the ListView within the Thesaurus FeedView

Of course, you can do whatever design polishing and changes as per your requirements Hot Design

As you can see, all design changes were applied without touching any XAML code, design-related code

Now let’s see how the final design will look like when running the app:

Final Thoughts

Hot Design is an industry-first groundbreaking innovation for building cross-platform .NET apps

Now is the best time to try out Hot Design, if you Purchase today you will get up to 16% off on your yearly subscription.

Uno Platform team is waiting to hear your valuable inputs and feedback on Hot Design, so make sure you connect over these channels:

Uno Platform Discord Channel

Hot Design Known Issues on GitHub

Hot Design Open Issues

Launch Webinar

Uno Platform is hosting a live launch webinar this Thursday (May 15^th – 11 AM EDT) to celebrate the release of Uno Platform 6.0 and the General Availability of Uno Platform Studio!

Join the core team and see live demos, explore new features, and experience performance improvements in action. Plus you’ll be able to chat with fellow devs about everything .NET, ask questions and, you’ll be entered for a chance to win a prize!

References

Watch Announcing Uno Platform Studio and Hot Design during .NET Conf 2024

You can always check the official docs of Uno Platform to learn more about Hot Design.

Also check the official channel of Uno Platform on YouTube for recent videos showcasing the power of Hot Design.

Bonus

Enjoy these beautiful baroque masterpieces, performed by 2 amazing Dutch artists:

Pieter-Jan Belder (harpsichord and organ) and Johannete Zomer (soprano)

J.S. Bach: Notenbuchlein für Anna Magdalena Bach