Pour afficher l’article en anglais, activez la case d’option Anglais. Vous pouvez aussi afficher la version anglaise dans une fenêtre contextuelle en faisant glisser le pointeur de la souris sur le texte.
Traduction
Anglais

Essayez ! Personnaliser l'aspect du bouton de développement dans un contrôle SimpleComboBox (prise en charge de WPF dans Blend)

Cette page s’applique uniquement aux projets WPF

Vous pouvez facilement personnaliser l’aspect du bouton de développement dans une zone de liste déroulante dans Blend for Visual Studio, à 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 Blend.

    Conseil Conseil

    Les contrôles de style simple sont disponibles 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 dans Blend.

    Conseil Conseil

    Pour quitter le mode d’édition de modèle et revenir à la portée de votre document, cliquez sur le bouton Rétablir la portée àJJ170167.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(fr-fr,VS.120).png, qui se trouve au-dessus de l’arborescence d’objets dans le panneau Objets et chronologie.

    Pour revenir au mode de modification de modèle pour un modèle existant, dans le panneau Objets et chronologie, cliquez avec le bouton droit sur l’objet dont vous voulez modifier le modèle, 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’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.

    Il est possible de modifier l'objet Arrow en utilisant l'outil Sélection directeJJ170167.6dd6571f-c116-451d-8dd2-1f88b8406362(fr-fr,VS.120).png pour ajuster des points sur le tracé. Supprimez également l’objet Arrow puis créez un nouvel objet à l’aide de l’outil PlumeJJ170167.894f8612-e0ed-4e00-84cf-a9bc8f38fc54(fr-fr,VS.120).png dans le panneau Outils.

    Conseil Conseil

    Pour effectuer un zoom sur la planche graphique, utilisez la zone de texte ZoomJJ170167.12524287-c48b-4cfc-b614-01951207239d(fr-fr,VS.120).png en bas de la planche graphique, ou utilisez le bouton de défilement sur votre souris tout en maintenant enfoncée la touche Ctrl.

    Conseil 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 Conseil

    Lorsqu’un déclencheur de propriété est sélectionné dans le panneau Déclencheurs, toute modification apportée dans 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, cliquez sur Par défaut dans le panneau Déclencheurs.

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

Afficher: