Essayez ! Personnaliser l’aspect d’un contrôle SimpleScrollBar

Vous pouvez facilement personnaliser l’aspect d’une barre de défilement dans Microsoft Expression Blend, à l’aide du modèle de contrôle SimpleScrollBar.

Pour personnaliser l’aspect d’un contrôle SimpleScrollBar

1. Dessinez un contrôle SimpleScrollBar 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. Cliquez avec le bouton droit sur la barre de défilement 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.

3. Sous Objets et chronologie, sélectionnez l’élément IncreaseRepeat et définissez à 0 % l’attribut Alpha (identifié par un A sur la droite de la palette de couleurs) des propriétés Background et BorderBrush sous Pinceaux dans le panneau Propriétés.

4. Sous Objets et chronologie, sélectionnez l’élément de tracé IncreaseArrow, et pour les propriétés Stroke (trait) et Fill (remplissage), choisissez un Pinceau de couleur unie blanche . Pour la propriété Stroke (trait), vous devez d’abord retirer la liaison en cliquant sur le bouton Options de propriétés avancées, puis en cliquant sur Réinitialiser.

5. Cliquez avec le bouton droit sur l’élément IncreaseRepeat 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 dans l’étape 2, cliquez sur Modifier le modèle maintenant pour modifier le modèle de contrôle SimpleRepeatButton qui est stocké dans SimpleStyles.xaml.

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

6. Dans l’étendue d’édition du contrôle SimpleRepeatButton, supprimez les déclencheurs d’événements nommés IsMouseOver = True et IsPressed = True sous Déclencheurs dans le panneau Interaction en sélectionnant chaque déclencheur, puis en cliquant sur le bouton Supprimer le déclencheur.

7. Revenez à l’étendue d’édition du modèle SimpleScrollBar en effectuant l’une des actions suivantes :

   • Si vous modifiez le document Simple Styles.xaml parce que vous avez choisi Modifier le modèle à l’étape 5, cliquez sur l’onglet de votre document principal (par exemple, l’onglet Window1.xaml) en haut de la planche graphique. Cliquez avec le bouton droit sur l’élément ScrollBar, pointez sur Modifier des parties du contrôle (Modèle), puis cliquez sur Modifier le modèle pour revenir au modèle ScrollBar que vous modifiez auparavant.

   • Si vous modifiez votre document principal, cliquez sur le bouton Étendue supérieure.

8. Recommencez l’étape précédente pour l’élément DecreaseRepeat.

9. Activez l’élément GridRoot en double-cliquant dessus sous Objets et chronologie, puis cliquez sur le contrôle Border dans la boîte à outils, puis dessinez un élément Border dans l’objet GridRoot. Dimensionnez automatiquement le nouvel élément Border en cliquant avec le bouton droit dessus sous Objets et chronologie, en pointant sur Taille automatique, puis en cliquant sur Remplir.

10. Le nouvel élément Border étant toujours sélectionné sous Objets et chronologie, attribuez à la propriété CornerRadius sous Apparence dans le panneau Propriétés la valeur 4,4,4,4. Cela arrondit les coins de la bordure.

11. Cliquez avec le bouton droit sur l’élément [Thumb] sous Objets et chronologie, pointez sur Modifier des parties du contrôle (Modèle), puis cliquez sur Modifier une copie. Dans l’étendue d’édition du modèle ScrollBarStyle, cliquez sur l’élément Rectangle, puis choisissez pour la propriété Fill (remplissage) un Pinceau de couleur unie gris sombre , et définissez ensuite les propriétés Margin gauche et droite à 2.

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

Voir aussi

Concepts

SimpleScrollBar