Starter tutorial

Build a temperature converter app

Now that you’re set up with an Avalonia project in your integrated development environment (IDE), as covered on the Getting Started page, we can go through some basic concepts and functionalities in Avalonia. We’re going to do that by turning the default Avalonia template into a temperature converter app.

Follow through this tutorial to create the app. As you do so, you will learn about:

📄️ Adding a control

How to add a button to your temperature converter app. Part 2 of 7 the Avalonia starter tutorial.

📄️ Adding some layout

How to use layout controls to have multiple controls on your temperature converter app. Part 3 of 7 the Avalonia starter tutorial.

📄️ Customizing the Avalonia window

How to adjust the attributes of the Avalonia window. Part 4 of 7 the Avalonia starter tutorial.

📄️ Establishing events and responses

How to create an event handler to detect when the button is being clicked. Part 5 of 7 the Avalonia starter tutorial.

📄️ Converting data

How to use code-behind to execute a response when the button is clicked. Part 6 of 7 the Avalonia starter tutorial.

📄️ Exercises

Test your knowledge of Avalonia on three coding exercises. Part 7 of 7 the Avalonia starter tutorial.

.axaml

Notice the files in your project directory ending .axaml? That’s short for Avalonia XAML, a file extension unique to Avalonia that differentiates Avalonia files from standard XAML files.

Check your XAML previewer works

If you have newly installed Avalonia in Visual Studio or JetBrains Rider, and you are new to IDE development in general, this may be a good time to check you can use the XAML previewer.

See the XAML previewers page for how to enable and test the previewer.

Open the main window file

In the Views folder of your project directory, open the file MainWindow.axaml. We will mainly be working on this file throughout this tutorial.

Nearly everything in MainWindow.axaml goes between the <Window>...</Window> XAML tag. This tag represents the Avalonia window, where your app will run on the target platform. We’ll look at Avalonia windows in more detail later, when we get to customizing the Avalonia window.

Proceed to the next page of this tutorial to learn how to add a button to the app.