Vue d’ensemble la gestion des données

Les données sont le cœur de chaque interface utilisateur. Des visualisations de réservations d’hôtel à la bourse, les interfaces utilisateur sont généralement un moyen de visualiser certaines formes de données et d’interagir avec elles. Les composants et la disposition que vous choisissez pour fournir un workflow utile sont essentiellement liés à la nature des données utilisées.

Sources de données

Votre application peut devoir se limiter à l’utilisation de sources de données internes, notamment pour effectuer des calculs sur des nombres qu’un utilisateur a tapés dans un formulaire. D’autres applications que vous créez peuvent devoir accéder à des sources de données externes, telles que des bases de données, des flux Web, des services Web ou des fichiers locaux contenant des informations. Et dans certains cas, les applications peuvent devoir accéder à des sources de données internes et externes. Microsoft Expression Blend prend actuellement en charge deux types de source de données externes : XML et objet CLR.

• Source de données XML   Fichier XML local ou distant qui peut fournir à votre application des données au format XML. Vous pouvez utiliser un fichier XML que vous avez ajouté à votre projet, ou bien affecter à la source de données l’URL d’un fichier XML sur un site Web.

  Remarque :
  Silverlight 2 ne prend pas en charge les sources de données XML. Vous pouvez toutefois trouver des informations sur l’utilisation des données XML dans la page relative à l’analyse de données XML dans Silverlight (éventuellement en anglais) sur MSDN.

• Source de données d’objet CLR (Common Language Runtime)   Objet contenant des propriétés publiques, des propriétés secondaires et des indexeurs auxquels vous pouvez lier vos propriétés cibles. Pour les applications WPF, vous pouvez utiliser une bibliothèque de classes Microsoft .NET Framework qui convertit les données d’une base de données en ObservableCollection. Pour plus d’informations, voir Essayez ! Créer une source de données d’objet CLR, ou la page sur la présentation de la liaison de données sur MSDN. Pour les applications Silverlight 2, voir la page relative à la liaison de données dans Silverlight 2 (éventuellement en anglais) sur MSDN.

  Remarque :
  Microsoft Expression Blend ne prend pas en charge les classes de sources de données d’objets CLR dont le constructeur contient des paramètres.

Liste des sources de données dans le panneau Projet d’un projet WPF ouvert dans Expression Blend.

Les sources de données externes qui sont associées au document actif dans Expression Blend sont répertoriées sous Données dans le panneau Projet. Vous pouvez utiliser les boutons pour ajouter et supprimer des sources de données, voire déplacer des éléments de données sur la planche graphique pour créer des contrôles dont les données sont liées aux éléments. Si aucune source de données n’est configurée, la zone Données dans le panneau Projet affiche uniquement les boutons utilisés pour créer une source de données.

Haut de la page

Liaison de données

La liaison de données est le processus de connexion des éléments d’une source de données aux composants de l’interface utilisateur (contrôles). Cela signifie que chaque fois que les données changent, les composants d’interface refléteront ces modifications, et vice versa. Un exemple simple de liaison de données serait un contrôle de barre du curseur qui est lié en interne à la largeur d’un rectangle. Le déplacement de la barre du curseur mettrait le rectangle à l’échelle en l’agrandissant ou en le rétrécissant.

Expression Blend fournit un moyen simple et cohérent de lier les éléments de votre application à plusieurs sources de données, ainsi que de configurer les éléments qui affichent et modifient les données. Une liaison est bâtie essentiellement entre une source et une cible. La source est généralement une source de données ou un autre contrôle tandis que la cible est un contrôle. Dans l’exemple de la barre du curseur, la source est la propriété Value du contrôle de barre du curseur et la cible la propriété Width du rectangle.

Vous pouvez créer des liaisons à l’aide du bouton Options de propriétés avancées associé aux propriétés du panneau Propriétés ou en faisant glisser les éléments situés sous Données dans le panneau Projet sur la planche graphique. (Pour obtenir des instructions, voir Lier des données à une propriété ou à un élément.) Les deux options ouvrent la boîte de dialogue Créer une liaison de données pour vous permettre de créer des liaisons entre un contrôle (la cible) et un champ de données ou un autre contrôle (la source).

Boîte de dialogue Créer une liaison de données avec la section Options avancées développée

La boîte de dialogue Créer une liaison de données contient trois options de base permettant de sélectionner une source de données ainsi que des options avancées :

• Champ de données   Cette option présente les sources de données XML et d’objets CLR créées dans le projet ainsi que leurs champs associés. Vous pouvez ajouter une nouvelle source de données XML ou d’objets CLR, ou bien utiliser des connexions déjà créées. Pour sélectionner un champ auquel créer une liaison, sélectionnez un élément sous Sources de données, puis sélectionnez un élément de données sous Champs. Le type de l’élément de données doit correspondre à celui de la propriété auquel il est lié, sauf si vous disposez d’un convertisseur de valeurs que vous pouvez appliquer (voir la section « Options avancées », plus loin dans cette rubrique). Lorsque la liaison de données est créée, la valeur de la propriété de la cible est remplie avec l’élément de données.

• Propriété de l’élément   Cette option active la liaison de la propriété d’un élément à celle d’un autre élément dans le même fichier XAML (Extensible Application Markup Language) ; elle revient à lier la propriété Width d’un rectangle à la propriété Value d’une barre du curseur dans l’exemple mentionné plus haut dans cette rubrique. Pour créer cette liaison, recherchez la propriété cible (dans ce cas, la propriété Width d’un rectangle) dans le panneau Propriétés, cliquez sur le bouton Options de propriétés avancées, puis cliquez sur Liaison de données. Cliquez sur l’onglet Propriété de l’élément, naviguez jusqu’aux éléments situés dans le volet gauche pour rechercher la barre du curseur (l’élément source), puis naviguez jusqu’à la liste des propriétés située dans le volet droit pour rechercher la propriété Value.

  Remarque :
  Silverlight 2 ne prend pas en charge les liaisons élément-à-élément.

• Contexte de données explicite   Cette option vous permet d’effectuer une liaison à une source de données dans le contexte spécifié pour l’élément actif ou l’un de ses parents. Un contexte de données est un moyen pratique de partager des données entre plusieurs contrôles en définissant une étendue dans laquelle toutes les propriétés liées aux données héritent une source commune. Vous pouvez ainsi affecter un contexte de données à un objet grille contenant un objet ListBox et un objet TextBlock, puis lier les propriétés des deux objets à des éléments de données différents dans le même contexte. Cette méthode est utile pour créer une structure maître/détails dans laquelle, si vous cliquez sur un élément dans une liste (le volet principal), les informations concernant cet élément apparaissent dans un autre objet (le volet d’informations). Le volet Champs de l’onglet Contexte de données explicite contient les champs de connexion de données disponibles à partir du contexte de données hérité, d’où vous pouvez sélectionner celui qui convient le mieux à la propriété cible.

  Remarque :

  Dans les trois options précédentes, vous pouvez choisir d’utiliser un chemin personnalisé ou une expression XPath (XML Path Language) pour votre liaison de données. L’expression XPath reprend automatiquement le chemin d’accès de l’élément que vous avez sélectionné sous Champs. Vous pouvez toutefois lui ajouter une extension pour limiter les données rapatriées de la source de données, en identifiant notamment des nœuds spécifiques dans les données XML qui vous intéressent, par exemple un élément d’un tableau. Pour plus d’informations sur l’utilisation de XPath, voir la page Syntaxe XPath et la page sur la procédure de liaison à des données XML à l’aide de requêtes XMLDataProvider et XPath (éventuellement en anglais) sur MSDN.

• Options avancées   La section avancée de la boîte de dialogue, à laquelle vous pouvez accéder en cliquant sur le développeur en bas , active le paramétrage des options avancées comme la direction du flux de données (voir Flux de données plus loin dans cette rubrique), une valeur par défaut pour la propriété cible, un convertisseur de valeurs et un paramètre de convertisseur. Les convertisseurs de valeurs sont des méthodes de classe .NET Framework permettant de convertir des valeurs d’un type dans un autre et dont l’utilisation s’impose lorsque les propriétés source et cible possèdent des types incompatibles. Vous pouvez ajouter un convertisseur de valeurs en cliquant sur le bouton « … » situé en regard de la zone du convertisseur de valeurs et en en sélectionnant un dans la boîte de dialogue Ajouter un convertisseur de valeurs. Vous pouvez également spécifier un paramètre de convertisseur (par exemple, pour convertir un type double en décimal, peut-être devrez-vous préciser le nombre de chiffres à afficher après le point décimal). Pour obtenir un exemple d’un convertisseur de valeurs, voir Essayez ! Créer et appliquer un convertisseur de valeurs.

Haut de la page

Flux de données

Le flux de données se définit comme la direction dans laquelle vos données transitent entre la source et la cible. Dans le cas de la barre du curseur qui redimensionne un rectangle, peut-être n’auriez-vous eu besoin que d’une liaison monodirectionnelle, à savoir celle qui va de la barre du curseur (source) vers le rectangle (cible). Les configurations de liaison suivantes pour le flux de données sont prises en charge :

• Par défaut   Identique au flux de données TwoWay (bidirectionnel).

• OneWay (unidirectionnel)   Les modifications apportées à la source mettent automatiquement à jour la cible, mais les modifications apportées à la cible ne mettent pas à jour la source.

• TwoWay (bidirectionnel)   Les modifications apportées à la source mettent automatiquement à jour la cible et inversement.

• OneWayToSource (unidirectionnel vers la source)   Désigne l’opération inverse de la liaison unidirectionnelle et met automatiquement à jour la source une fois la cible modifiée. Cette option est utile lorsque vous ne pouvez pas voir la propriété cible dans le panneau Propriétés, ce qui peut se produire lorsque la propriété n’est pas dépendante. La liaison OneWayToSource vous permet de définir à la place la liaison de données sur la cible.

• OneTime (une fois)   Provoque une initialisation unique de la source vers la cible, mais les modifications suivantes apportées à la source ne mettent pas la cible à jour.

Pour voir le flux de données fonctionner, étudiez l’exemple d’interface utilisateur ci-dessous qui contient un contrôle Slider (source) et un contrôle TextBox (cible) :

Illustration du flux de données par le biais des types de liaison

Dans l’illustration précédente, la liaison est définie sur la zone de texte (cible) à l’aide de la procédure suivante :

1. Dans le panneau Propriétés, cliquez sur le bouton Options de propriétés avancées  associé à la propriété Text (sous Propriétés communes) du contrôle TextBox, puis cliquez sur Liaison de données.

2. Dans la boîte de dialogue Créer une liaison de données qui s’affiche, dans l’onglet Propriété de l’élément, sélectionnez la propriété Value du nœud Slider.

Le tableau suivant décrit le comportement de liaison pour cet exemple, en fonction du type de liaison :

Type de liaison	Résultat
OneWay	Le déplacement de la barre du curseur (source) met à jour la zone de texte (cible). Toutefois, la saisie d’un nombre dans la zone de texte ne déplace pas la barre du curseur.
TwoWay	Le déplacement de la barre du curseur (source) met à jour la zone de texte (cible). De plus, la position de la barre du curseur change lorsqu’un nombre est entré dans la zone de texte après un clic de souris en dehors de la zone de texte.
OneWayToSource	La saisie d’un nombre dans la zone de texte (cible) suivie d’un clic de souris en dehors de la zone de texte déplace la barre du curseur (source). Toutefois, le déplacement de la barre du curseur ne met pas à jour la zone de texte.
OneTime	La valeur initiale de la barre du curseur (source) met à jour la zone de texte (cible) au démarrage de l’application. Les modifications suivantes apportées à la barre du curseur ne mettent pas à jour la zone de texte et la saisie d’un nombre dans la zone de texte ne met pas non plus à jour la barre du curseur.

Haut de la page

Méthodes de liaison à des sources de données externes

Flux de travail 1 : liaison de la source à la cible

Lorsque vous avez créé votre source de données externe, vous pouvez la lier aux contrôles de l’interface utilisateur. Pour cela, vous disposez de deux méthodes :

• Liaison d’un contrôle existant   Si le contrôle existe déjà dans le document, vous pouvez le lier aux données en faisant glisser le nœud de données sous la section Données du panneau Projet dans le contrôle, puis en sélectionnant le nom du contrôle (Lier propriété au contrôle) sous la section Lier au contrôle existant dans la liste qui apparaît.

• Création d’un contrôle   Vous pouvez également faire glisser un nœud de données quelconque sous la section Données du panneau Projet dans un document, puis sélectionner un contrôle dans la liste qui apparaît sous la section Sélectionner un contrôle pour représenter ce champ de données. Cette option va insérer un nouveau contrôle dans le document.

Que vous décidiez de lier un contrôle existant ou d’en créer un, la boîte de dialogue Créer une liaison de données s’ouvre pour vous permettre de sélectionner le champ que vous voulez lier à la source de données. Par exemple, si vous créez une liaison en faisant glisser un élément de données de type chaîne dans un contrôle TextBox, vous voudrez certainement créer une liaison avec le champ Texte (sélectionné par défaut) de ce nœud. Vous pouvez également spécifier des paramètres de liaison supplémentaires en cliquant sur le développeur dans la boîte de dialogue. Cliquez sur OK pour fermer la boîte de dialogue et créer la liaison. Si les données sont disponibles au moment de la conception, la valeur du champ sélectionné doit mettre à jour le contrôle. Pour obtenir des instructions, voir Lier des données à une propriété ou à un élément.

Si l’élément de données est une collection d’éléments (un tableau) ou si l’élément de données ne correspond pas exactement au type cible, la boîte de dialogue Créer un modèle de données s’ouvre pour vous permettre de sélectionner des contrôles spécifiques afin d’afficher vos données. Pour plus d’informations, voir la section Modèles de données, plus loin dans cette rubrique.

Flux de travail 1 : liaison de la cible à la source

Le workflow précédent démarrait toujours à la source de données et se terminait au contrôle cible ; vous pouvez inverser le processus si vous avez déjà créé le contrôle et savez quelle propriété vous voulez lier à votre source de données ou à la propriété d’un autre contrôle. Ce workflow est particulièrement utile dans le cadre d’une liaison élément-à-élément.

En regard de chaque éditeur de valeur de propriété dans le panneau Propriétés, un bouton Options de propriétés avancées s’affiche et vous permet de définir des options de propriétés avancées, notamment la liaison de données. Un clic sur Liaison de données dans le menu des options avancées ouvre la même boîte de dialogue Créer une liaison de données que celle décrite dans le Workflow 1, plus haut dans cette rubrique.

Haut de la page

Modèles de données

Il peut arriver que vous souhaitiez afficher une liste des éléments à partir de votre source de données. Un élément de données qui contient une liste d’éléments est identifié par « (Array) » dans le nom d’élément. Lorsque vous faites glisser un nœud de liste sous Données dans le panneau Projet dans un document et sélectionnez ListBox dans la liste de contrôles facultatifs à lier, la boîte de dialogue supplémentaire Créer un modèle de données s’ouvre et vous permet de concevoir le modèle de données. Cette boîte de dialogue peut également s’ouvrir lorsque vous liez des contrôles de texte à des éléments de données de type chaîne.

Un modèle de données définit la structure et le format de présentation des données. Par exemple, si vous liez le champ ItemsSource d’un contrôle ListBox à une liste de nœuds de contacts dans votre source de données, le modèle de données est un moyen de spécifier quels champs de cette liste vous allez inclure et quels contrôles doivent être affectés à chaque champ. Vous pouvez décider de représenter un nom en tant que TextBlock, une image en tant qu’Image et un champ booléen tel que IsCurrentMember en tant que contrôle CheckBox. La création d’un modèle de données garantit que les données dans vos nœuds de connexion seront traduites dans le format visuel voulu. Le modèle permet un contrôle très fin de l’affichage des données arbitraires dans le contrôle.

Remarque :
Seules les propriétés Content et ItemsSource prennent en charge les modèles de données.

Dans la boîte de dialogue Créer un modèle de données, vous avez la possibilité de procéder de l’une des manières suivantes :

• d’utiliser le style par défaut pour le contrôle. Dans le cas d’une liaison à une liste d’éléments, le style par défaut est le plus souvent une séquence de zones de texte. Pour plus d’informations, voir la vue d’ensemble des modèles de données sur MSDN. Cette option est désactivée s’il n’existe pas de modèle par défaut pour le contrôle ;

• d’utiliser un modèle de données actuel ou prédéfini figurant déjà dans le projet. Cette option est désactivée s’il n’existe aucune ressource de modèle de données appropriée pour le contrôle.

• de spécifier un nouveau modèle de données et d’afficher les champs. Cette option vous permet de décider quels champs de données inclure dans le modèle et de sélectionner le type de contrôle qui doit être affecté à chaque champ de données. Vous pouvez également sélectionner quel type d’élément conteneur va habiller tous les champs en cliquant sur la flèche déroulante en regard du contrôle indiqué pour l’élément au premier plan. Dans l’exemple illustré par l’image suivante, si vous avez cliqué sur la flèche déroulante pour le contrôle StackPanel en regard de item, puis avez sélectionné Grid, le modèle de données utiliserait un contrôle Grid au lieu d’un contrôle StackPanel comme conteneur pour vos éléments. Utilisez les boutons fléchés pour déterminer l’ordre d’apparition des champs de données. Si vous ne disposez pas d’une liaison de données live, activez la case à cocher Générer des exemples de données de façon à pouvoir afficher votre contrôle avec des exemples de données sur la planche graphique et déterminer ainsi si l’apparence du modèle vous convient.

Utilisez le panneau Aperçu pour déterminer si l’apparence de votre modèle vous convient.

Boîte de dialogue Créer un modèle de données.

Les modèles de données sont stockés en tant que ressources. Si vous souhaitez modifier un modèle de données existant, vous pouvez cliquer sur le bouton Modifier la ressource à côté du modèle de données dans le panneau Ressources. Expression Blend passe alors dans le mode de modification de modèle et affiche la structure de votre modèle sous Objets et chronologie. Dans ce mode d’édition, vous pouvez ajouter des contrôles à votre modèle et utiliser la liaison de données à partir du panneau Propriétés pour lier les propriétés de ces contrôles aux nouveaux éléments provenant de la source de données.

Haut de la page