Create a Counter App with Hot Design™

This tutorial will guide you through using Hot Design to create a simple counter application. The application will include:

  • An Image at the top.
  • A TextBox below the image, where you can set the step size for incrementing the counter.
  • A TextBlock below the TextBox, displaying the current counter value.
  • A Button at the bottom labeled "Increment Counter by Step Size", which updates the counter value based on the step size entered.

Counter App Preview

Note

This tutorial is based on the XAML + MVUX variant of the Counter app tutorial. It demonstrates how to create a simple cross-platform app using Uno Platform. Explore other tutorial variants here.

Important

At the current stage of the Hot Design™ beta, only the Desktop platform is supported. Other platforms are undergoing stabilization for Hot Design support and will be available in future updates.

For now, you can use the Desktop platform to create your UI with the runtime visual designer. Once you’re satisfied with your design, you can test the app on other platforms by launching it as you would normally.

Set Up Your Environment for Hot Design

Important

If you're new to developing with Uno Platform, start by setting up your environment. Once your environment is ready, proceed directly to the next section, Creating the Counter Application.

For existing applications, take this opportunity to update to the latest Uno.Sdk version. Refer to our migration guide for upgrade steps.

To start using Hot Design, ensure you are signed in with your Uno Platform account. Follow these instructions to register and sign in.

Once you're using the latest stable 5.5 Uno.Sdk version or higher, you can access Hot Design by clicking the flame icon in the diagnostics overlay that appears over your app.

Hot Design flame icon to enter in design mode

Creating the Counter Application

  • Launch Visual Studio and click on Create new project on the Start Window. Alternatively, if you're already in Visual Studio, click New, Project from the File menu.
  • Type "Uno Platform" in the search box
  • Click Uno Platform App, then Next
  • Name the project Counter and click Create At this point you'll enter the Uno Platform Template Wizard, giving you options to customize the generated application. For this tutorial, we're only going to configure the presentation framework.
  • Select Blank in Presets selection
  • Select the Presentation tab and choose MVUX
  • Click Create to complete the wizard The template will create a solution with a single cross-platform project, named Counter, ready to run.

Assets

First, we need to add the image file to the application. Download this SVG image and add it to the Assets folder. Once added, rebuild the application to ensure the image is included in the application package.

Note

If you're working in Visual Studio, select the newly added logo.svg file in the Solution Explorer, open the Properties window, and ensure the Build Action property is set to UnoImage. For other IDEs, no further action is required as the template automatically sets the Build Action to UnoImage for all files in the Assets folder.

For more information on Uno.Resizetizer functionalities, visit Get Started with Uno.Resizetizer.

Run the app

Before you run the application, switch the target platform to Desktop (net8.0-desktop) to enable Hot Design during debugging. For more information on how to switch the target platform, visit the documentation page for your IDE:

Important

At the current stage of the Hot Design™ beta, only the Desktop platform is supported. Other platforms are undergoing stabilization for Hot Design support and will be available in future updates.

For now, you can use the Desktop platform to create your UI with the runtime visual designer. Once you’re satisfied with your design, you can test the app on other platforms by launching it as you would normally.

Important

If you're using Visual Studio, you can choose to start it with or without debugging.
If you're using VS Code or Rider, start the app without the debugger.

Now, let's run the app.

Sign in with your Uno Platform Account

If is not already previously done, to start using Hot Design, ensure you are signed in with your Uno Platform account. Follow these instructions to register and sign in.

Enter Hot Design Mode

To start editing the UI, enter Hot Design by clicking the flame icon in the diagnostics overlay that appears over your app (default position is in the top-left corner of the application window).

Note

If you don't see the Hot Design flame icon, ensure that you are signed in with your Uno Platform Account, enrolled in the current beta, and using the latest stable 5.5 Uno.Sdk version or higher.

Hot Design flame icon to enter design mode

Change the Layout

We are all set to start adding controls to create our Counter app. Follow the steps below:

Note

When making changes via Hot Design, the XAML will automatically update to reflect your edits. Similarly, any changes made directly to the XAML will be reflected in the design.

Remove Existing Elements

  1. Remove the existing StackPanel. In the Elements window, select the StackPanel, right-click, and choose Delete StackPanel.

    Removing the StackPanel

Add a StackPanel

  1. Let's add the container to hold our elements by adding a StackPanel. In the Toolbox window, search for "StackPanel". Once it appears in the search results, drag it onto the Canvas.

    StackPanel

    Alternatively, you can drag the element from the Toolbox and drop it onto the Elements window.

    StackPanel

    Another way would be to select the existing element in the Elements window where you want to add a new item, then double-click the desired item in the Toolbox window to add it as a child of the target.

    StackPanel

  2. Now, let's edit a property of the StackPanel to align it vertically and horizontally to the center. Select the StackPanel from the Elements window or the Canvas. In the Properties window, on the right side of the app, find the VerticalAlignment property and set it to Center, then do the same for HorizontalAlignment.

    StackPanel Alignment

Add an Image element

  1. Next, add an Image element to the StackPanel. In the Toolbox window, search for "Image". Once it appears in the results, drag it onto the StackPanel using either the Canvas or the Elements window.

    Note

    The image will appear with zero height until a source is set.

  2. Now that the Image element is added, let's set the source for our Image element. In the Properties window, locate the Source property. Start typing the name of the image we previously added, and the results should appear. Select Assets/logo.png.

    Image Source

  3. Now, let's edit some properties to enhance its appearance. In the Properties window, use the search button to find properties. Search for "Width" and set its value to 150. Do the same for Height. Our Image element is now complete!

    Image

Add a TextBox element

  1. The next step is to add a TextBox that will hold the increasing step value for our Counter app. In the Toolbox window, search for "TextBox." Once it appears in the results, drag it onto the StackPanel, making sure to place it under the Image element.

  2. Now, let's set the TextBox properties. In the Properties window, set the PlaceholderText to "Step Size" and set the TextAlignment to Center. Reset the Text property by clicking the Advanced button to open the Advanced Property flyout, followed by clicking the Reset button.

    Reset Text

Add a TextBlock element

  1. The next element to add is the TextBlock, which will display the current value of our Counter app. In the Toolbox window, search for "TextBlock." Once it appears in the results, drag it onto the StackPanel, ensuring it is placed under the TextBox.
  2. Let's edit the TextBlock properties. In the Properties window, set the Text to "Counter: 1"; and, set the TextAlignment to Center.

Add a Button element

  1. The final element is the Button that will increment the Count value. From the Toolbox window, search for "Button" and once the result appears, drag it onto the StackPanel, making sure it is added under the TextBlock element.
  2. Set the Button properties. In the Properties window, set the Content to "Increment Counter by Step Size".
Note

If there's insufficient room to edit the Content property you can resize the Properties window by dragging the left edge of the Properties window to the left.

Resize Properties Window

Multi-selection

Hot Design allows you to select multiple elements and edit common properties simultaneously. Let's try it:

  1. Hold the Ctrl key on your keyboard and click on the Image, the TextBox and the TextBlock (the Button should still be selected from the previous step).

  2. In the Properties window, set HorizontalAlignment to Center and Margin to 12.

    Multi Selection

Note

You can also use multi-selection from the Elements window by holding the Ctrl key while clicking on each node.

Style Picker

Hot Design allows you to apply existing styles to your elements for a polished appearance. Let's change the style of our Button:

  1. Select the Button, either from the Elements window or the Canvas.

  2. At the top of the Properties window, locate the Style Picker.

  3. Choose ButtonRevealStyle to apply it.

    Button Style

MainModel and Data Binding

As part of creating the application, we selected MVUX as the presentation framework. This added a reference to MVUX which is responsible for managing our Models and generating the necessary bindings. Without closing the application, return to your IDE and add a new class named MainModel and paste the following code to the newly created class:

namespace Counter;

internal partial record Countable(int Count, int Step)
{
    public Countable Increment() => this with
    {
        Count = Count + Step
    };
}

internal partial record MainModel
{
    public IState<Countable> Countable => State.Value(this, () => new Countable(0, 1));
    public ValueTask IncrementCounter()
            => Countable.UpdateAsync(c => c?.Increment());
}

As the application uses MVUX, the MainModel class is used to generate a bindable ViewModel, MainViewModel. Modify MainPage.xaml.cs to make an instance of MainViewModel available to be data bound and connected to the UI. Add DataContext = new MainViewModel(); to MainPage.xaml.cs right after InitializeComponent();.

After making these changes in the IDE, save all files and return to Hot Design.

Note

VS Code and Rider will automatically trigger Hot Reload when the files are saved.

In Visual Studio, you can manually trigger Hot Reload by clicking the Hot Reload button TextBox on the Visual Studio top toolbar.

Set Binding

TextBox

Now, we need to bind the TextBox's Text to the Countable.Step property of our ViewModel. In the Properties window, locate the Text property. Click the Advanced button to the right of the TextBox to open the Advanced Property flyout. Select Binding. In the Path dropdown, locate the Countable property of our ViewModel, click the arrow to expand its properties, and select Step. Finally, from the Mode dropdown, select TwoWay.

TextBox

TextBlock

For the TextBlock, bind the Text property to Countable.Count, just as we did with the TextBox. For this step it is not necessary to set the Mode.

Button

Finally, let's bind the Command to the IncrementCounter task of our ViewModel.

Button Command

Wrap Up

At this point, you should have a working counter application. Click the Play button in the Toolbar, adjust the step size, and click the button to see the application in action.

Note

The Play button lets you interact with the app directly within Hot Design, without needing to leave the editor. Once you're done interacting with the application, you can click the Pause button to return to designing your application. If you wish to leave Hot Design and return to the running application, you can click the Flame button in the Toolbar.

WrapUp