Module 2 — Découper l'écran avec les Layouts

Changelog

• Focus sur Grid, StackPanel et la lecture d'une maquette.
• La logique reste volontairement absente.
• On prépare le terrain du binding sans mélanger responsabilités.

Objectif du module

• Dessiner l'interface de la To-Do List.
• Positionner correctement saisie, bouton et liste.
• Comprendre Auto, * et les tailles fixes.
• Produire une UI lisible sur plusieurs tailles de fenêtre.

Pourquoi Grid d'abord

• Grid structure les grandes zones.
• StackPanel aligne rapidement les éléments simples.
• Auto prend la taille du contenu.
• * absorbe l'espace restant.

<RowDefinition Height="Auto" />
<RowDefinition Height="*" />

Squelette XAML de la maquette

<Grid RowDefinitions="Auto,*" ColumnDefinitions="*,Auto">
  <TextBox Grid.Row="0" Grid.Column="0" Watermark="Nouvelle tâche" />
  <Button Grid.Row="0" Grid.Column="1" Content="Ajouter" />
  <StackPanel Grid.Row="1" Grid.ColumnSpan="2" Spacing="12" />
</Grid>

Le concept clé: positionnement relatif

• Une bonne UI desktop n'est pas pixel-perfect au sens absolu.
• Elle réagit à l'espace disponible.
• On définit des relations, pas des coordonnées figées.
• C'est la base du responsive côté desktop.

Carte visuelle du layout

Lecture du moteur de layout

Contenu codé en dur pour valider la maquette

• Trois tâches factices suffisent.
• L'objectif n'est pas encore la donnée réelle.
• L'écran doit donner une sensation de produit fini.

<TextBlock Text="Apprendre Avalonia" />
<TextBlock Text="Comprendre Grid" />
<TextBlock Text="Préparer MVVM" />

Erreurs de composition fréquentes

• Trop de StackPanel imbriqués.
• Utilisation abusive de marges à la place d'une vraie grille.
• Colonnes fixes partout, donc écran rigide.
• Contrôles qui s'écrasent car aucune ligne * n'absorbe l'espace.

Livrable du module

• Un champ texte visible.
• Un bouton Ajouter bien aligné.
• Une liste de trois tâches en dur.
• Une fenêtre qui reste propre quand on la redimensionne.