Affichage de données

Les données sont le cœur de chaque interface utilisateur. Qu'il s'agisse de visualisations de sites Web de réservations d’hôtel ou de visualisations du marché boursier, les interfaces utilisateur permettent généralement 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. Microsoft Expression Blend prend en charge les types suivants de sources de données :

• 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.

  Pour plus d’informations, voir Utiliser une source de données XML.

  Remarque :
  Microsoft Silverlight ne prend pas en charge les sources de données XML actives. 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  sur MSDN.

• Source de données d’objet    Objet contenant des propriétés publiques auxquelles vous pouvez lier vos propriétés cible. 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 Utiliser une source de données d'objets pour se connecter à une base de données et Essayez ! Afficher les données d'une base de données exemple SQL, ou voir les rubriques sur laVue d'ensemble de la liaison de données   sur MSDN. Pour les applications Silverlight, voir Liaison de données Silverlight  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.

• Sources d’exemples de données    Ensemble de fichiers locaux créés à l’aide de l’outil Créer des exemples de données du panneau Données. Étant donné que les données externes ne s’affichent pas sur la planche graphique, Expression Blend prend en charge les données utilisables lors de la conception de votre application.

  Pour plus d’informations, voir Création d'un échantillon de données.

Liste des sources de données dans le panneau Données

Les sources de données qui sont associées au document actif dans Expression Blend sont répertoriées sous Ce document dans le panneau Données. Ces sources qui sont disponibles pour tous les documents d’un projet sont répertoriées sous Projet dans le panneau Données. Vous pouvez créer des sources de données à l’aide de boutons en haut du panneau Données. Vous pouvez faire glisser des éléments de données sur la planche graphique pour créer des contrôles liés aux données des éléments.

Pour plus d’informations, voir Affichage de données dans des contrôles.

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 objets de votre application à plusieurs sources de données, ainsi que de configurer les objets 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 avancées associé aux propriétés du panneau Propriétés ou en faisant glisser les éléments à partir du panneau Données vers la planche graphique.

Pour plus d’informations, voir Lier un objet à des données.

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 permet la liaison de la propriété d’un objet à celle d’un autre objet 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, effectuez l’une des opérations suivantes :

  • Recherchez la propriété cible (dans ce cas, la propriété Width d’un rectangle) dans le panneau Propriétés, cliquez sur Options avancées, puis cliquez sur Liaison de données. Cliquez sur l’onglet Propriété de l’élément, naviguez jusqu’aux objets situés dans le volet gauche pour rechercher la barre du curseur (l’objet source), puis naviguez jusqu’à la liste des propriétés située dans le volet droit et sélectionnez la propriété Value .

  • Recherchez la propriété cible (dans ce cas, la propriété Width d’un rectangle) dans le panneau Propriétés, cliquez sur Options avancées, puis cliquez sur Liaison de propriété d’élément. Notez que le curseur est passé à ****Sélecteur d’élément de la planche graphique ****. Cliquez sur l’objet de la planche graphique à laquelle vous souhaitez lier la propriété. Dans la liste déroulante Créer une liaison de données, sélectionnez la propriété Value .

• Contexte de données explicite   Cette option permet d’effectuer une liaison à une source de données dans le contexte spécifié pour l’objet 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 un modèle liste-détails dans lequel, si vous cliquez sur un élément dans une liste (le volet Liste), les détails concernant cet élément apparaissent dans un autre objet (le volet Détails). 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.

  Vous pouvez également accéder aux informations de contexte de données dans la catégorie Contexte de données au bas du panneau Données. Si un objet sélectionné sur la planche graphique est lié aux données, la catégorie Contexte de données affiche soit la propriété de contexte de données ( DataContext ), soit la propriété de contexte de données au moment de la création ( d:DataContext ) pour la sélection ou l’étendue active.

  

  La catégorie Contexte de données affiche les modifications lorsque vous basculez entre Mode liste et Mode Détails dans le panneau Données. Vous pouvez également créer une liaison de données en faisant glisser les données que vous souhaitez directement depuis la catégorie Contexte de données vers un élément sur la planche graphique.

  Remarque :

  Vous pouvez taper un chemin personnalisé ou une expression XML Path Language (XPath) pour votre liaison de données. Le champ XPath est automatiquement renseigné avec le chemin d’accès de l’élément sélectionné sous Champs. Mais, vous pouvez l’ajouter au chemin d’accès pour limiter les données récupérées de la source de données en identifiant des nœuds particuliers dans les données XML souhaitées (par exemple, un élément dans un tableau). Pour plus d’informations sur l’utilisation de XPath, voir les rubriques Syntaxe XPath  et Comment : Liaison à des données XML à l’aide de requêtes XMLDataProvider et XPath  sur MSDN.

• Afficher les propriétés avancées   La section des propriétés avancées de la boîte de dialogue, à laquelle vous pouvez accéder en cliquant sur le développeur en bas , permet le paramétrage des propriétés 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.xxx Vous pouvez ajouter un convertisseur de valeurs en cliquant sur le bouton Ajouter un nouveau convertisseur de valeurs  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 ! Convertir des données d'un type vers un autre.

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    Le paramètre par défaut est OneWay . Les modifications apportées à la source mettent automatiquement à jour la cible, mais les modifications apportées à la cible ne mettent pas à jour la source.

• OneWay    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    Les modifications apportées à la source mettent automatiquement à jour la cible et inversement.

• OneWayToSource    Les modifications apportées à la cible mettent automatiquement à jour la source, mais les modifications apportées à la source ne mettent pas à jour la cible. Il s’agit de l’inverse de OneWay . 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 ce n’est pas une propriété de dépendance. La liaison OneWayToSource permet de définir à la place la liaison de données sur la cible. Cette option n’est pas prise en charge dans les projets Silverlight.

• **OneTime   ** Aucune modification effectuée. La cible est définie sur la valeur de la source lors de l’initialisation de l’application. La cible n’est pas mise à jour après cela.

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 cette illustration, 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 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.

Pour obtenir une procédure qui illustre ce scénario, voir Lier un objet à la saisie utilisateur ou à d'autres valeurs internes.

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

Workflow 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 figure déjà dans le document, vous pouvez le lier aux données en faisant glisser le nœud de données à partir du panneau Données vers le contrôle. Un message s’affiche lors du déplacement du nœud de données pour indiquer la propriété de l’objet à laquelle les données sont liées.

  

  Pour indiquer une propriété différente, appuyez sur la touche Maj avant de relâcher le bouton de la souris.

  

• Création d’un contrôle    Vous pouvez également faire glisser un nœud de données quelconque à partir du panneau Données dans un document. Cette option va insérer un nouveau contrôle dans le document.

Pour plus d’informations, voir les rubriques suivantes :

• Lier un objet à des données

• Créer une liaison de données liste-détails

Workflow 2 : 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 flux de travail est particulièrement utile dans le cadre d’une liaison entre deux objets.

Pour plus d’informations, voir Lier un objet à la saisie utilisateur ou à d'autres valeurs internes.

En regard de chaque éditeur de valeur de propriété dans le panneau Propriétés, un bouton Options avancées s’affiche et permet de définir des options 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.

Modèles de données

Il se peut 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 à partir du panneau Données vers un contrôle DataGrid , vos données sont affichées dans des objets dont le modèle peut être modifié.

Pour des exemples de modification des modèles de données, voir les rubriques suivantes :

• Appliquer un style à un contrôle d'affichage de données

• Utiliser le contrôle DataGrid

• Utiliser le contrôle TreeView

Les modèles de données sont stockés sous forme de ressources, tout comme n’importe quel style ou modèle. Pour modifier un modèle de données existant, cliquez sur le bouton Modifier la ressource en regard du modèle de données dans le panneau Ressources. Expression Blend passe alors en mode d’édition 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.

Comportements de données

Outre la possibilité de faire glisser des propriétés sur la planche graphique pour établir une liaison avec un objet existant, créer un objet lié, ou définir un contexte de données au moment de la conception, vous pouvez également faire glisser des commandes et des méthodes depuis le panneau Données vers des objets sur la planche graphique.

Lorsque vous faites glisser une commande sur un objet, Expression Blend crée une action InvokeCommandAction pour appeler la commande. Vous pouvez ensuite configurer la manière dont l’objet déclenche la commande dans le panneau Propriétés. Ou bien, lorsque vous faites glisser une méthode sur la planche graphique, Expression Blend crée une action CallMethodAction qui peut être configurée de la même manière.

Pour plus d’informations sur InvokeCommandAction et CallMethodAction , voir InvokeCommandAction et CallMethodAction.

Voir aussi

Concepts

Conception de styles pour des objets
Organisation des objets

Copyright © 2011 Microsoft Corporation. Tous droits réservés.