Pour afficher l’article en anglais, activez la case d’option Anglais. Vous pouvez aussi afficher la version anglaise dans une fenêtre contextuelle en faisant glisser le pointeur de la souris sur le texte.
Traduction
Anglais

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 Button), 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 Blend for Visual Studio, cliquez sur Composants JJ170353.0d8b8d29-1af9-418f-8741-be3097d76eab(fr-fr,VS.120).png. Dans la catégorie Contrôles du panneau Composants, sélectionnez Button JJ170353.05df1779-a68f-436b-b834-a91b7995a3ec(fr-fr,VS.120).png 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 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 situées 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 panneau Outils du contrôle Button. Le contenu par défaut d’un Button est la chaîne « Bouton ».



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

    JJ170353.38211dc1-69d4-46bd-acd2-d7f9b48102bb(fr-fr,VS.120).png
    Conseil 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 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 JJ170353.ec58af86-cc2a-4e1f-91c0-883c5406fdfb(fr-fr,VS.120).png. 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.

    L’objet 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

    JJ170353.B4_controls_stackpanel_in_button(fr-fr,VS.120).png
  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 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. L’objet [StackPanel] étant toujours sélectionné dans le panneau Objets et chronologie, affectez à 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 Conseil

    Contrairement à la plupart des éléments d’interface utilisateur, certains panneaux de disposition (par exemple, StackPanel et Grid) 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, consultez Organiser les objets en conteneurs de disposition dans Blend.

  9. Dans le panneau Outils, sélectionnez l’outil Ellipse JJ170353.d7a04618-e35a-44f9-b78c-1f22e38016c1(fr-fr,VS.120).png, puis dessinez un cercle à l’intérieur de l’objet StackPanel sur la planche graphique. Sélectionnez ensuite le contrôle TextBox JJ170353.343296b4-5c7d-4145-84cc-91b08ba67a1b(fr-fr,VS.120).png 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

    JJ170353.B4_controls_stackpanel_children(fr-fr,VS.120).png
  10. Construisez votre projet (F5) pour voir l’application résultante.

Afficher: