Créer 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, contournant ainsi la restriction d’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 avec en-tête répertoriés sous « Types » dans la rubrique consacrée aux types de contrôles ContentControl sur MSDN.

Remarque :

Les contrôles de contenu ne sont pas disponibles dans les projets Microsoft Silverlight 1.0. Toutefois, vous pouvez superposer des objets dans un panneau de disposition Canevas, avec un objet TextBlock placé au-dessus, puis connecter un gestionnaire d’événements JavaScript afin que l’élément Canevas se comporte comme un bouton ou un autre contrôle de contenu. Pour obtenir un exemple, voir Créer un bouton qui contrôle une table de montage séquentiel dans une application Silverlight.

Pour créer un contrôle de contenu

1. Dans la boîte à outils du côté gauche d’Microsoft Expression Blend, cliquez sur le bouton Bibliothèque de composants . 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 Button  dans la liste.

   L’icône du contrôle Button apparaît, sélectionnée, au-dessus du bouton Bibliothèque de composants, 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 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 du contrôle Button dans la boîte à outils. Le contenu par défaut d’un bouton est la chaîne « Bouton ».

   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 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.

   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. Sous Objets et chronologie, double-cliquez sur l’objet Button 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.

   Conseil :
   Vous pouvez également activer un objet sur la planche graphique en sélectionnant d’abord l’outil Sélection dans la boîte à outils, puis en double-cliquant sur l’objet sur la planche graphique.

4. Dans la boîte à outils, sélectionnez le contrôle StackPanel , à partir de la Bibliothèque de composants ou de l’une des listes déroulantes de contrôles courants. Double-cliquez sur l’icône du contrôle StackPanel pour l’ajouter en tant qu’élément enfant dans le bouton.

   Le contrôle StackPanel remplace la chaîne de contenu de l’objet Button. Pour le vérifier, sélectionnez [Button] sous 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’élément 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] sous Objets et chronologie, puis changez Largeur à 150 pixels (ou en unités indépendantes des périphériques, qui sont approximativement de 1/96 de pouce) et Hauteur à 75 pixels dans la catégorie Disposition du panneau Propriétés. Notez que le bouton se redimensionne automatiquement lors du redimensionnement de son élément enfant (StackPanel).

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

6. [StackPanel] étant toujours sélectionné sous Objets et chronologie, définissez la propriété Orientation dans la catégorie Disposition du panneau Propriétés sur Horizontal, afin que les éléments enfants dans l’objet StackPanel s’empilent horizontalement. Ce changement de propriété n’a pas d’incidence sur l’objet StackPanel, car il est affiché sur la planche graphique tant que des éléments n’auront pas été ajoutés à l’objet StackPanel.

7. Sous Objetset chronologie, double-cliquez sur l’objet [StackPanel] pour l’activer afin que vous puissiez ajouter des éléments enfants.

   Conseil :
   Contrairement à la plupart des éléments d’interface utilisateur certains panneaux de disposition (par exemple le panneau d’empilement et la grille) peuvent contenir plusieurs éléments enfants. L’organisation et la disposition de la conception de votre application s’en trouvent facilitées. Pour plus d’informations, voir Vue d’ensemble de la disposition.

8. Dans la boîte à 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 la boîte à outils et faites-le glisser à l’intérieur de l’objet StackPanel. Les éléments 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 éléments dans la catégorie Disposition du panneau Propriétés.

   Objets enfants ajoutés à un objet StackPanel

   

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