Design Pattern MVVM avec une DataGrid

Pour commander une datagrid, plusieurs solution s’offre à nous. La première est de directement assigner une source à cette grille et d’écouter ces événements dans du code behind, ou, utiliser le pattern MVVM pour tout ça.

Une archive du projet final est disponible ici -> [Téléchargement non trouvé]

Pour nous simplifier la tâche nous allons utiliser la bibliothèque MVVM Light Toolkit de Galasoft disponible à :
http://www.galasoft.ch/mvvm/installing/

Pour rappel, le design pattern MVVM permet de séparer la partie logique de la partie représentation graphique. Ce pattern est très proche du design pattern MVP.

MVVM est plus adapté à WPF/Silverlight et à toute techno supportant le binding.
Pour plus d’information sur ce pattern et pour ne pas réécrire la bible, je vous conseille cet article de Josh Smith: WPF Apps With The Model-View-ViewModel Design Pattern ainsi que la description sur Wikipedia.

But de l’exercice: afficher une liste d’objet (ici ‘DummyObject’) sous forme de grille interactive et suivre les actions utilisateur en séparant la partie présentation graphique de la partie logique et modèle de donnée.

Model

Notre modèle de donnée pourrait être une base de donnée, un web service, un autre composant, …etc. Ce n’est qu’une source que le ViewModel va transformer ou simplement transmettre à la vue.

ViewModel

Commençons par la partie logique et représentation du modèle de notre viewModel ‘EvaluateSCViewModel’.

Il doit permettre au minimum:

  • d’accéder / modifier par binding toutes les données à afficher, ici ItemSource et SelectedItem pour l’élément sélectionné.
  • de suivre les actions utilisateur, ici les évènements de changement de sélection + focus

l’héritage de ViewModelBase nous permet, entre autre, d’avoir une implémentation de INotifyPropertyChanged pour la mise à jour des propriétés par binding.

Ainsi il est important que chaque valeur de propriété soit bindable. Si le type est complexe, il doit implémenter INotifyPropertyChanged afin de maintenir la vue informée des changements.
Par contre, rien ne vous empêche d’utiliser des interfaces de plus bas niveau comme ICollection

Dans l’exemple fourni, 2 méthodes permettent de suivre le changement de sélection suivant vos besoins.
Soit par l’intermédiaire d’une propriété bindable représentant la valeur de la grille.
Soit par une commande ‘ICommand’ levée lors du changement de sélection.
Une autre implémentation plus complexe est possible:
http://weblogs.asp.net/alexeyzakharov/archive/2009/06/06/silverlight-tips-amp-tricks-make-silverlight-datagrid-be-more-mvvm-friendly.aspx

View

La vue est la représentation graphique du ViewModel, rien de plus, sauf quelques animations.
Ce fait est explicité par l’assignation du ViewModel au contexte de donnée de la vue.
Ceci ce fait par
le code Xaml ‘DataContext= »{Binding Source={StaticResource EvaluateSCViewModel}} »‘
ou le code C# ‘DataContext = new EvaluateSCViewModel();’

Une fois le contexte du composant assigné, la DataGrid peut être liée au différentes propriétés du ViewModel.

  • La source de donnée de la datagrid: « ItemsSource= »{Binding ItemSource} » »
  • l’élément sélectionné : « SelectedItem= »{Binding SelectedItem, Mode=TwoWay} » »
  • Pour les composants ne supportant nativement les commandes, on peut utiliser un EventTrigger. Un exemple ici fait doublon avec SelectedItem avec la commande SelectionChangedCommand sur l’événement SelectionChanged.

Remarque sur l’injection

Si vous utilisez l’injection, vous aurez besoins de la liaison View-ViewModel seulement pendant le temps de design. Vous pouvez simplement écrire en Xaml: ‘d:DataContext= »{Binding Path=ShoppingCartViewModel, Source={StaticResource serviceLocator}} »‘ Ensuite il suffit d’assigner chaque propriétés du ViewModel aux propriétés de la vue.
ItemSource à la DataGrid: ItemsSource= »{Binding ItemSource} »
les commandes au boutons, …etc.

Pour aller plus loin:
http://edventuro.us/2010/03/porting-a-wpf-app-with-the-model-view-viewmodel-design-pattern-to-silverlight-4/