DATA BINDING, KESAKO?

Le Data Binding ou Liaison de données consiste à lier un contrôle à une source de données. Il suffit d’indiquer au contrôle où trouver les données et il se débrouille pour les afficher. Ainsi les propriétés de vos contrôles se mettrons à jour automatiquement en fonction des mise à jours apportées sur la source de données. Inversement si des modifications sont apportées sur votre interface alors la source de données peut aussi être mise à jour. Cette technique permet donc d’automatiser votre interface (ce qui est automatisable bien sur) et aussi de réduire les risques d’erreurs. Bon un exemple vaut mieux qu’un long discourt, commençons sans plus tarder.

Les différents mode du binding

Dans la pratique le binding se fait sur une ou plusieurs propriétés d’un contrôle. Vous pouvez par exemple lier la propriété Text d’un Label au champ Nom d’une table de votre base de données. La propriété sur laquelle porte le binding est appelé cible et la source de données est appelé source (évident non). Cependant il existe des modes permettant définir la façon dont les mises à jour seront appliquées aux propriétés de votre contrôle.

Mode	Description
OneWay	Dans ce mode la propriété est mise à jour lorsque la propriété change.
TwoWay	La propriété est mise à jour lorsque la propriété change, et inversement la source de données est mise à jour lorsque la propriété est modifiée.
OneWayToSource	Ce mode est le même que le mode OneWay mais dans le sens inverse. Autrement dit si la propriété est modifiée,  la source de donnée est mise à jour.

Pour pouvoir faire le binding il faut créer une classe. Nous allons donc supposer que nous devons faire une application de gestion de contact. Créons donc la classe contact.

Code C#: Contact.cs

Ensuite rendez vous dans le fichier MainPage.xaml/cs. Nous allons Peupler notre notre application. Pour cela créons une liste de contacts comme suit:

MainPage.xaml.cs

using System; using System.Collections.Generic; using System.Linq; using System.Net; using System.Windows; using System.Windows.Controls; using System.Windows.Documents; using System.Windows.Input; using System.Windows.Media; using System.Windows.Media.Animation; using System.Windows.Shapes; using Microsoft.Phone.Controls; namespace WinPhoneApp {     public partial class MainPage : PhoneApplicationPage     {         List<Contact> contacts;         // Constructeur         public MainPage()         {             InitializeComponent();             contacts = new List<Contact>()             {                 new Contact(){                     email = « email@example.com »,                     FirstName = « Mekoundé »,                     LastName = « Olivier Cloataire »,                     Picture = “/Images/img1.png »                 },                 new Contact(){                     email = « email@example.com »,                     FirstName = « Kouamé »,                     LastName = « Kakou Christian »,                     Picture = “/Images/img2.png »                 },                 new Contact(){                     email = « email@example.com »,                     FirstName = « N’guessan »,                     LastName = « Bogui Jean-Martin »,                     Picture = « /Images/img3.png »                 },                 new Contact(){                     email = « email@example.com »,                     FirstName = « N’guessan »,                     LastName = « Bogui Jean-Martin »,                     Picture = « /Images/img4.png »                 }             };         }     } }

Maintenant que nous avons des données dans notre application, il faut définir comment ces données seront affichées. Pour cela nous aurons recours au fichier MainPage.xaml.

Insérer le code suivant dans le composant Grid ayant pour nom ContentPanel:

Comme on peut le voir sur l’image précédente, certaines propriétés d’un contrôle sont sous la forme: ControlProperty=”{Binding ClassProperty}”.

• ControlProperty correspond à la propriété (d’un control) sur laquelle vous désirez réaliser le binding.
• ClassProperty correspond à la propriété (d’une classe, ici Contact) qui va jouer le rôle de source de données pour le ControlProperty auquel il est lié.

NB: La ClassProperty doit être public.

Voyons où nous en sommes:

• Nous avons des données pour peupler notre application.
• Nous avons défini un modèle pour l’affichage de nos données.

Il nous maintenant lier notre modèle d’affichage à nous données.

pour cela insérez ce bout de code dans le constructeur de la classe MainPage:

public MainPage()         {             InitializeComponent();             …             …             /*Code pour les données contacts = new List(){…}*/             this.contactListView.ItemsSource = contacts;          }

Normalement c’est fini mais, pour que l’affichage soit correcte il faut ajouter des images pour les contacts. Ajoutez donc un dossier Images dans l’explorateur de solution et insérez y 5 images (img1.png, img2.png, img3.png, img4.png, img5.png) et assurer vous que leur propriété Action de génération  a pour valeur Contenu.

Votre explorateur de solution devrait ressembler à ceci:

Ensuite exécutez votre application (F5) pour voir le résultat.

J’ai le résultat suivant:

Pas fameux hein mes images , mais vous aurez compris le principe (enfin,je l’espère).