Quick Start

Automatic

A template will be created at some point in the future. For now, please use the manual option below.

Manual

This guide will show you how to apply MvvmElegance to a new Avalonia project manually.

First, let's create and prepare the solution and the projects:

1. Install the Avalonia templates: dotnet new -i Avalonia.Templates
2. Create a new solution with command: dotnet new sln --name MyApp
3. Create a new blank Avalonia project: dotnet new avalonia.app -o MyApp
4. Create a new class library for your view models: dotnet new classlib -o MyApp.ViewModels
5. Add both projects to the solution: dotnet sln add MyApp and dotnet sln add MyApp.ViewModels
6. Open the solution and create a project reference to MyApp.ViewModels in MyApp
7. Install the MvvmElegance package in the MyApp.ViewModels project
8. Install the MvvmElegance.Avalonia package in the MyApp project
9. (Optional) Install the MvvmElegance.Avalonia.Autofac package if you use Autofac

Replace MyApp with whatever you want to call your project.

Delete the files MainWindow.axaml and MainWindow.axaml.cs - you won't need them.

Then, you need to create a main view and a main view model. First, create a new file named MainView.axaml with the following:

<Window x:Class="MyApp.MainView"
        xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
        Title="MyApp">
    <TextBlock Text="Hello, World!" />
</Window>

Following that, Avalonia requires you to have a code-behind for your main view (MainView.axaml.cs):

using Avalonia.Controls;
using Avalonia.Markup.Xaml;

namespace MyApp;

public partial class MainView : Window
{
    public MainView()
    {
        InitializeComponent();
    }
}

Finally, you need a main view model for your main view. Call it MainViewModel and place it in your ViewModels project:

public class MainViewModel
{
}

NOTE: It's important that the view model is named the same as the view, but with "Model" at the end. This is the default way MvvmElegance finds views associated with view models (by this naming convention).

A view model can be any kind of class, but you might want to inherit from Screen or Conductor, or just PropertyChangedBase if you only need PropertyChanged notifications.

Next up, remove the override of method OnFrameworkInitializationCompleted from App.axaml.cs - MvvmElegance will take care of setting the main window for you.

We need an application bootstrapper to configure services and launch the application. For this we'll use MvvmElegance.Avalonia.Autofac, but feel free to use another IoC container (by using another package or implementing BootstrapperBase manually). Create the file Bootstrapper.cs:

using System.Reflection;
using Autofac;
using MvvmElegance;
using MyApp.ViewModels;

namespace MyApp;

public class Bootstrapper : AutofacBootstrapper<MainViewModel>
{
    protected override void ConfigureServices(ContainerBuilder builder)
    {
        // Register all view models from the ViewModels project.
        builder.RegisterAssemblyTypes(typeof(MainViewModel).Assembly)
            .Where(t => t.Name.EndsWith("ViewModel"));

        // Register all views from the Avalonia project.
        builder.RegisterAssemblyTypes(Assembly.GetExecutingAssembly())
            .Where(t => t.Name.EndsWith("View"));
            
        // Register any additional services.
    }
}

Next, for MvvmElegance to launch your application it needs a starting point. This is where the ApplicationLoader comes in. Modify your App.axaml file so it looks something like this:

<Application x:Class="MyApp.App"
             xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:e="https://github.com/mrphil2105/MvvmElegance"
             xmlns:local="using:MyApp">
    <Application.Resources>
        <e:ApplicationLoader>
            <e:ApplicationLoader.Bootstrapper>
                <local:Bootstrapper />
            </e:ApplicationLoader.Bootstrapper>
        </e:ApplicationLoader>
    </Application.Resources>

    <Application.Styles>
        <FluentTheme Mode="Light" />
    </Application.Styles>
</Application>

The ApplicationLoader will initialize your bootstrapper so that it configures and launches the application.

And that's it - your app should be ready to run. Go ahead and give it a try!