How Avalonia Loads

• Programs.cs: Entry point of the app, uses a Avaloni.Application type to build up the program.
  • App.axaml: Stores global themes, resources, styles.
  • App.axaml.cs: Contains a class inherited from Avalonia.Application used as loader.
    • MainWindow.axaml.cs: Contains a class inherited from Avalonia.Controls.Window, used as a source for App
    • MainWindow.axaml: The view of MainWindow
      • MainWindowViewModel.cs: Represents the data context of the main window.

Entry Point - Program.cs

Program.cs is responsible for setting up the global configuration and starting it.

using Avalonia;
using Avalonia.ReactiveUI;
using System;

namespace AvaloniaApplication;

class Program
{
    // Initialization code. Don't use any Avalonia, third-party APIs or any
    // SynchronizationContext-reliant code before AppMain is called: things aren't initialized
    // yet and stuff might break.
    [STAThread]
    public static void Main(string[] args) => BuildAvaloniaApp()
        .StartWithClassicDesktopLifetime(args);

    // Avalonia configuration, don't remove; also used by visual designer.
    public static AppBuilder BuildAvaloniaApp()
        => AppBuilder.Configure<App>() // `App` is child of `Application`
            .UsePlatformDetect()
            .WithInterFont()
            .LogToTrace()
            .UseReactiveUI();
}

App.axaml

App.axaml is for configuring styles, themes, data templates and resources globally.

<Application xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             x:Class="AvaloniaApplication.App"
             xmlns:local="using:AvaloniaApplication"
             RequestedThemeVariant="Default"> <!-- config you theme variant here --> <!-- [!code highlight]  -->
             <!-- "Default" ThemeVariant follows system theme variant. "Dark" or "Light" are other available options. -->

    <Application.DataTemplates> <!-- [!code highlight]  -->
        <local:ViewLocator/> <!-- [!code highlight]  -->
    </Application.DataTemplates> <!-- [!code highlight]  -->
  
    <Application.Styles> <!-- import styles here --> <!-- [!code highlight]  -->
        <FluentTheme /> <!-- [!code highlight]  -->
    </Application.Styles> <!-- [!code highlight]  -->

    <Application.Resources> <!-- [!code highlight]  -->
        <SolidColorBrush x:Key="BrightBlueBrush">#7f98c7</SolidColorBrush> <!-- [!code highlight]  -->
        <SolidColorBrush x:Key="BrightBlueWhenHoverBrush">#98acd0</SolidColorBrush> <!-- [!code highlight]  -->
    </Application.Resources> <!-- [!code highlight]  -->

</Application>

The App.axaml.cs is the code behind the App.axaml.

• Initialize the app
• Loads the MainWindow

using Avalonia;
using Avalonia.Controls.ApplicationLifetimes;
using Avalonia.Markup.Xaml;
using AvaloniaApplication.ViewModels;
using AvaloniaApplication.Views;

namespace AvaloniaApplication;

public partial class App : Application
{
    public override void Initialize()
    {
        AvaloniaXamlLoader.Load(this); // attach the component from xaml to this `App`
    }

    public override void OnFrameworkInitializationCompleted()
    {
        if (ApplicationLifetime is IClassicDesktopStyleApplicationLifetime desktop)
        {
            desktop.MainWindow = new MainWindow // [!code highlight] 
            {
                DataContext = new MainWindowViewModel(), // [!code highlight] 
            };
        }
        base.OnFrameworkInitializationCompleted();
    }
}

Main Window

<Window xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:vm="using:AvaloniaApplication.ViewModels"
        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"
        x:Class="AvaloniaApplication.Views.MainWindow"
        x:DataType="vm:MainWindowViewModel"
        Icon="/Assets/avalonia-logo.ico"
        Title="AvaloniaApplication">

    <Design.DataContext>
        <!-- This only sets the DataContext for the previewer in an IDE,
             to set the actual DataContext for runtime, set the DataContext property in code (look at App.axaml.cs) -->
        <vm:MainWindowViewModel/>
    </Design.DataContext>

    <TextBlock Text="{Binding Greeting}" HorizontalAlignment="Center" VerticalAlignment="Center"/>

</Window>

ViewLocator

The term "locator" in "ViewLocator" refers to the role of the class in locating or finding the appropriate View for a given ViewModel. In other words, it helps the application determine which View should be used to display the data and operations defined in a ViewModel.

Once the Match method has determined the correct View type, this type is passed to the Build method, which is responsible for creating an instance of the View.

using System;
using Avalonia.Controls;
using Avalonia.Controls.Templates;
using AvaloniaApplication.ViewModels;

namespace AvaloniaApplication;

public class ViewLocator : IDataTemplate
{
    public Control Build(object data)
    {
        // Rule for matching View for a ViewModel.
        var name = data.GetType().FullName!.Replace("ViewModel", "View"); // [!code highlight] 
        var type = Type.GetType(name); // [!code highlight] 
        // Then create an instance of the View.
        if (type is not null)
        {
            return (Control)Activator.CreateInstance(type)!;
        }
        // Else return a control with warning.
        return new TextBlock { Text = "Not Found: " + name }; // [!code highlight] 
    }

    public bool Match(object data)
    {
        // Matching rules can be more complex...
        return data is ViewModelBase;
    }
}