Partager via


Créer un contrôle d’éléments

Cette page s’applique à WPF et Silverlight 2

Les contrôles d’éléments ont une propriété Items pouvant contenir une collection d’éléments enfants. Vous pouvez ajouter des éléments enfants de tout type à la collection d’éléments, ou vous pouvez afficher un tableau d’éléments à partir d’une source de données en utilisant une liaison de données. Les contrôles d’éléments n’ont ni propriété de contenu ni propriété d’en-tête. Des éléments enfants sont ajoutés dans l’hôte d’éléments du contrôle d’éléments qui, dans le cas d’un contrôle ListBox, est un Panneau d’empilement qui dispose les éléments dans une pile verticale. Vous ne verrez pas l’hôte d’éléments sous Objets et chronologie dans Microsoft Expression Blend, sauf si vous modifiez le modèle du contrôle d’éléments.

La procédure suivante montre comment créer un contrôle d’éléments (un contrôle ListBox) et ajouter des éléments à la collection d’éléments. Vous pouvez utiliser cette procédure avec d’autres contrôles d’éléments répertoriés sous « Types » dans la rubrique consacrée aux Types ItemsControl sur MSDN. Si vous souhaitez afficher un tableau d’éléments d’une source de données, voir la rubrique Essayez ! Créer un lecteur de News RSS.

Cc294882.alert_note(fr-fr,Expression.10).gifRemarque :

Les contrôles d’éléments ne sont pas disponibles dans les projets Microsoft Silverlight 1.0. Toutefois, vous pouvez créer un calque d’objets TextBlock dans un panneau de disposition Canevas et raccorder un gestionnaire d’événements JavaScript afin de faire apparaître ou disparaître les éléments. Pour plus d’informations sur JavaScript, voir les détails relatifs aux événements de souris et scripts Silverlight.

Pour créer un contrôle d’éléments

  1. Dans la boîte à outils du côté gauche d’Expression Blend, cliquez sur le bouton Bibliothèque de composants Cc294882.0224cabd-5da1-4e01-bddd-4a647401a098(fr-fr,Expression.10).png. Sous l’onglet Contrôles, cliquez sur Contrôles système (si cette option n’est pas déjà sélectionnée), puis sélectionnez ListBoxCc294882.ffd7a7c3-6bcd-4ed3-a59e-1f28d06ec4ae(fr-fr,Expression.10).png dans la liste. L’icône du contrôle ListBox apparaît au-dessus du bouton Bibliothèque de composants, et est sélectionnée, prête pour l’ajout d’un contrôle ListBox à la planche graphique.

    Cc294882.alert_tip(fr-fr,Expression.10).gifConseil :

    Les éléments d’interface utilisateur les plus courants (tels que le contrôle Button) sont déjà affichés dans les listes déroulantes au-dessus du bouton Bibliothèque de composants afin que vous puissiez les ajouter rapidement.

  2. Pour ajouter un bouton à la planche graphique, double-cliquez sur l’icône Boîte à outils du contrôle ListBox.

    Objet ListBox créé sur la planche graphique à sa taille et à son emplacement (en haut à gauche) par défaut

    Cc294882.cd6e2b8c-8640-474d-81b3-5c476113947a(fr-fr,Expression.10).png

    Cc294882.alert_tip(fr-fr,Expression.10).gifConseil :

    Vous pouvez également ajouter un contrôle à la planche graphique en le sélectionnant d’abord dans la boîte à outils, puis en cliquant sur la planche graphique et en faisant glisser le curseur pour spécifier le rectangle englobant du contrôle.

    Cc294882.alert_tip(fr-fr,Expression.10).gifConseil :

    Après qu’un élément de conception d’interface utilisateur, tel qu’un contrôle ListBox, est ajouté à la planche graphique, il devient un objet dans votre application.

  3. Sous Objets et chronologie, double-cliquez sur l’objet ListBox pour en faire l’élément activé. Notez qu’une surbrillance jaune apparaît autour de l’élément. L’activation d’un objet permet d’ajouter un élément enfant.

    Cc294882.alert_tip(fr-fr,Expression.10).gifConseil :

    Vous pouvez également activer un objet sur la planche graphique en sélectionnant d’abord l’outil SélectionCc294882.2ff91340-477e-4efa-a0f7-af20851e4daa(fr-fr,Expression.10).png dans la boîte à outils, puis en double-cliquant sur l’objet sur la planche graphique.

  4. Dessinez plusieurs formes dans le contrôle ListBox à l’aide d’éléments de la boîte à outils tels que le contrôle TextBlockCc294882.42165963-00f7-4a33-abcd-b0849edebada(fr-fr,Expression.10).png, Button Cc294882.05df1779-a68f-436b-b834-a91b7995a3ec(fr-fr,Expression.10).png ou Rectangle Cc294882.ae750268-92e8-403a-9e07-b662da4e9e1e(fr-fr,Expression.10).png. Notez que la liste dispose ces éléments enfants dans une pile verticale.

    Objets enfants ajoutés à un objet ListBox

    Cc294882.926bd9e5-e1d9-47a3-a37a-33cd351984b4(fr-fr,Expression.10).png

    Cc294882.alert_note(fr-fr,Expression.10).gifRemarque :

    Si vous ajoutez plus d’éléments que ne peut en contenir un contrôle d’éléments, une barre de défilement apparaît lors de l’exécution de votre application. Cela vous permet de voir les éléments supplémentaires.

    Cc294882.alert_tip(fr-fr,Expression.10).gifConseil :

    Réagencez les éléments de la liste en faisant glisser les objets sous Objets et chronologie, ou sélectionnez l’outil SélectionCc294882.2ff91340-477e-4efa-a0f7-af20851e4daa(fr-fr,Expression.10).png pour les faire glisser sur la planche graphique.

  5. Vous pouvez voir les éléments dans votre contrôle ListBox et en ajouter d’autres dans la fenêtre de l’Éditeur de collections. Pour ouvrir l’Éditeur de collections, cliquez sur le bouton Modifier les éléments de cette collection Cc294882.180d50dc-77e2-4d23-a353-1822e9056f2f(fr-fr,Expression.10).png en regard de la propriété Items (Collection) dans le panneau Propriétés.

  6. Construisez votre projet (F5) pour voir l’application résultante.