Create a New Project
On this page, you will learn how to create a new project for the To-Do List app. There are two methods to choose from:
-
Visual Studio Extension Template: If you prefer using Visual Studio, follow the instructions below to create your project.
-
.NET Core CLI Command: Alternatively, if you prefer command-line tools, you can use the .NET Core CLI command. Here's how:
Visual Studio
Before you start, check if you have installed the Avalonia UI extension for Visual Studio.
For full instructions about the extension, see here.
With the extension installed, start this tutorial by following these instructions:
- Start Microsoft Visual Studio
- Click Create a new project
- In Search for Templates, enter 'Avalonia'
- Click Avalonia MVVM Application
- Click Next
- In Project name, enter 'ToDoList' as the project name and click Create
The newly created solution will look like this:
.NET Core CLI
Before you start, check if you have installed the Avalonia UI templates for .NET Core.
For full instructions about starting with the CLI, see here.
With the templates installed, you can create the application from the template:
dotnet new avalonia.mvvm -o ToDoList -n ToDoList
The newly created project will look like this:
ToDoList
|- Assets
| |- avalonia-logo.ico
|- Models
|- ViewModels
| |- MainWindowViewModel.cs
| |- ViewModelBase.cs
|- Views
| |- MainWindow.axaml
| | |- MainWindow.axaml.cs
|- App.axaml
| |- App.axaml.cs
|- app.manifest
|- Program.cs
|- ViewLocator.cs
|- ToDoList.csproj
MVVM Project Structure
This section applies to both Visual Studio and CLI.
You can see there are folders for each of the concepts in the MVVM pattern (models, views, and view models) as well as some other files and folders.
- The
/Assets
folder contains binary assets for your application such as icons and bitmaps. Files placed here will automatically be included as resources in the application. - The
/Models
folder is currently empty, you will add a file here later in this tutorial. - The
/ViewModels
folder contains a base class for view models and a rudimentary view model for the application's main window. - The
/Views
folder contains the application main window AXAML file. You will add other view files here during this tutorial. - The
App.axaml
file is for XAML styles and data templates that apply to the whole application. You will not change this file in this tutorial. - The
Program.cs
file is the entry point for the execution of the application. You can configure additional platform options for Avalonia UI here if necessary, however, you will not change this file in this tutorial. - The
ViewLocator.cs
file is a special helper class, and it is used in theApp.axaml
file. The significance of this file will be explained later in this tutorial.
AXAML Files
Avalonia UI uses the file extension .axaml
for its XAML files, and this includes those created by the Visual Studio solution template and more recent versions of the .NET Core CLI templates. If you previously used older .NET Core CLI templates, the extension may be .xaml
.
For more background on Avalonia UI XAML see here.