Créer un bouton à partir d’un objet

Vous pouvez utiliser la fonction Créer un bouton de Microsoft Expression Blend pour créer un bouton à partir de n’importe quel objet sur la planche graphique, tel qu’une image ou une forme. L’outil Créer un bouton enveloppe l’objet dans une ressource de style applicable à tout autre objet bouton.

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 document ou un projet.

2. Sur la planche graphique, dessinez un cercle à l’aide de l’outil Ellipse  de la Boîte à 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. L’ellipse étant sélectionnée sous Objets et chronologie dans le panneau Interaction, cliquez sur Créer un bouton dans le menu Outils pour convertir l’ellipse en un bouton. La boîte de dialogue Créer la ressource Style s’ouvre.

4. Sous Nom de la ressource (Clé), sélectionnez 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.

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

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

   

Haut de la page

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 sous Objets et chronologie, pointez sur Modifier des parties du contrôle (Modèle), puis cliquez sur Modifier le modèle.

   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 sous Objets et chronologie, pointez sur Modifier des parties du contrôle (Modèle), puis cliquez sur Modifier le modèle. Pour quitter l’étendue d’édition du modèle de contrôle, cliquez sur le bouton Étendue supérieure  sous 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 Créer un bouton applique à l’objet d’origine (l’ellipse) 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. Sous Déclencheurs dans le panneau Interaction, 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 sous Objets et chronologie, puis sous Apparence dans le panneau Propriétés, choisissez une autre couleur pour la propriété Fill (remplissage) de l’ellipse. Notez qu’un nouveau changement de propriété pour ellipse.Fill est ajouté sous 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 sous Objets et chronologie, maintenez enfoncées les touches Maj et Alt tout en faisant glisser le coin de l’ellipse. La combinaison des touches 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 Déclencheurs et interactivité avec l’utilisateur.

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

6. Pour tester les états, cliquez sur Tester 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.

Haut de la page

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 du contrôle Button  de la Boîte à outils.

3. Cliquez avec le bouton droit sur le nouvel objet bouton sous Objets et chronologie, pointez sur Modifier des parties du contrô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 des parties du contrô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

   

Haut de la page

Pour supprimer ou pour modifier le style d’un bouton

• Comme le style de bouton est une ressource, vous pouvez le traiter comme toute autre ressource. Pour plus d’informations sur la suppression ou la modification des ressources de style, voir les rubriques Procédure de Ressources.

Haut de la page

Voir aussi

Concepts

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