Module 3 — La révolution MVVM

Changelog

• Introduction du pattern MVVM.
• Installation de CommunityToolkit.Mvvm.
• Première vraie collection affichée depuis du C# propre.
• V0.0.4 : ajout de la slide DataContext et de l'exemple XAML avec namespaces complets.

Objectif du module

• Supprimer la dépendance au code-behind pour l'état métier.
• Introduire un TodoListViewModel.
• Afficher une ObservableCollection<string> dans la vue.
• Comprendre le rôle du binding.

Pourquoi MVVM change tout

• La vue déclare ce qu'elle affiche.
• Le ViewModel expose l'état et les actions.
• Les tests deviennent possibles sans UI.
• Le code devient modulaire et lisible.

Installation du toolkit

dotnet add package CommunityToolkit.Mvvm

public partial class TodoListViewModel : ObservableObject
{
    public ObservableCollection<string> Taches { get; } = new();
}

Le concept clé: le Data Binding

• {Binding} relie le XAML à une propriété C#.
• Quand la donnée change, la vue se réactualise.
• Le XAML n'a plus besoin de connaître l'algorithme.
• Le ViewModel devient la source de vérité de l'écran.

Le DataContext : comment la vue trouve le ViewModel

• DataContext est la source de données d'un contrôle XAML.
• Tous les {Binding} d'une vue cherchent leurs propriétés dans le DataContext.
• Sans DataContext, les bindings restent silencieux — aucune erreur visible, rien ne s'affiche.
• On le définit dans App.axaml.cs ou directement en XAML.

// App.axaml.cs — manière la plus courante
desktop.MainWindow = new MainWindow
{
    DataContext = new TodoListViewModel()
};

La boucle Vue ViewModel

Schéma du flux MVVM

Brancher la collection dans XAML

Le namespace vm: doit pointer vers le projet. Exemple complet pour ne pas bloquer :

<Window xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:vm="clr-namespace:TodoApp.ViewModels;assembly=TodoApp"
        x:DataType="vm:TodoListViewModel">

  <ItemsControl ItemsSource="{Binding Taches}" />

</Window>

Taches.Add("Configurer Avalonia");
Taches.Add("Afficher la liste");
Taches.Add("Préparer les commandes");

Pièges fréquents

• Oublier de définir le DataContext.
• Utiliser List<string> au lieu de ObservableCollection<string>.
• Modifier une propriété sans notification de changement.
• Confondre Model métier et ViewModel d'écran.

Livrable du module

• La liste à l'écran vient d'une vraie collection C#.
• La vue ne contient plus de logique métier.
• Les élèves perçoivent la valeur d'un écran piloté par l'état.

Repo de référence

https://gitlab.bzctoons.net/ynov/b3-dev-tasklis

• Branche module-03-mvvm → état du projet à la fin de cette séance.
• En cas de blocage: git checkout module-03-mvvm pour repartir d'une base saine.
• Le repo est votre filet de sécurité pendant l'atelier.