Parmi les Design Pattern les plus utilisés on trouve MVC (Modèle Vue Controleur) et plus récemment MVVM : Modèle, Vue et Vue-Modèle. Ce dernier est majoritairement centré autour de mécaniques (et des mots-clé) de DataBinding. Principes de base.

Le patron de conception MVVM tient à séparer ce qui est afférent à l’affichage (la Vue), de ce qui concerne la manipulation des données (Vue-Modèle) de ce qui concerne les données en elle-mêmes (Modèle).

Architecture

Dans une architecture MVVM, les fichier NomVue.xaml.cs ne sont finalement pas utilisés.
A la place, un fichier NomVueModele.cs va être utilisé. Ce sera lui qui sera la source de donnée qui alimentera la vue. Un fichier XXXVueModele.cs se présente ainsi :

On voit différents éléments primordiaux :

• La classe mère BaseViewModele (implémentant l’interface INotifyPropertyChanged)
• Des Commands, ou RelayCommands liant des actions à des méthodes
• Des Properties (classique) utilisant la mécanique des PropertyChanged
• Des ValueConverter implémentant l’interface IValueConverter

Une des mécanique les plus puissante du MVVM et de faire remonter au thread de l’UI toutes les mises à jour des variables affichées. Ainsi, lorsqu’une de ces variables change de valeur, l’UI se met à jour automatiquement.

ViewModel

BaseViewModel

Derrière cette classe se cache simplement une convention : chaque ViewModele intégrant l’interface INotifyPropertyChanged, il est de bon ton de l’implémenter dans une classe mère qui cachera donc cela aux classes enfantes.

En soit l’implémentation est simple à comprendre : Lorsque sera appelé OnPropertyChanged, le nom de la propriété passée en paramètre sera utilisée lors du déclenchement de l’évènement PropertyChanged.

Ce mécanisme est essentiel au MVVM : ainsi, les propriétés qui seront affichée dans une Vue notifieront le thread de l’UI lorsque ces dernière verront leur valeur changer. Ainsi, l’UI se mettra automatique à jour.

Commands

Les Commands sont les instances d’une classe implémentant ICommand. Elles seront utiliser sur les contrôles de type Buttons (dans leur propriété Command). Une classe implémentant ICommand intègre un mecanisme de liaison de méthode à une commande (via Action) et une mécanique de base visant à permettre au développe de contrôler sur une command peut être exécuter (grâce à une verification dans la methodeCanExecute).

Properties et PropertyChanged

Comme évoque via l’implémentation de l’interface INotifyPropertyChanged, les properties MVVM utilisées dans l’UI déclenche un évènement spécifique :

Ici, lorsque SimpleCounter s’incrémentera, la methode parente OnPropertyChanged(« SimpleCounter ») sera invoqué et l’UI mettre à jour le champs qui lie (ou Bind en anglais) cette propriété.

ValueConverter

Très utilisée en MVVM (et probablement en WPF en général), les ValueConverter sont des classes implémentant IValueConverter. Utilisées dans une vue avec les mots clés adéquate, elle permette, à partir d’une valeur donnée, d’en déduire une autre à la volée (Ex : pour un age donnée, renvoyer un booléen indiquant si la personne est adulte ou pas).

Les Vues (Views)

Comme évoqué les Vues s’organiseront autour du principe de liaison de données, du Binding.

Une des premières choses à faire est donc de lier une vue à sa source de données qui ne sera pas un fichier issue du Model mais un fichier issue du ViewModel. On dit qu’on définit son contexte de donnée, son DataContext.

<!-- XAML -->
<Window.DataContext>
     <vm:MainWindowViewModel/>
</Window.DataContext>

Ou, CodeBehind (le seul code rentrant dans le fichier .xaml.cs :

public MainWindow()
{
   InitializeComponent();
   this.DataContext = new MainWindowViewModel();
}

Ainsi, coté Xaml, lorsqu’il s’agit d’afficher une valeur dans une propriété Text d’un TextBlock par exemple, on utilisera le mot clé Binding. Ce mot clé est le mot phare qui fait la force d’MVVM.

<!-- Liaison d'une donnée -->
<TextBlock Text="{Binding SimpleCounter}" />

<!-- Utilisation d'un objet implémentant IValueConverter -->
<CheckBox Content="Est pair" 
          IsChecked="{Binding SimpleCounter, Converter={StaticResource PairValueConverter}}"

Model

Le Model se charge de rassembler les fichiers de classe de données de l’application.