Créer un contrôle avec en-tête
.png "Cette page s’applique à WPF et Silverlight 2")
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 un contrôle de contenu avec en-tête, et les contrôles 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 la rubrique consacrée aux types de contrôles HeaderedContentControl sur MSDN. Les contrôles d’éléments avec en-tête sont répertoriés dans la rubrique consacrée aux types de contrôles HeaderedItemsControl sur MSDN.
.gif "Remarque") Remarque : |
|---|
Les contrôles avec en-tête ne sont pas disponibles dans les projets Microsoft Silverlight 1.0. Toutefois, vous pouvez superposer des panneaux de disposition Canevas contenant des objets TextBlock, puis connecter un gestionnaire d’événements JavaScript afin que les éléments apparaissent ou disparaissent en fonction de l’onglet sur lequel l’utilisateur clique. Pour plus d’informations sur JavaScript, voir les détails relatifs aux événements de souris et scripts Silverlight. |
| Remarque : |
|---|
Microsoft Expression Blend 2 avec Service Pack 1 n’est pas fourni avec les versions Silverlight 2 des contrôles avec en-tête. Toutefois, le Kit de développement logiciel (SDK) Silverlight 2 (inclus dans les outils Microsoft Silverlight pour Visual Studio, éventuellement en anglais) est fourni avec des assemblys contenant des contrôles avec en-tête, tels que le TabControl. Pour plus d’informations sur l’intégration d’assemblys dans votre projet, voir Importer un contrôle personnalisé en ajoutant une référence. |
Pour créer un contrôle de contenu avec en-tête
Dans la boîte à outils du côté gauche d’Microsoft Expression Blend, cliquez sur le bouton Bibliothèque de composants
.png "Cc295310.0224cabd-5da1-4e01-bddd-4a647401a098(fr-fr,Expression.10).png")
. Dans l’onglet Contrôles, cliquez sur Contrôles système (si cette option n’est pas déjà sélectionnée), puis sélectionnez le contrôle TabControl .png "Cc295310.f13847cd-7fdf-4757-a648-d5ece98fcaea(fr-fr,Expression.10).png")
dans la liste.L’icône du contrôle TabControl apparaît au-dessus du bouton Bibliothèque de composants, et est sélectionnée, prête pour l’ajout d’un contrôle TabControl à la planche graphique.
.gif "Conseil")
Conseil :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.
Pour ajouter un bouton à la planche graphique, double-cliquez sur l’icône Boîte à outils pour le 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
.png "Cc295310.b5763b4e-3032-468e-bbdf-42057fd0cb08(fr-fr,Expression.10).png")
Conseil :Vous pouvez ajouter d’autres objets TabItem au contrôle TabControl si vous le souhaitez. Sous Objets et chronologie, double-cliquez sur l’objet TabControl pour en faire l’élément activé. Dans la boîte à outils, sélectionnez le contrôle TabItem dans la Bibliothèque de composants (activez la case à cocher Afficher tout). Double-cliquez sur l’icône du contrôle TabItem pour l’ajouter comme un élément enfant dans le contrôle TabControl.
Sur la planche graphique, agrandissez le contrôle de tabulation en faisant glisser la poignée de dimensionnement du coin inférieur droit. Le pointeur devient une flèche à double tête
.png "Cc295310.7d350cd4-6d4f-40bc-9d04-d46d2d54ebee(fr-fr,Expression.10).png")
pour indiquer l’opération de redimensionnement. Agrandissez le contrôle TabControl suffisamment pour afficher trois tabulations en haut.Conseil :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.
Pour nommer l’un des objets TabItem, sélectionnez-le sous 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.
Conseil :Vous pouvez également utiliser un autre contrôle, par exemple un contrôle Image, comme en-tête de votre objet TabItem. Sous Objets et chronologie, développez l’objet TabItem, double-cliquez sur l’objet Header pour en faire l’élément activé. Vous pouvez ajouter un contrôle Image à partir de la boîte à outils ou du panneau Fichiers.
Pour ajouter du contenu à l’un des objets TabItem, activez-le en double-cliquant dessus sous Objets et chronologie.
Dans la boîte à outils, double-cliquez sur StackPanel
.png "Cc295310.ec58af86-cc2a-4e1f-91c0-883c5406fdfb(fr-fr,Expression.10).png")
pour ajouter un contrôle StackPanel à votre objet TabItem. La propriété de contenu de l’objet TabItem change de l’objet Grid par défaut à un objet StackPanel.Conseil :Une propriété de contenu ne peut contenir qu’un élément. Il convient d’utiliser un contrôle de panneau tel que le contrôle StackPanel ou Grid comme cet élément, puis d’ajouter plusieurs éléments au contrôle de panneau.
Sous Objets et chronologie, double-cliquez sur l’objet StackPanelStackPanel pour en faire l’élément activé. Vous pouvez maintenant ajouter autant d’éléments que vous souhaitez à l’objet TabItem. Par exemple, vous pouvez ajouter un contrôle TextBlock ou ListBox à partir de la boîte à outils.
Objets enfants ajoutés à un objet TabControl
.png "Cc295310.f20233a8-3a71-46a5-863b-57a0f5b54f0b(fr-fr,Expression.10).png")
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é sous Objets et chronologie, sélectionnez le contrôle GroupBox dans la Bibliothèque de composants, puis utilisez la souris pour dessiner le contrôle sur la planche graphique, légèrement plus grand que l’objet TabControl.
Pour faire de l’objet TabControl un élément enfant du contrôle GroupBox, faites glisser l’objet TabControl vers le contrôle GroupBox sous Objets et chronologie.
Faire glisser l’objet TabControl sur le contrôle GroupBox
.png "Cc295310.bbfefd21-01bb-4725-bfb0-30e55de6c4df(fr-fr,Expression.10).png")
Changez le titre du contrôle GroupBox en le sélectionnant sous Objets et chronologie, puis changez la propriété Header dans la catégorie Propriétés communes du panneau Propriétés.
Construisez votre projet (F5) pour voir l’application résultante.
Remarque :Pour obtenir un exemple complet comprenant du code qui réagit aux éléments sélectionnés dans le contrôle ListBox, voir l’exemple 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).