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 l'élément 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 Étendue supérieure, situé au-dessus de l’arborescence d’éléments 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 le modèle à modifier, pointez sur Modifier le modèle, puis cliquez sur Modifier l'élément 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’élément 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 l'élément actuel 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 dans le panneau 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 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 élément de tracé avec l’outil Plume, vous pouvez utiliser une ressource artistique importée de Microsoft Expression Design 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. Après avoir sélectionné votre élément Arrow dans le panneau Objets et chronologie, cliquez sur IsChecked = True dans le panneau Déclencheurs puis sur l'onglet Faire 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’é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é 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