Binding hiérarchique bidirectionnel avec Notification


Dans le cadre d’un projet en WPF, nous devons régulièrement lier des données (ex. Departments), souvent contenant des sous-informations (ex. Employees). Et bien entendu, si l’utilisateur ou le développeur modifie une valeur d’un objet lié, il est souhaitable que l’interface graphique ou l’objet en mémoire soit mis à jour.

Le code suivant regroupe, de manière simple, la liaison de données entre l’interface graphique écrite en WPF et la couche de données ; tout en conservant des notifications et le traitement hiérarchique de sous-données (des employés qui appartiennent à un département). Pour cela, prenons l’exemple de départements contenant des employés affichés dans une ListView dont la première colonne contient les départements et la seconde colonne contient les employés de chaque département. L’utilisateur peut sélectionner les employés qu’il souhaite exploiter dans le processus global de l’application. Nous souhaitons récupérer facilement la liste des employés cochés (via une propriété Selected des objets Employee).

Le résultat visuel final est le suivant :

Dans un premier temps, nous devons définir les objets de données à relier à l’interface graphique (manuellement ou via Entity Framework).

Ensuite, nous pouvons créer l’interface graphique en XAML :

La liste est liée aux objets de données, via ItemsSource = {Binding .}, ce qui nous permettra de simplement assigner le DataContext la feuille Windows.

Le code pour remplir des exemples de données dans les objets Employee et Department, et les relier à la liste, est le suivant.

Relier la case à cocher aux objets de données.

Lorsque l’utilisateur coche la case, nous souhaitons mettre à jour la propriété Selected de notre objet Employee. Pour cela, le DataTemplate de la colonne Employees est relié en spécifiant le mode de communication TwoWay. De cette manière, toutes modification graphique sera rendue dans les objets mémoires associés.

Relier la propriété Employee.Selected à la case à cocher.

Lorsque le développeur modifie la propriété Selected (par exemple, pour pré-sélectionner des employés), nous souhaitons que l’interface graphique s’adapte. Par défaut, le remplissage de la liste reprend les données des objets présents lors du binding, mais ne vérifie pas les éventuelles modifications de valeurs. Il est nécessaire de prévenir le moteur de rendu graphique qu’une propriété a été modifiée. Pour cela, nous devons implémenter l’interface INotifyPropertyChanged et enclencher l’événement PropertyChanged au moment voulu : lorsque le développeur modifie le contenu de la propriété Selected.

S’il est nécessaire de notifier les changements de contenu dans les collections de données (List<Employee> et List<Department>), il suffit d’utiliser la classe ObservableCollection<Employee> et ObservableCollection<Department> au lieu d’une liste « classique ».

Advertisements
Tagged with: , ,
Posted in General

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow me
   RSS Feed    Twitter    Linked In

Write you email address to subscribe at this blog and to receive new posts by mail.

Join 567 other followers

Who I am?






%d bloggers like this: