Tracer un contrôle de contenu

Les contrôles de contenu ont une propriété de contenu unique qui définit ce que le contrôle affichera. La propriété de contenu peut être aussi simple qu’une chaîne de texte ou aussi complexe qu’un objet Microsoft .NET Framework. Si vous ajoutez un contrôle de panneau de disposition à un contrôle de contenu, le contrôle de panneau devient le contenu auquel vous pouvez ajouter plusieurs éléments enfants, ce qui permet de contourner la limitation à un élément de contenu unique.

La procédure suivante montre comment créer un contrôle de contenu (un bouton), et comment définir sa propriété de contenu sur un panneau de disposition (StackPanel). Vous pouvez également utiliser cette procédure avec d'autres contrôles de contenu répertoriés sous l'en-tête « Types » dans la rubrique ContentControl Types (types de contrôles de contenu) sur MSDN.

Pour créer un contrôle de contenu

1. Dans le panneau Outils sur le côté gauche de la fenêtre d'application Microsoft Expression Blend, cliquez sur Composants . Dans la catégorie Contrôles du panneau Composants, sélectionnez Button  dans la liste.

   L'icône du contrôle Button s'affiche sous le bouton Composants dans le panneau Outils ; elle est sélectionnée pour vous permettre d'ajouter un contrôle Button à la planche graphique.

   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 sous le bouton Composants afin que vous puissiez les ajouter rapidement.

2. Pour ajouter un bouton à la planche graphique, double-cliquez sur l'icône du contrôle Button dans le panneau Outils. Le contenu par défaut d'un bouton est la chaîne « Button ».

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

   

   Conseil :
   Vous pouvez également ajouter un contrôle à la planche graphique en le sélectionnant dans le panneau Outils, puis en cliquant sur la planche graphique et en faisant glisser le curseur pour spécifier le rectangle englobant du contrôle.

   Conseil :
   Lorsqu’un élément de conception d’interface utilisateur, tel qu’un contrôle Button, a été ajouté à la planche graphique, il devient un objet dans votre application.

3. Dans le panneau Composants, sous Panneaux dans la catégorie Contrôles, sélectionnez StackPanel. Double-cliquez sur l'icône du contrôle StackPanel pour l'ajouter à la planche graphique.

4. Dans le Panneau Objets et chronologie, faites glisser l'objet StackPanel sur l'objet Button.

   Le contrôle StackPanel remplace la chaîne de contenu de l’objet Button. Pour le vérifier, sélectionnez [Button] dans le panneau Objets et chronologie, puis affichez la propriété Content dans la catégorie Propriétéscommunes du panneau Propriétés.

   Objet StackPanel ajouté en tant qu'objet enfant dans un bouton sur la planche graphique

   

5. L’objet StackPanel a par défaut une hauteur et une largeur de 100 pixels, et une hauteur et une largeur minimales de 0 pixel. Pour simplifier l'utilisation de l'objet StackPanel, sélectionnez [StackPanel] dans le panneau Objets et chronologie, puis changez Width (largeur) à 150 pixels (ou en unités indépendantes des périphériques, qui sont approximativement de 1/96 de pouce) et Height (hauteur) à 75 pixels dans la catégorie Disposition du panneau Propriétés.

   Conseil :
   Vous pouvez également redimensionner un objet sur la planche graphique en faisant glisser les ornements aux coins du rectangle englobant.

6. Pour que l'objet Button se redimensionne automatiquement lorsque vous redimensionnez son objet enfant (l'objet StackPanel), sélectionnez l'objet Button, puis, dans la catégorie Disposition du panneau Propriétés, affectez aux propriétés Width (largeur) et Height (hauteur) la valeur Auto.

7. [StackPanel] étant toujours sélectionné dans le panneau Objets et chronologie, donnez à la propriété Orientation dans la catégorie Disposition du panneau Propriétés la valeur Horizontal, afin que les objets enfants de l'objet StackPanel s'empilent horizontalement.

8. Dans le panneau Objets et chronologie, cliquez sur l'objet [StackPanel] pour l'activer afin de pouvoir ajouter des objets enfants.

   Conseil :
   Contrairement à la plupart des éléments d'interface utilisateur certains panneaux de disposition (comme StackPanel et Grille) peuvent contenir plusieurs objets enfants. L’organisation et la disposition de la conception de votre application s’en trouvent facilitées. Pour plus d'informations, voir Organisation des objets.

9. Dans le panneau Outils, sélectionnez l'outil Ellipse, puis dessinez un cercle à l'intérieur de l'objet StackPanel sur la planche graphique. Sélectionnez ensuite le contrôle TextBox dans le panneau Outils et faites-le glisser à l'intérieur de l'objet StackPanel. Les objets enfants sont empilés côte à côte de gauche à droite en raison de l'orientation horizontale de l'objet StackPanel conteneur. Si vous souhaitez ajouter de l'espace entre les éléments enfants, vous pouvez ajuster les propriétés Margin des objets dans la catégorie Disposition du panneau Propriétés.

   Objets enfants ajoutés à un objet StackPanel

   

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