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 styles simples sont disponibles dans la catégorie Styles simples de l’onglet Contrôles dans la Bibliothèque de 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 sous 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 sous Objets et chronologie, pointez sur Modifier des parties du contrôle (modèle), puis cliquez sur Modifier le modèle. Si vous ne souhaitez pas changer le dictionnaire de ressources SimpleStyles.xaml, vous pouvez cliquer sur Modifier une copie et non sur Modifier le modèle pour créer un nouveau 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 le bouton Étendue supérieure, qui se trouve au-dessus de l’arborescence d’éléments dans le panneau Interaction. Pour revenir au mode d’édition de modèle pour un modèle existant : sous Objets et chronologie, cliquez avec le bouton droit sur l’élément dont vous voulez modifier le modèle, pointez sur Modifier des parties du contrôle (Modèle), puis cliquez sur Modifier le modèle.

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

6. Cliquez avec le bouton droit sur l’élément ToggleButton sous Objets et chronologie, pointez sur Modifier des parties du contrôle (modèle), puis effectuez l’une des opérations suivantes :

   • Si vous avez sélectionné Modifier le modèle à l’étape 4, cliquez sur Modifier le modèle maintenant pour modifier le modèle de contrôle ExpanderToggeButton 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 ExpanderToggeButton 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 ExpanderToggeButton. Notez que la grille 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’élément Arrow sous Objets et chronologie pour l’identifier sur la planche graphique. L’élément Arrow est un tracé qui représente le bouton de développement du contrôle ComboBox.

   Vous pouvez modifier l’élément Arrow à l’aide de l’outil Sélection directe  pour ajuster des points sur le tracé. Sinon, vous pouvez supprimer l’élément Arrow et créer un nouvel élément à l’aide de l’outil Plume  dans la boîte à 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 élément de tracé avec l’outil Plume, vous pouvez utiliser une ressource artistique importée de Microsoft Expression Design 2 ou un fichier image ajouté à 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 éléments Rectangle du modèle de contrôle ToggleButton. Vous pouvez ajouter un changement de propriété aux déclencheurs existants qui fera pivoter votre élément Arrow lors d’un clic sur le bouton de développement. L’élément Arrow étant sélectionné sous Objets et chronologie, cliquez sur IsChecked = True sous Déclencheurs dans le panneau Interaction, puis cliquez sur l’onglet Faire pivoter sous Transformer dans le panneau Propriétés, puis entrez 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’élément 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é sous Déclencheurs dans le panneau Interaction, 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