Partager via

Essayez ! Afficher les données d'une base de données exemple SQL

  • Article

This page applies to WPF projects only

Dans Microsoft Expression Blend, vous pouvez utiliser des sources de données XML et des sources de données d’objets CLR (Common Language Runtime). Les sources de données XML sont simples d’utilisation, contrairement aux sources de données d’objets CLR qui sont beaucoup plus complexes. Les procédures suivantes expliquent comment afficher les données d’une source de données CLR dans votre application Expression Blend. Les deux premières tâches impliquent la récupération des données à partir d’un exemple de base de données et leur conversion dans un format compatible avec Expression Blend. La troisième tâche implique la création d’un projet Expression Blend contenant des éléments liés aux données.

Cc294789.alert_note(FR-FR,Expression.30).gifRemarque :

Pour les applications Microsoft Silverlight, voir Liaison de données Silverlight sur MSDN.
Cc294789.alert_note(FR-FR,Expression.30).gifRemarque :

Pour suivre les procédures de cette rubrique à la lettre, Microsoft Visual Studio 2008, Microsoft SQL Server 2008 et l’exemple de base de données AdventureWorks doivent être installés au préalable. Pour plus d’informations sur l’obtention de l’exemple AdventureWorks, voir Installation des exemples de bases de données AdventureWorks et des autres exemples sur MSDN.

Si vous préférez, vous pouvez créer une DataTable ou un DataSet à partir d’une autre base de données. Dans ce cas, vous pouvez adapter les première et seconde tâches de cette rubrique à vos données. Ces principes sont les mêmes tant que vous utilisez une source de données CLR (ou Microsoft .NET Framework).

Définition et remplissage d’une table de données

La procédure suivante décrit comment créer une bibliothèque de classes dans Visual Studio 2008 afin de remplir une instance de DataTable avec des données provenant de l’exemple de base de données AdventureWorks.

Pour définir et remplir un DataTable

  1. Dans le menu Fichier de Visual Studio 2008, pointez sur Nouveau, puis cliquez sur Projet.

  2. Dans la boîte de dialogue Nouveau projet, sous Types de projets, cliquez sur Visual C#. Sous Modèles, cliquez sur Bibliothèque de classes. Nommez le nouveau projet AWDataSource, puis cliquez sur OK.

    Visual Studio génère le code du nouveau projet de bibliothèque de classes et ouvre le fichier Class1.cs aux fins de modification.

  3. Dans le fichier Class1.cs, remplacez le nom de la définition de classe publique Class1 par ProductPhotosCollection (ce nom est plus explicite).

  4. Dans l’Explorateur de solutions, cliquez avec le bouton droit sur le nom de votre projet (AWDataSource), pointez sur Ajouter, puis cliquez sur Nouvel élément.

  5. Dans la boîte de dialogue Ajouter un nouvel élément, sélectionnez DataSet dans la liste des modèles, nommez l’élément ProductPhotos.xsd, puis cliquez sur Ajouter.

    Un dataset est ajouté à votre projet sous la forme d’un fichier de schéma et de ses fichiers de classe associés. En outre, le fichier de schéma s’ouvre également à des fins de modification.

    Cc294789.alert_note(FR-FR,Expression.30).gifRemarque :

    Un dataset est un objet contenant des tables de données dans lesquelles vous pouvez stocker temporairement des données en mémoire pour exécuter votre application. Pour plus d’informations, voir la vue d'ensemble des groupes de données dans Visual Studio sur MSDN.

  6. Dans l’Explorateur de serveurs, cliquez avec le bouton droit sur Connexions de données, puis cliquez sur Ajouter une connexion.

  7. Dans la boîte de dialogue Choisir une source de données, le champ Source de données doit déjà lister Microsoft SQL Server (SqlClient).

    Cc294789.alert_tip(FR-FR,Expression.30).gifConseil :

    Si vous n’utilisez pas de base de données SQL Server, cliquez sur le bouton Modifier pour sélectionner une autre source de données. Les étapes suivantes ne correspondront pas à ce qui s’affichera dans la boîte de dialogue Choisir une source de données de Visual Studio.

  8. Dans le champ Nom du serveur, entrez le nom de l’instance de SQL Server sur laquelle la base de données AdventureWorks est installée.

    Cc294789.alert_tip(FR-FR,Expression.30).gifConseil :

    Si vous envisagez d’utiliser une base de données SQL Server autre que celle d’AdventureWorks, sélectionnez le nom du serveur sur lequel votre base de données SQL Server est installée.

  9. Sous Connexion au serveur, sélectionnez la méthode d’authentification nécessaire pour se connecter à votre instance de SQL Server. Il est possible que vous deviez contacter l’administrateur du serveur pour obtenir cette information. Authentification Windows utilise vos informations d’identification de connexion actuelles. Authentification SQL Server nécessite le nom d’utilisateur et le mot de passe du compte configuré pour accéder à votre base de données.

  10. Sous Connexion à une base de données, sélectionnez la base de données AdventureWorks, laquelle s’affichera uniquement si vos informations d’identification de connexion sont correctes, si la base de données AdventureWorks est installée sur votre ordinateur et si ce dernier exécute SQL Server.

  11. Cliquez sur le bouton Tester la connexion. Si le test de connexion échoue, consultez votre administrateur SQL Server pour obtenir de l’aide.

  12. Cliquez sur OK pour terminer la création de la connexion de données. Dans l’Explorateur de serveurs, une nouvelle connexion nommée <servername>.AdventureWorks.dbo apparaît sous le nœud Connexions de données, où <servername> représente le nom de votre serveur.

  13. Dans l’Explorateur de serveurs, développez le nouveau nœud de connexion <servername>.AdventureWorks.dbo, développez le nœud Tables, puis recherchez la table ProductPhoto. Le fichier ProductPhotos.xsd étant ouvert sur la surface de création, faites glisser la table ProductPhoto de l’Explorateur deserveurs vers la surface de création. Vous disposez à présent d’un dataset typé capable de se connecter à la base de données AdventureWorks et de retourner le contenu de la table ProductPhoto.

  14. Dans le fichier Class1.cs, ajoutez la méthode suivante dans la classe ProductPhotosCollection :

    private void GetData()
    {
        ProductPhotosTableAdapters.ProductPhotoTableAdapter da =
            new ProductPhotosTableAdapters.ProductPhotoTableAdapter();
        ProductPhotos.ProductPhotoDataTable dt = da.GetData();
    }

    L’espace de noms ProductPhotosTableAdapters est défini dans le fichier ProductPhotos.Designer.cs, qui a été généré par Visual Studio lorsque vous avez créé le DataSet ProductPhotos. Vous disposez à présent d’une méthode capable de remplir une instance de DataTable ProductPhotos avec des données lors de l’exécution de votre application.

  15. Générez votre projet (Ctrl+Maj+B) pour vous assurer qu’il ne contient aucune erreur.

Adaptation de la collection de données à une collection WPF

La procédure suivante décrit comment créer une bibliothèque de classes dans Visual Studio 2008 pour convertir des données d’un DataTable en ObservableCollection de sorte qu’Expression Blend (ou toute application qui utilise Windows Presentation Foundation (WPF)) puisse effectuer une liaison aux données. Vous allez définir une classe ProductPhoto pour représenter les données dans une ligne de la table, ajouter une collection de ProductPhotos à ProductPhotosCollection en tant que membre privé, puis ajouter un accesseur public (méthode get) afin que le code provenant de l’extérieur de la classe puisse y accéder.

Cc294789.alert_tip(FR-FR,Expression.30).gifConseil :

Si vous avez suivi la procédure précédente décrite dans cette rubrique, vous disposez à présent d’une instance exploitable de DataTable qui contient des données de la table ProductPhoto de la base de données AdventureWorks. Si vous disposez d’un DataTable ou d’un DataSet renseigné à partir d’une autre source, vous pouvez adapter le nom de la table de données et les noms de champs dans les étapes suivantes afin d’être en phase avec les données dont vous disposez.

Pour adapter la collection de données à une collection WPF

  1. Dans Visual Studio 2008, cliquez avec le bouton droit sur le nom de votre projet dans l’Explorateur de solutions, puis cliquez sur Ajouter une référence. Sous l’onglet .NET, sélectionnez l’assembly WindowsBase. Si l’assembly WindowsBase n’apparaît pas dans la liste, cliquez sur l’onglet Parcourir et recherchez l’assembly WindowsBase.dll dans le dossier %SystemDrive%\Program Files\Reference Assemblies\Microsoft\Framework\v3.0.

  2. Cliquez sur OK. L’assembly WindowsBase implémente la classe System.Collections.Object.ObservableCollection.

  3. Tout en haut du fichier Class1.cs, ajoutez l’instruction suivante :

    using System.Collections.ObjectModel;

  4. Dans le fichier Class1.cs, ajoutez également la définition de classe ProductPhoto suivante à l’espace de noms AWDataSource afin de disposer d’une classe exploitable :

    public class ProductPhoto { }

  5. Ajoutez le membre suivant à la classe ProductPhotosCollection :

    private ObservableCollection<ProductPhoto> productPhotos =
    new ObservableCollection<ProductPhoto>();

  6. Ajoutez la méthode d’accesseur suivante à la classe ProductPhotosCollection :

    public ObservableCollection<ProductPhoto> ProductPhotos
{ get { return this.productPhotos; } }

    Les étapes suivantes impliquent la copie de l’ID, de la date de modification et des deux photos du DataTable dans ObservableCollection.

  7. Cliquez avec le bouton droit sur le nom de votre projet dans l’Explorateur de solutions, puis cliquez sur Ajouter une référence. Ajoutez une référence dans l’assembly PresentationCore.

  8. Tout en haut du fichier Class1.cs, ajoutez les instructions suivantes :

    using System.Windows.Media;
using System.Windows.Media.Imaging;

  9. Ajoutez des membres à la classe ProductPhoto afin que la classe ressemble à ceci :

    public class ProductPhoto
    {
        // Public Accessors to the private properties.
        public int ID { get { return id; } }
        public ImageSource ThumbNailPhoto { get { return thumbNailPhoto; } }
        public ImageSource LargePhoto { get { return largePhoto; } }
        public DateTime ModifiedDate { get { return modifiedDate; } }

        // Constructor.
        public ProductPhoto(int id, byte[] thumbNailPhoto, byte[] largePhoto,
            DateTime modifiedDate)
        {
            this.id = id;
            this.thumbNailPhoto = ByteArrayToImageSource(thumbNailPhoto);
            this.largePhoto = ByteArrayToImageSource(largePhoto);
            this.modifiedDate = modifiedDate;
        }

        // Private properties.
        private int id;
        private ImageSource thumbNailPhoto;
        private ImageSource largePhoto;
        private DateTime modifiedDate;

        // Supporting method.
        private ImageSource ByteArrayToImageSource(byte[] data)
        {
            BitmapImage image = null;
            if (null != data)
            {
                image = new BitmapImage();
                image.BeginInit();
                image.StreamSource = new System.IO.MemoryStream(data);
                image.EndInit();
            }
            return image;
        }
    }

  10. Ajoutez le code suivant à la classe ProductPhotosCollection à la fin de la méthode GetData afin que la méthode copie le DataTable dans ObservableCollection :

    productPhotos.Clear();
   foreach (ProductPhotos.ProductPhotoRow row in dt)
   {
       productPhotos.Add(new ProductPhoto(
           row.ProductPhotoID,
           row.ThumbNailPhoto,
           row.LargePhoto,
           row.ModifiedDate));
   }

    Nous allons à présent implémenter la propriété Command (commande), car il s’agit là d’un moyen pratique de déclencher la méthode ProductsPhotosCollection.GetData.

  11. Cliquez avec le bouton droit sur le nom de votre projet dans l’Explorateur de solutions, cliquez sur Ajouter, puis sur Élément existant.

  12. Dans la boîte de dialogue Ajouter un élément existant, naviguez jusqu’au fichier DelegateCommand.cs dans le dossier d’exemples Expression Blend, %SystemDrive%\Program Files\Microsoft Expression\Blend\Samples\<language>\ColorSwatch, puis cliquez sur Ajouter.

  13. Remplacez le nom de l’espace de noms ColorSwatch par celui de votre espace de noms (AWDataSource). Le code contenu dans le fichier DelegateCommand.cs vous permet de lier une commande quelconque à votre méthode.

  14. Dans le fichier Class1.cs, ajoutez le membre suivant à la classe ProductPhotosCollection :

    private DelegateCommand getDataCommand;

  15. Ajoutez le constructeur suivant à la classe ProductPhotosCollection pour initialiser la commande :

    public ProductPhotosCollection()
    {
        getDataCommand = new DelegateCommand(delegate() { GetData(); });
    }

  16. Pour finir, exposez la commande en ajoutant la méthode d’accesseur suivante à la classe ProductPhotosCollection :

    public DelegateCommand GetDataCommand { get { return getDataCommand; } }

  17. Générez votre projet (F5) pour vous assurer qu’il ne contient aucune erreur. Vous disposez à présent d’une classe utilisable comme source de données dans une application Expression Blend (ou toute application WPF). Cette classe est soit ProductPhotosCollection, soit une classe équivalente que vous avez définie.

Liaison à la source de données dans Expression Blend

La procédure suivante décrit comment créer une application Expression Blend très simple avec un contrôle ListBox lié à votre source de données. L’application utilise un modèle d’interface utilisateur commun appelé affichage principal-informations. Le volet gauche nommé volet principal, contient la liste des produits. Chaque fois qu’un produit est sélectionné dans ce volet, les détails le concernant s’affichent dans le volet droit nommé volet d’informations. La mise à jour du contenu d’un volet lorsqu’un élément est sélectionné dans un autre s’effectue à l’aide de la synchronisation des données entre les contrôles.

Pour lier des procédures à la source de données dans Expression Blend

  1. Dans Expression Blend, cliquez sur Fichier, puis sur Nouveau projet.

  2. Dans la boîte de dialogue Nouveau projet, sélectionnez le type de projet Application WPF. Vous créez ainsi un projet pour une application Windows que vous pouvez générer et exécuter au fur et à mesure de sa conception. L’autre option est un projet Bibliothèque de contrôles WPF que vous pouvez utiliser pour concevoir des contrôles utilisables dans d’autres applications Windows.

  3. Dans la zone de texte Nom, tapez AWProductPhotos. Conservez le paramètre Langage par défaut, car cette procédure ne contient pas de code écrit à la main.

  4. Cliquez sur OK. Expression Blend charge le nouveau projet et l’affiche pour modification.

    Cc294789.alert_tip(FR-FR,Expression.30).gifConseil :

    Si un projet était déjà ouvert, il se peut qu’une boîte de dialogue s’affiche pour vous inviter à l’enregistrer ou à l’annuler avant d’ouvrir le nouveau projet.

  5. Une fois votre nouveau projet chargé en mémoire, enregistrez-le sur disque en cliquant dans le menu Fichier sur Enregistrer tout. La zone de texte Nom devant déjà contenir le nom AWProductPhotos, cliquez sur OK.

    Cc294789.alert_caution(FR-FR,Expression.30).gifAttention :

    Dans Expression Blend, les modifications ne sont pas enregistrées automatiquement sur le disque dur ; veillez donc à enregistrer vos fichiers dès le début et régulièrement. Pour plus d’informations, voir Gestion de solutions, projets et fichiers.

  6. Dans le menu Projet, cliquez sur Ajouter une référence.

  7. Dans la boîte de dialogue Ajouter une référence, accédez au fichier AWDataSource.dll généré à la fin de la seconde tâche de cette rubrique afin d’y ajouter une référence. Le fichier AWDataSource.dll se trouve sans doute dans le dossier bin/Debug de votre projet AWDataSource.

  8. Cliquez sur OK. Le fichier AWDataSource.dll fait à présent partie de votre projet. Si vous développez le nœud Références dans le panneau Projet, vous voyez une référence au fichier AWDataSource.dll.

  9. Dans le panneau Données, cliquez sur Ajouter une source de données actives Cc294789.601d2ab6-5e4b-49ab-bb3c-064456dc8184(FR-FR,Expression.30).png, puis cliquez sur Définir une nouvelle source de données d'objet.

  10. Dans la boîte de dialogue Définir une nouvelle source de données d’objet, développez le nœud AWDataSource, sélectionnez ProductPhotosCollection, puis cliquez sur OK.

    Dans le panneau Données, une source de données nommée ProductPhotosCollectionDS a été ajoutée à votre projet. La source de données ProductPhotosCollectionDS représente la structure d’une instance de la classe CLR que vous avez référencée. Développez ProductPhotosCollectionDS et ProductPhotosCollection pour afficher la structure. Dans une étape ultérieure de cette tâche, vous allez déplacer des données à partir de la planche graphique dans le panneau Données pour créer de nouveaux contrôles.

  11. Dans le panneau Objets et chronologie, cliquez sur le bouton LayoutRoot pour l’activer. Lorsque vous activez l’élément, notez qu’un rectangle englobant ombré apparaît autour de son nom.

    Cc294789.alert_tip(FR-FR,Expression.30).gifConseil :

    Lorsque vous voulez ajouter des éléments enfants dans un élément ou effectuer d’autres opérations spécifiques, double-cliquez sur l’élément parent dans le panneau Objets et chronologie, puis ajoutez l’élément enfant. Cette action s’appelle l’activation. L’élément activé est identifié par un rectangle ombré englobant le nom de l’élément.

    Lorsque vous voulez modifier les propriétés d’un élément, cliquez sur le nom de l’élément dans le panneau Objets et chronologie. Cette action s’appelle la sélection. L’élément sélectionné est identifié par une couleur d’arrière-plan mise en surbrillance.

    Vous pouvez sélectionner un élément sans l’activer.

  12. Dans le panneau Outils, cliquez sur SélectionCc294789.2ff91340-477e-4efa-a0f7-af20851e4daa(FR-FR,Expression.30).png. Sur la planche graphique, déplacez le pointeur sur la zone épaisse de la règle, en haut de LayoutRoot. Une règle de colonne suit votre pointeur et indique l’emplacement du nouveau séparateur de colonne en cas de clic.

  13. Cliquez pour créer un séparateur de colonne qui affectera à la colonne de gauche la même largeur que la colonne de droite. La colonne de gauche contient une liste des vignettes de produits tandis que la colonne de droite contient une grande photo représentant l’élément de liste sélectionné. Un séparateur de colonne apparaît à l’intérieur de LayoutRoot.

    Cc294789.alert_tip(FR-FR,Expression.30).gifConseil :

    Pour afficher l’intégralité de l’élément LayoutRoot sur la planche graphique, vous devrez peut-être faire un zoom arrière. Pour cela, entrez une valeur de zoom dans la zone de texte en bas de la planche graphique Cc294789.12524287-c48b-4cfc-b614-01951207239d(FR-FR,Expression.30).png, cliquez sur la flèche située en regard de la valeur de zoom ou faites tourner la roulette de la souris tout en maintenant la touche Ctrl enfoncée.

  14. Sur la planche graphique, placez votre pointeur sur la zone épaisse de la règle, à gauche de LayoutRoot. Cliquez pour créer un séparateur de ligne, ce qui agrandit suffisamment la ligne du haut pour y faire tenir un bouton. Cliquez sur l’icône de verrouillage Cc294789.1b4edaf6-b6a8-4498-80dc-949375fa610d(FR-FR,Expression.30).png en regard de la ligne du haut pour verrouiller la ligne à une hauteur fixe.

    Cc294789.alert_tip(FR-FR,Expression.30).gifConseil :

    Pour voir les résultats de l’action décrite à l’étape précédente, cliquez avec le bouton droit sur LayoutRoot dans le panneau Objets et chronologie et cliquez sur Afficher le code XAML (pour afficher le code XAML). La planche graphique passe en mode XAML, le code LayoutRoot étant mis en surbrillance. Pour voir de plus près, dans le menu Fenêtre, cliquez sur Masquer les panneaux (appuyez sur la touche F4 ou Tab).

    Une section <Grid.ColumnDefinitions> et une section <Grid.RowDefinitions> ont été ajoutées à l’élément <Grid> qui représente LayoutRoot. Les attributs Width et Height utilisent la méthode du dimensionnement proportionnel (avec la valeur *), ce qui signifie que les tailles des colonnes sont proportionnelles les unes par rapport aux autres. Par exemple, un attribut Width de 2* produit une colonne dont la taille est le double de celle d’une colonne dont la largeur a pour valeur *. La ligne que vous avez verrouillée n’est pas basée sur cette méthode, car sa hauteur est fixe.

    Lorsque vous avez fini d’examiner le code XAML, n’oubliez pas de revenir au mode Création et de restaurer les panneaux (appuyez sur la touche F4 ou Tab).

  15. Dans le panneau Données, faites glisser GetDataCommand (sous ProductPhotosCollection) dans la cellule de grille supérieure gauche sur la planche graphique.

  16. Dans la liste déroulante qui apparaît, cliquez sur Button.

  17. Dans la boîte de dialogue Créer une liaison de données, dans la liste déroulante Propriété de, choisissez Command, puis cliquez sur OK. Cette action crée un bouton qui est lié à la méthode d’accesseur GetDataCommand dans votre classe AWDataSource. Lorsque vous cliquez sur le bouton au moment de l’exécution, GetDataCommand est exécuté sur la source de données ProductPhotosCollection ; de plus, comme dans la seconde tâche décrite dans cette rubrique, l’implémentation de cette commande appelle la méthode GetData.

    Cc294789.alert_tip(FR-FR,Expression.30).gifConseil :

    Vous pouvez déplacer et redimensionner le nouveau bouton sur la planche graphique en cliquant sur l’outil Sélection du panneau Outils, en sélectionnant le nouveau bouton sur la planche graphique ou dans le panneau Objets et chronologie, puis en utilisant les ornements sur la planche graphique. Pour plus d’informations, voir Repositionner ou translater un objet et Redimensionner un objet ou le mettre à l’échelle.
    Cc294789.alert_tip(FR-FR,Expression.30).gifConseil :

    Vous pouvez accéder aux liaisons de données dans le panneau Propriétés. Pour rouvrir la boîte de dialogue Créer une liaison de données après avoir créé la liaison de données, sélectionnez au préalable Button dans le panneau Objets et chronologie. Ensuite, Sous Divers dans le panneau Propriétés, cliquez sur Options de propriétés avancées Cc294789.12e06962-5d8a-480d-a837-e06b84c545bb(FR-FR,Expression.30).png en regard de la propriété Command, puis cliquez sur Liaison de données.

  18. Sélectionnez l’objet [Button] dans le panneau Objets et chronologie, puis recherchez la propriété Content sous Propriétéscommunes dans le panneau Propriétés. Définissez la propriété Content (contenu) en entrant le texte Obtenir les photos du produit, puis appuyez sur Entrée.

  19. Déplacez et redimensionnez l’élément [Button] en cliquant sur l’outil Sélection du panneau Outils et en utilisant les ornements de la planche graphique. Faites en sorte que l’élément [Button] tienne dans la cellule de grille en haut à gauche. Ensuite, sous Disposition, dans le panneau Propriétés, définissez les propriétés suivantes :

    • Affectez aux propriétés Width et Height la valeur Auto.

    • Affectez aux propriétés de Marge la valeur 0.

    • Affectez aux propriétés HorizontalAlignment et VerticalAlignment la valeur Center.

    Ces paramètres garantissent que le bouton est centré dans la cellule de la grille et que sa taille correspond exactement au texte de la propriété Content.

  20. Dans le panneau Données, faites glisser ProductPhotos (Array) dans la cellule de grille inférieure gauche sur la planche graphique.

  21. Dans la liste déroulante qui apparaît, cliquez sur ListBox.

  22. Dans la boîte de dialogue Créer une liaison de données, dans la liste déroulante Propriété de, choisissez ItemsSource, puis cliquez sur OK.

    Cc294789.alert_tip(FR-FR,Expression.30).gifConseil :

    Un modèle de données est avant tout une arborescence d’éléments de l’interface utilisateur qui contient des liaisons aux données. Chaque fois que des données d’un type particulier doivent être affichées, le modèle de données approprié est sélectionné ; le modèle met en forme par ailleurs une nouvelle copie de l’arborescence d’éléments, enrichie des données mises à jour. Chaque élément affiché dans l’élément ListBox est un objet de type ProductPhoto que vous avez implémenté dans la seconde tâche de cette rubrique.

  23. Dans la boîte de dialogue Créer un modèle de données, sélectionnez la case d’option Nouveau modèle de données et champs d’affichage. Cette option définit la structure du type de données que vous avez déplacé de la palette Données (par exemple chaque élément d’une collection d’objets ProductPhoto). Vous pouvez à présent lier des parties de la structure de données et définir à quoi va ressembler l’arborescence d’éléments du modèle de données. Une liste déroulante déterminant l’élément utilisé pour présenter le champ de données (éléments StackPanel et TextBlock) est placée en regard de chaque élément de données. Un libellé indiquant à laquelle des propriétés l’élément de données sera lié se trouve également en regard.

  24. Désélectionnez l’option LargePhoto, car vous voulez l’afficher uniquement dans le contrôle ListBox.

  25. Le champ de données ModifiedDate est actuellement de type StackPanel, mais vous devez remplacer le contrôle par un type d’élément plus adapté à l’affichage de ce type de données. Dans la liste déroulante, en regard de ModifiedDate, choisissez TextBlock. Le libellé devient automatiquement Text.

  26. Le champ de données ThumbNailPhoto est actuellement de type ImageSource, mais vous devez remplacer le contrôle par un type d’élément plus adapté à l’affichage de ce type de données. Dans la liste déroulante, en regard de ThumbNailPhoto, choisissez Image. Le libellé devient automatiquement Source.

  27. Cliquez sur OK. Un nouveau ListBox est inséré dans le document.

    Cc294789.alert_tip(FR-FR,Expression.30).gifConseil :

    Un modèle de données est une ressource. Pour modifier le modèle de données ProductPhotosTemplate après sa création, développez le nœud Window1.xaml dans le panneau Ressources, développez Fenêtre, puis cliquez sur le bouton en regard de ProductPhotosTemplate.

  28. Sélectionnez l’élément [ListBox] dans le panneau Objets et chronologie, puis sous Disposition dans le panneau Propriétés, procédez comme suit :

    • Affectez aux propriétés Width et Height la valeur Auto.

    • Affectez à la propriété Margin la valeur 8.

    • Affectez aux propriétés HorizontalAlignment et VerticalAlignment la valeur Center.

    Ces paramètres garantissent que le contrôle ListBox remplit presque entièrement la cellule de la grille en bas à gauche.

  29. Dans le panneau Outils, cliquez sur Image Cc294789.adb61060-da5f-4279-8c0d-3681bfeb145c(FR-FR,Expression.30).png.

    Cc294789.alert_tip(FR-FR,Expression.30).gifConseil :

    Si le contrôle Image ne s’affiche pas dans le panneau Outils, vous pouvez le rechercher en cliquant sur le bouton Composants Cc294789.0d8b8d29-1af9-418f-8741-be3097d76eab(FR-FR,Expression.30).png. Lorsque vous avez sélectionné un contrôle dans cette galerie, son icône apparaît dans le panneau Outils au-dessus du bouton Composants.

  30. Sur la planche graphique, dessinez une nouvelle Image dans la cellule de la grille en bas à droite, en remplissant presque entièrement la cellule.

  31. Sélectionnez l’objet [Image] dans le panneau Objets et chronologie, puis recherchez la propriété Source sous Propriétés communes dans le panneau Propriétés. Cliquez sur le nom de la propriété Source puis, dans la liste déroulante qui apparaît, sélectionnez Liaison de données.

  32. Dans la boîte de dialogue Créer une liaison de données, sélectionnez l’onglet Propriété de l’élément, car vous allez lier les données à une propriété de l’élément [ListBox].

  33. Sous Éléments de la scène, développez Fenêtre et LayoutRoot, puis sélectionnez votre contrôle ListBox ([System.WIndows.Controls.ListBox]).

  34. Dans la zone de liste déroulante Afficher, sélectionnez Toutes les propriétés. Toutes les propriétés disponibles pour la liaison sont affichées, pas uniquement celles du même type de données que la propriété Source (String).

  35. Sous Propriétés, sélectionnez SelectedItem : (Objet).

  36. Activez la case à cocher Utiliser une expression de chemin personnalisée. L’expression par défaut est SelectedItem. Changez-la en SelectedItem.LargePhoto afin de créer une liaison avec le membre LargePhoto de l’objet ProductPhoto actuellement sélectionné.

  37. Cliquez sur Terminer.

  38. Dans le menu Projet, cliquez sur Tester Projet (ou appuyez sur F5). Lorsque l’application démarre, testez-la en cliquant sur Obtenir les photos du produit. Lorsque la zone de liste se charge avec les données, faites défiler ses éléments et vérifiez la grande photo qui apparaît dans la colonne de droite.

Application terminée

Cc294789.b769099f-ccd9-42ac-97f1-70424dfef1ee(FR-FR,Expression.30).png