Module 4 — Interagir proprement avec les Commandes

Changelog

• Passage du simple affichage à une vraie saisie utilisateur.
• Introduction de ICommand via CommunityToolkit.Mvvm.
• La tâche tapée dans l'UI peut maintenant être ajoutée à la liste.
• Ajout de TodoItemViewModel avec IsDone et commande de suppression.
• V0.0.5 : ajout des namespaces XAML complets dans les snippets.

Objectif du module

• Lier le champ texte au ViewModel.
• Lier le bouton à une commande.
• Ajouter dynamiquement une tâche dans la collection.
• Comprendre l'inversion de flux événementiel.

Binding côté saisie et côté action

Les namespaces suivants sont nécessaires dans la balise <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"

Puis dans le corps :

<TextBox Text="{Binding NouvelleTache}" />
<Button Command="{Binding AjouterTacheCommand}" Content="Ajouter" />

• Le champ pousse une valeur.
• Le bouton déclenche une intention.

Le concept clé: ICommand

• Le bouton ne connaît pas la logique métier.
• Il exécute une commande exposée par le ViewModel.
• La logique se teste sans interface graphique.
• On peut désactiver le bouton selon l'état courant.

Illustration du pipeline de commande

Séquence : intention vers action

Exemple ViewModel

[ObservableProperty]
private string? nouvelleTache;

[RelayCommand]
private void AjouterTache()
{
    if (string.IsNullOrWhiteSpace(NouvelleTache)) return;
    Taches.Add(NouvelleTache.Trim());
    NouvelleTache = string.Empty;
}

Pourquoi c'est plus propre que Click="..."

• Le XAML reste déclaratif.
• Le ViewModel centralise l'état et les décisions.
• Le même code est réutilisable pour d'autres vues.
• Les dépendances futures seront injectables.

Représenter une tâche avec état

Un string ne suffit plus dès qu'on veut cocher ou supprimer.

public partial class TodoItemViewModel : ObservableObject
{
    [ObservableProperty]
    private string title = string.Empty;

    [ObservableProperty]
    private bool isDone;
}

• Chaque tâche devient un objet observable.
• IsDone se lie directement à une CheckBox en XAML.

Supprimer et basculer une tâche

// TodoListViewModel — Taches passe de string à TodoItemViewModel
public ObservableCollection<TodoItemViewModel> Taches { get; } = new();

[RelayCommand]
private void SupprimerTache(TodoItemViewModel item) => Taches.Remove(item);

<CheckBox IsChecked="{Binding IsDone}" Content="{Binding Title}" />
<Button Command="{Binding $parent[ItemsControl].DataContext.SupprimerTacheCommand}"
        CommandParameter="{Binding}" Content="✕" />

• CommandParameter transmet l'item concerné à la commande.
• Le ViewModel reste testable sans interface graphique.

Attention aux cas limites

• Saisie vide.
• Espaces avant et après le texte.
• Double clic rapide sur Ajouter.
• Besoin futur d'une commande asynchrone.

Livrable du module

• On tape une tâche.
• On clique sur Ajouter.
• La liste se met à jour immédiatement.
• L'écran reste propre, sans code-behind métier.

Repo de référence

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

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