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 Ajouter une source d’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 Application 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 é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 à partir du panneau Données vers la planche graphique. 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).

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

• 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 taper un chemin d’accès personnalisé ou une expression XPath (XML Path Language) 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.

• Options avancées   La section des options avancées 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.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 :

• Default   Les modifications apportées à la source mettent automatiquement à jour la cible et inversement. Identique au flux de données TwoWay.

• 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. Ceci est l’inverse de la liaison 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 vous 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 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.

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 maître-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 workflow est particulièrement utile dans le cadre d’une liaison élément-à-élément.

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 de propriétés avancées s’affiche et 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.

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.

Voir aussi

Concepts

Conception de styles pour des objets

Organisation des objets