Dans cet article nous allons voir un exemple d'organisation d'une solution utilisant MVVM. Vous en trouverez surement d'autres, mais j'affectionne particulièrement celle-ci, car elle marque bien la séparation des couches.

On créé tout d'abord un nouveau projet dans File -> New Project ... On choisit une application de type WPF ou bien Sylverlight ou encore Surface...

La solution se génère et nous créée un nouveau projet comportant 2 fichiers : App.xaml et Window1.xaml

  1. On supprime le fichier Window1.xaml
  2. On supprime la propriété StartupUri dans le fichier App.xaml car nous avons supprimé la classe affecté à celle-ci ;)
  3. On crée une nouvelle fenêtre que l'on nomme MainWindow.xaml. Cette classe sera notre fenêtre principale. Elle aura par la suite une classe ViewModel attribuée, que l'on nommera MainWindowViewModel.

Pour attribuer une ViewModel à une View, on affecte la ViewModel à la propriété DataContext de la View. Ce procédé permet d'effectuer la Binding soit OneWay ou TwoWay entre les composants de la View et les propriétés de la ViewModel.

4. Dans le code behind de la classe App, on surcharge la méthode OnStartup(StartupEventArgs e). Cette méthode remplace la propriété StartupUri en code xaml, mais nous permet de coupler la View au ViewModel.

Voici l'implémentation de cette méthode :

MVVM_OnStartup_Mise_en_place.bmp

Ceci étant fait, on va s'occuper des couches. Pour cela on créé 3 nouveaux projets dans la solution de type Librairie de classes, que l'on nomme respectivement Model, View et ViewModel. Pour les assemblies, nous avons besoin de référencer la librairie Model dans celle de ViewModel. Cette référence nous permettra de récupérer les données externes et de pouvoir les rendre accessible par binding aux Views. Nous n'avons pas besoins de référencement entre les couches View et ViewModel. Par contre, on ajoutera les 2 assemblies dans le projet principal afin de pouvoir coupler chaque View avec son propre ViewModel, grâce entre autres aux DataTemple, mais nous y reviendrons dans un prochain articel.

Pour finir afin de garder un couplage net entre les UserControls de la librairie View et leur ViewModel associé, on créé un nouveau répertoire dans le projet ViewModel que l'on nomme ViewModelsList. Ce répertoire, en toute logique comportera autant de fichiers que le projet View et permettra de dédier un namespace propre au couplage. La structure de base de la couche ViewModel, ainsi que le ViewModel associé à la fenêtre principale (MainWindowViewModel.cs) seront stockées à l'extérieur de ce répertoire.

Voila à quoi devrai ressembler votre arborescence :

MVVM_Aborescence_Mise_en_place.bmp