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.

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.

La boucle Vue ViewModel

Schéma du flux MVVM

Brancher la collection dans XAML

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

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.