Partager via

Tracer un contrôle avec en-tête

  • Article

Les contrôles avec en-tête ont une propriété d’en-tête servant à nommer le contrôle. La propriété d’en-tête peut être aussi simple qu’une chaîne de texte ou aussi complexe qu’un objet Microsoft .NET Framework. Les contrôles avec en-tête peuvent également afficher du contenu ou une collection d’éléments, selon le type de contrôle avec en-tête que vous utilisez. Par exemple, un contrôle TabItem à l'intérieur d'un contrôle TabControl est uncontrôle de contenu avec en-tête, et ToolBar et MenuItem sont tous deux des contrôles d'éléments avec en-tête.

La procédure suivante montre comment créer des contrôles de contenu avec en-tête (contrôles TabItem) à l’intérieur d’un contrôle d’éléments (contrôle TabControl). Vous pouvez également utiliser cette procédure avec d’autres contrôles de contenu avec en-tête répertoriés sous « Types » dans HeaderedContentControl sur MSDN. Les contrôles d’éléments avec en-tête sont répertoriés dans la rubrique HeaderedItemsControl sur MSDN.

Pour créer un contrôle de contenu avec en-tête

  1. Dans le panneau Outils sur le côté gauche de la fenêtre d'application Microsoft Expression Blend, cliquez sur Composants Cc295310.0d8b8d29-1af9-418f-8741-be3097d76eab(FR-FR,Expression.30).png. Dans la catégorie Contrôles, sélectionnez TabControl Cc295310.f13847cd-7fdf-4757-a648-d5ece98fcaea(FR-FR,Expression.30).png dans la liste.

    L’icône du contrôle TabControl apparaît sous le bouton Composants, et est sélectionnée, prête pour l’ajout d’un contrôle TabControl à la planche graphique.

    Cc295310.alert_tip(FR-FR,Expression.30).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 sous le bouton Composants afin que vous puissiez les ajouter rapidement.

  2. Pour ajouter un objet TabControl à la planche graphique, double-cliquez sur l'icône du contrôle TabControl. Par défaut, le contrôle TabControl contient deux objets TabItem.

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

    Cc295310.b5763b4e-3032-468e-bbdf-42057fd0cb08(FR-FR,Expression.30).png

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

    Vous pouvez ajouter d’autres objets TabItem à l'objet TabControl si vous le souhaitez. Dans le panneau Objets et chronologie, faites un clic droit sur l'objet TabControl puis cliquez sur Ajouter TabItem.

  3. Sur la planche graphique, agrandissez le contrôle Tab en maintenant la touche Ctrl enfoncée et en faisant glisser la poignée de dimensionnement du coin inférieur droit. Agrandissez l'objet TabControl suffisamment pour afficher trois onglets en haut.

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

    Vous pouvez également redimensionner le contrôle TabControl en définissant les propriétés Height et Width dans la catégorie Disposition du panneau Propriétés.

  4. Pour nommer l’un des objets TabItem, sélectionnez-le dans le panneau Objets et chronologie, puis tapez un nom pour la propriété Header dans la catégorie Propriétés communes du panneau Propriétés. Par exemple, nommez le premier objet TabItemInformations personnelles.

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

    Vous pouvez également utiliser un autre contrôle, par exemple un contrôle Image, comme en-tête de votre objet TabItem. Dans le panneau Objets et chronologie, développez l’objet TabItem, cliquez sur l’objet Header pour en faire l’élément activé. Vous pouvez ajouter un contrôle Image depuis le panneau Outils ou depuis le panneau Projets.

  5. Pour ajouter du contenu à l’un des objets TabItem, activez-le en cliquant dessus dans le panneau Objets et chronologie.

  6. Dans le panneau Outils, double-cliquez sur StackPanel Cc295310.ec58af86-cc2a-4e1f-91c0-883c5406fdfb(FR-FR,Expression.30).png pour ajouter un objet StackPanel à votre objet TabItem .

  7. Dans le panneau Objets et chronologie, cliquez sur l’objet StackPanel pour en faire l’objet activé. Vous pouvez maintenant ajouter autant d’objets que vous souhaitez à l’objet TabItem. Par exemple, vous pouvez ajouter un contrôle TextBlock ou ListBox à partir du panneau Outils.

    Objets enfants ajoutés à un objet TabControl

    Cc295310.f20233a8-3a71-46a5-863b-57a0f5b54f0b(FR-FR,Expression.30).png

  8. Si vous souhaitez ajouter une bordure et un en-tête pour tout l’objet TabControl, vous pouvez utiliser un autre contrôle de contenu avec en-tête, le contrôle GroupBox. L’objet LayoutRoot étant activé dans le panneau Objets et chronologie, sélectionnez le contrôle GroupBox dans le panneau Composants, puis utilisez la souris pour dessiner le contrôle sur la planche graphique, légèrement plus grand que l’objet TabControl.

  9. Pour faire de l’objet TabControl un objet enfant du contrôle GroupBox, faites glisser l’objet TabControl vers l'objet GroupBox dans le panneau Objets et chronologie.

    Faire glisser l’objet TabControl sur l'objet GroupBox

    Cc295310.bbfefd21-01bb-4725-bfb0-30e55de6c4df(FR-FR,Expression.30).png

  10. Changez le titre de l'objet GroupBox en le sélectionnant dans le panneau Objets et chronologie, puis en changeant la propriété Header dans la catégorie Propriétés communes du panneau Propriétés.

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

    Pour obtenir un exemple complet comprenant du code qui réagit aux éléments sélectionnés dans l'objet ListBox, voir GroupBox sur MSDN. L’exemple de code est inclus dans le package « WPFSamples.exe » disponible à la page Kit de développement (SDK) Windows .NET Framework 3.0 - Exemples (Windows SDK .NET Framework 3.0 Samples) (site en anglais).