Module 9 — Styles et DataTemplates

Changelog

• Introduction des Styles globaux.
• Introduction des DataTemplate pour dessiner une tâche.
• Ajout d'une carte visuelle plus riche avec état fait / à faire.

Objectif du module

• Éviter le copier-coller visuel.
• Séparer structure et apparence.
• Styliser chaque tâche comme une vraie carte.
• Préparer une UI crédible pour une démonstration produit.

Pourquoi DataTemplate est indispensable

• Un item répété doit partager le même rendu.
• Le template décrit le visuel de chaque élément.
• Le modèle fournit la donnée.
• L'UI devient réutilisable et maintenable.

Exemple de template

<DataTemplate DataType="vm:TodoItemViewModel">
  <Border Classes="todo-card">
    <StackPanel Orientation="Horizontal" Spacing="12">
      <CheckBox IsChecked="{Binding IsDone}" />
      <TextBlock Text="{Binding Title}" />
    </StackPanel>
  </Border>
</DataTemplate>

Le concept clé: réutilisabilité XAML

• Le style donne une identité visuelle commune.
• Le template évite de répéter la structure.
• On change l'apparence sans toucher au métier.
• Le design system naît de composants simples mais cohérents.

Visualiser la carte finale

Schéma Mermaid du pipeline visuel

Style global minimal

<Style Selector="Border.todo-card">
  <Setter Property="Background" Value="#FFFDF7" />
  <Setter Property="CornerRadius" Value="16" />
  <Setter Property="Padding" Value="16" />
</Style>

Bonnes pratiques de finition

• Limiter la palette de couleurs.
• Renforcer la hiérarchie typographique.
• Réserver les contrastes forts aux actions et statuts.
• Vérifier la lisibilité quand la liste s'allonge.

Livrable du module

• La liste ressemble à une vraie application.
• Les tâches ont un rendu homogène.
• Les étudiants voient comment industrialiser l'apparence XAML.