Essayez ! Personnaliser l’aspect du bouton de développement dans un contrôle SimpleComboBox

Vous pouvez facilement personnaliser l’aspect du bouton de développement dans une zone de liste déroulante dans Microsoft Expression Blend, à l’aide du modèle de contrôle ToggleButton du contrôle SimpleComboBox .

Pour personnaliser le bouton de développement dans un contrôle SimpleComboBox

1. Dessinez un contrôle SimpleComboBox sur la planche graphique dans Expression Blend.

   Conseil :
   Les contrôles de style simple se trouvent sous Styles simples dans la catégorie Styles du panneau Composants. Une fois que vous avez sélectionné un contrôle de style simple dans la liste, vous pouvez le dessiner sur la planche graphique.

2. Ajoutez un élément à la zone de liste déroulante en cliquant avec le bouton droit sur la zone de liste déroulante dans le panneau Objets et chronologie et en cliquant ensuite sur Ajouter SimpleComboBoxItem.

3. Ajoutez un ou deux éléments supplémentaires à la zone de liste déroulante en recommençant l’étape précédente.

4. Cliquez avec le bouton droit sur ComboBox dans le panneau Objets et chronologie, pointez sur Modifier le modèle, puis cliquez sur Modifier le modèle actuel. Si vous ne souhaitez pas changer le dictionnaire de ressources SimpleStyles.xaml, vous pouvez cliquer sur Modifier une copie et non sur Modifier l'élément actuel pour créer un modèle et l'enregistrer dans le document. Pour plus d’informations sur la création d’une copie, voir Créer une ressource.

   Conseil :

   Pour quitter le mode d’édition de modèle et revenir à l’étendue de votre document : cliquez sur Rétablir l’étendue à, situé au-dessus de l’arborescence d’objets dans le panneau Objets et chronologie. Pour revenir au mode d’édition de modèle pour un modèle existant : dans le panneau Objets et chronologie, cliquez avec le bouton droit sur l’objet dont vous souhaitez modifier le modèle, pointez sur Modifier le modèle, puis cliquez sur Modifier le modèle actuel.

5. Dans l’étendue d’édition du modèle de contrôle, développez tous les nœuds dans le panneau Objets et chronologie.

6. Cliquez avec le bouton droit sur l’objet ToggleButton dans le panneau Objets et chronologie, pointez sur Modifier le modèle, puis effectuez l’une des opérations suivantes :

   • Si vous avez sélectionné Modifier l’élément actuel à l’étape 4, cliquez sur Modifier le modèle actuel maintenant pour modifier le modèle de contrôle ExpanderToggleButton qui est stocké dans SimpleStyles.xaml.

   • Si vous avez sélectionné Modifier une copie à l’étape 4, cliquez sur Modifier une copie maintenant pour créer une copie du modèle de contrôle ExpanderToggleButton et stockez-la au même emplacement que le modèle du contrôle ComboBox .

   L’aspect du bouton de développement est conçu dans le modèle de contrôle ExpanderToggleButton . Notez que le contrôle Grid dans le modèle occupe toute la largeur de la zone de liste déroulante. Cette conception permet l’affichage de la liste déroulante quel que soit l’endroit où l’utilisateur clique dans la zone de liste déroulante.

7. Sélectionnez l’objet Arrow dans le panneau Objets et chronologie pour l’identifier sur la planche graphique. L’objet Arrow est un Path qui représente le bouton de développement pour le contrôle ComboBox .

   Vous pouvez modifier l’objet Arrow à l’aide de l’outil Sélection directe pour ajuster des points sur le tracé. Vous pouvez également supprimer l’objet Arrow puis créer un nouvel objet à l’aide de l’outil Plume dans le panneau Outils.

   Conseil :
   Pour effectuer un zoom sur la planche graphique, vous pouvez utiliser la zone de texte Zoom  en bas de la planche graphique, ou vous pouvez utiliser le bouton de défilement sur votre souris tout en maintenant enfoncée la touche Ctrl.

   Conseil :
   Au lieu de dessiner un objet de tracé avec l’outil Plume, vous pouvez utiliser une ressource artistique que vous importez de Microsoft Expression Design, ou un fichier image que vous ajoutez à votre projet.

8. L’effet de substitution produit lors d’un clic sur le bouton de développement est défini par des déclencheurs de propriété qui changent l’aspect des objets Rectangle du modèle de contrôle ToggleButton . Vous pouvez ajouter un changement de propriété aux déclencheurs existants qui fera pivoter votre objet Arrow lors d’un clic sur le bouton de développement. Après avoir sélectionné votre objet Arrow dans le panneau Objets et chronologie, cliquez sur IsChecked = True dans le panneau Déclencheurs, puis sur l’onglet Pivoter sous Transformer dans le panneau Propriétés, et tapez 180 dans la zone de texte Angle.

   Lorsqu’un utilisateur clique sur le bouton de développement pour développer la zone de liste déroulante, l’objet Arrow pivote de 180 degrés, puis revient à sa position d’origine lors d’un autre clic.

   Conseil :

   Lorsqu'un déclencheur de propriété est sélectionné dans le panneau Déclencheurs, toute modification apportée dans Expression Blend provoque le changement d’une valeur sur cette condition de déclencheur. Vérifiez que le déclencheur approprié est sélectionné avant d’apporter vos modifications. Si vous souhaitez apporter des modifications qui affectent l’état par défaut du modèle de contrôle, sélectionnez Par défaut dans le panneau Déclencheurs.

9. Testez votre application (F5) pour voir les effets.

Voir aussi

Concepts

SimpleComboBox et SimpleComboBoxItem

Copyright © 2011 Microsoft Corporation. Tous droits réservés.