Module 1 — L'environnement et le Hello World

Créer un premier exécutable Avalonia stable, visible et compréhensible.

Changelog

• V0.0.1, premier deck du parcours Avalonia UI.
• Cible pédagogique: afficher une fenêtre sans erreur et comprendre le duo XAML/C#.
• Livrable final: un bouton fonctionnel Clique-moi dans une vraie fenêtre desktop.

Objectif du module

• Installer un environnement utilisable en atelier.
• Générer un projet Avalonia avec la CLI .NET.
• Comprendre où se trouve l'interface et où se trouve la logique.
• Obtenir un point de départ exécutable avant toute complexité métier.

Outils à préparer

• SDK .NET 8 ou 9
• VS Code
• Extension Avalonia for VS Code
• Terminal pour la CLI

dotnet --version
dotnet new install Avalonia.Templates
dotnet new avalonia.app -n TodoApp

Anatomie minimale du projet

• App.axaml initialise l'application.
• MainWindow.axaml décrit la fenêtre.
• MainWindow.axaml.cs contient le code-behind.
• Le XAML est du texte XML spécialisé pour décrire l'UI.

<Button Content="Clique-moi" Click="OnClickMe" />

Le concept clé: XAML séparé du C#

• L'écran n'est pas dessiné en dur dans le code C#.
• La vue déclare la structure.
• Le code C# réagit aux événements.
• Cette séparation prépare naturellement l'arrivée de MVVM.

Illustration de la fenêtre cible

Pipeline de démarrage

Événement basique côté C#

private void OnClickMe(object? sender, RoutedEventArgs e)
{
    ClickButton.Content = "Bonjour Avalonia";
}

• L'événement valide la boucle complète: UI chargée, interaction reçue, rendu mis à jour.

Erreurs fréquentes au démarrage

• Template Avalonia non installé.
• Mauvais SDK actif dans le terminal.
• Extension VS Code absente, donc aperçu et diagnostics limités.
• Noms de contrôles incohérents entre XAML et code-behind.

Livrable et checklist

• La fenêtre s'ouvre.
• Le bouton répond au clic.
• Le projet se lance via dotnet run.
• L'équipe comprend que l'interface vient du XAML.

cd TodoApp
dotnet run