Créer un contrôle à partir d’objets existants

Vous pouvez utiliser la fonction Transformer en contrôle de Microsoft Expression Blend pour transformer tout objet sur la planche graphique en modèle de contrôle. L'outil Transformer en contrôle enveloppe les objets dans une ressource de style que vous pouvez réutiliser.

Conseil :

Un objet dans Expression Blend correspond à tout ce que vous placez sur la planche graphique, par exemple un panneau de disposition, une forme, un contrôle de texte, une image, un bouton, un modèle de contrôle, ou tout autre élément de conception d’interface utilisateur. Le placement d’un élément d’interface utilisateur sur la planche graphique créée une instance d’objet de l’élément dans votre application.

Pour créer un bouton à partir d’une ellipse

1. Si vous ne l’avez pas déjà fait, ouvrez ou créez un nouveau projet.

   Pour plus d’informations, voir Créer un projet.

2. Sur la planche graphique, dessinez un cercle à l’aide de Ellipse  dans le panneau Outils. Pour rendre l’ellipse plus visible, vous pouvez changer son aspect en modifiant ses propriétés sous Pinceaux dans le panneau Propriétés.

   Pour plus d’informations, voir Appliquer un pinceau au remplissage ou au trait d’un objet.

3. Cliquez avec le bouton droit sur l'ellipse, pointez sur Grouper, puis cliquez sur le nom d'un conteneur de disposition tel que Grille.

4. Après avoir sélectionné la grille dans le panneau Objets et chronologie, cliquez sur Transformer en contrôle dans le menu Outils pour convertir la grille en bouton.

   La boîte de dialogue Transformer en contrôle apparaît.

5. Sous Type de contrôle, cliquez sur le type de contrôle que vous souhaitez créer, par exemple le contrôle Button.

6. Sous Nom (Clé), activez la première case d’option (par défaut), puis entrez un nom à utiliser pour identifier le style de bouton. Vous pouvez également sélectionner l’option Appliquer à tous qui appliquerait le style à tous les boutons de la planche graphique ne faisant pas déjà référence à un style par nom.

7. Sous Définir dans, cliquez sur l’option qui reflète l’endroit où vous souhaitez définir le style de bouton. Cliquez sur Application pour rendre le style de bouton accessible par n’importe quel document dans votre application. Cliquez sur Ce document (Window: Window) pour rendre le style de bouton disponible uniquement dans le document actif. Cliquez sur Dictionnaire de ressources pour définir le style de bouton dans un dictionnaire de ressources dans votre application.

8. Cliquez sur OK pour quitter la boîte de dialogue Créer la ressource Style et pour créer le style de bouton.

   Notez que dans le panneau Objets et chronologie, l’objet ellipse est converti en un objet bouton dont le style correspond à votre nouveau style de bouton.

   En outre, le style de bouton est répertorié dans l’onglet Ressources dans le nœud où il est défini (par exemple, dans le nœud Window).

   Le nouveau style de bouton tel qu’il apparaît dans l’onglet Ressources d’Expression Blend

   

Pour modifier le style de votre bouton

1. Pour modifier le style de bouton que vous venez de créer, cliquez avec le bouton droit sur le nouvel objet bouton dans le panneau Objets et chronologie, pointez sur Modifier le modèle, puis cliquez sur Modifier l'élément actuel.

   La planche graphique passe à l’étendue d’édition du modèle de contrôle.

   Conseil :

   Il y a plusieurs manières d’entrer dans l’étendue d’édition d’un modèle de contrôle. Vous pouvez par exemple afficher le style de bouton dans l’onglet Ressources, puis cliquer sur Modifier la ressource en regard du nom de la ressource. Vous entrez ainsi dans l’étendue d’édition du style, à partir de laquelle vous pouvez accéder à l’étendue d’édition du modèle de contrôle. Pour ce faire, cliquez avec le bouton droit sur l’objet Style dans le panneau Objets et chronologie, pointez sur Modifie le modèle, puis cliquez sur Modifier l'élément actuel. Pour quitter l’étendue d’édition du modèle de contrôle, cliquez sur Étendue supérieure  dans le panneau Objets et chronologie. Si vous êtes entré dans l’étendue d’édition du modèle de contrôle depuis l’étendue d’édition du style, vous revenez au style. Cliquez sur le bouton Étendue supérieure de nouveau pour revenir au mode d’édition du document.

   Conseil :
   L’outil Transformer en contrôle enveloppe l’objet d’origine (l’ellipse) dans une ressource de style contenant un modèle de contrôle. Le style définit les propriétés qui sont définies sur l’objet auquel le style est appliqué (dans ce cas, un objet bouton). Le modèle de contrôle définit les états, la structure et l'aspect de l'objet.

2. Le modèle de contrôle comporte un panneau Grille qui contient l’objet d’origine (l’ellipse) et un élément ContentPresenter qui affiche le contenu de l’objet bouton. Le placement de votre objet à l’intérieur d’un panneau Grille vous permet d’ajouter et d’arranger rapidement d’autres éléments.

   Structure du modèle de contrôle du nouveau style de bouton

   

   Vous pouvez voir comment le style et le modèle de contrôle sont liés en examinant le code XAML (Extensible Application Markup Language) de la ressource. Par exemple, la structure du style de bouton pourrait se présenter comme suit :

     <Window.Resources>
       <Style x:Key="ButtonStyle1" ...>  
         <Setter Property="Template">
           <Setter.Value>
             <ControlTemplate TargetType="{x:Type Button}">  
               <Grid>
                 <Ellipse>
                   ...
                 </Ellipse>
                 <ContentPresenter .../>
               </Grid>
               <ControlTemplate.Triggers>
                 ...
               </ControlTemplate.Triggers>
             </ControlTemplate>  
           </Setter.Value>
         </Setter>
       </Style>  
     </Window.Resources>
   

3. Dans le panneau Déclencheurs, définissez les états désirés du bouton. Par exemple, cliquez sur IsMouseOver = True pour activer l’enregistrement du déclencheur pour l’état applicable lorsque l’utilisateur place la souris au-dessus du bouton. Sélectionnez l’ellipse dans le panneau Objets et chronologie, puis sous Apparence dans le panneau Propriétés, modifiez la propriété Fill de l’ellipse en changeant sa couleur. Notez qu’un nouveau changement de propriété pour ellipse.Fill est ajouté dans le panneau Déclencheurs sous Propriétés une fois actif, comme le montre l’image suivante.

   Remarque :
   Vous devrez éventuellement régler la taille du panneau Déclencheurs pour voir la section Propriétés une fois actif. Pour modifier la taille, cliquez sur les bordures et sur la bordure interne du panneau et faites-les glisser.

   Le panneau Déclencheurs après changement du remplissage de l’ellipse lorsque la souris se trouve au-dessus du bouton

   

4. Vous pouvez également ajouter une animation au bouton. Par exemple, dans le panneau Déclencheurs, cliquez sur IsPressed = True pour activer l’enregistrement du déclencheur pour l’état applicable lorsque l’utilisateur clique sur le bouton. L’ellipse étant toujours sélectionnée dans le panneau Objets et chronologie, maintenez enfoncées les touches Maj et Alt tout en faisant glisser le coin de l’ellipse. (Le raccourci clavier Maj+Alt maintient le point central de l’objet.)

   Vous pouvez également ajouter une animation compliquée en créant une nouvelle table de montage séquentiel et en déclenchant celle-ci à partir d’un déclencheur d’événement pour l’événement IsPressed.

   Pour plus d’informations, voir Écriture de code de gestion des événements.

5. Une fois que vous avez défini les états du bouton souhaités, cliquez sur Étendue supérieure  dans le panneau Objets et chronologie pour revenir à l’étendue d’édition du document.

6. Pour tester les états, cliquez sur Exécuter Projet dans le menu Projet (ou appuyez sur F5), et vous verrez alors si les états du bouton fonctionnent correctement. Par exemple, lorsque vous placez le pointeur au-dessus du bouton, la couleur du remplissage change.

Pour appliquer un style de bouton à un bouton

1. Vérifiez que vous êtes dans l’étendue d’édition souhaitée. Vous pouvez appliquer un style à un bouton dans n’importe quelle étendue, notamment dans l’étendue d’un modèle de contrôle.

2. Sur la planche graphique, dessinez un bouton à l’aide de Bouton  dans le panneau Outils.

3. Cliquez avec le bouton droit sur le nouvel objet bouton dans le panneau Objets et chronologie, pointez sur Modifier le modèle, pointez sur Appliquer la ressource, puis sélectionnez votre style de bouton dans la liste.

   Vous pouvez également utiliser les commandes Modifier le style et Modifier le modèle dans le menu Objet pour appliquer une ressource de style.

   Application du style de bouton à un objet bouton, au moyen d’un clic avec le bouton droit

   

Pour supprimer ou pour modifier le style d’un bouton

• Comme le style de bouton est une ressource, traitez-le comme toute autre ressource.

  Pour plus d'informations sur la suppression ou la modification de ressources de style, voir Rétablir la valeur par défaut d’une propriété et Création de ressources réutilisables.

Voir aussi

Tâches

Créer un contrôle utilisateur à partir d'objets existants

Concepts

Conseils de conception de styles pour les contrôles Silverlight courants

Conception de styles pour les parties d’un modèle de contrôle Silverlight