Skip to main content
Version: 11.0.x

Create a New Project

On this page you will lean how to create a new project for the app.

JetBrains Rider

Before you start, check you have installed the Avalonia UI solution templates for JetBrains Rider.

info

For full instructions on preparing JetBrains Rider for developing with Avalonia UI, see here.

With the solution templates installed, begin this tutorial by following these instructions:

  • On the Welcome to JetBrains Rider screen, click New Solution.
  • From the project types list on the left, locate and click Avalonia .NET Core MVVM App. It will be under the section Other.
  • Leave the MVVM Toolkit option as (the default) ReactiveUI framework.
  • Enter the Solution name as 'Avalonia.MusicStore'.
  • Click Create.

A new project will be created with the following solution folders and files:

Take some time to review the files and folders that the solution template created. You will see that the following the MVVM pattern, these folders were created:

Folder NameDescription
AssetsContains any embedded assets that are compiled into the program. Images, Icons, Fonts etc, anything that the UI might need to display,
ModelsThis is an empty folder for code that is the 'model' part of the MVVM pattern. This often contains everything else the app needs that is not part of the UI. For example: interaction with a database, Web API, or interfaces with a hardware device.
View ModelsThis is a folder for all the view models in the project, and it already contains an example. View models contain the application logic in the MVVM pattern. For example: a button is enabled only when the user has typed something; or open a dialog when the user clicks here; or show an error if the user enters too high a number type of logic in this input.
ViewsThis is a folder for all the views in the project, and it already contains the view for the application main window. Views in the MVVM pattern contain only the presentation for the application; that is layout and form, fonts, colors, icons and images. In MVVM they have only enough code to link them to the view model layer. In Avalonia UI there is only enough code to manage windows and dialogs here.
info

To explore the concepts behind the MVVM pattern, and when is appropriate to use it, see here.

The solution template has created enough files for the application to run. You will meet all of these during the rest of this tutorial.

Run the Project

Press the debug button top-right of the IDE to compile and run the project.

This will show a window that looks like:

It is a little plain - but you now have a running application, and a blank canvas to start developing with. On the next page you will learn how to add a modern-looking acrylic blur dark background.