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 style SimpleScrollBar

1. Dessinez un objet SimpleScrollBar sur la planche graphique dans Expression Blend.

   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. Cliquez avec le bouton droit sur la barre de défilement dans le panneau Objets et chronologie, pointez sur Modifier le modèle, puis cliquez sur Modifier le modèle courant. 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 courant 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 Étendue supérieure, qui se trouve 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 voulez modifier le modèle, pointez sur Modifier le modèle, puis cliquez sur Modifier le modèle courant.

3. Dans le panneau Objets et chronologie, cliquez sur l'objet 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. Dans le panneau Objets et chronologie, sélectionnez l’objet 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 Options de propriétés avancées, puis en cliquant sur Réinitialiser.

5. Cliquez avec le bouton droit sur l’objet IncreaseRepeat 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 dans l’étape 2, cliquez sur Modifier l'élément actuel 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 style SimpleScrollBar.

6. Dans l’étendue d’édition du contrôle SimpleRepeatButton, supprimez les déclencheurs d’événements nommés IsMouseOver = True et IsPressed = True dans le panneau Déclencheurs en sélectionnant chaque déclencheur, puis en cliquant sur 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’objet ScrollBar, pointez sur Modifier le modèle, puis cliquez sur Modifier l'élément actuel pour revenir au modèle ScrollBar que vous modifiez auparavant.

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

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

9. Activez l'objet GridRoot en cliquant dessus dans le panneau Objets et chronologie. Cliquez sur le contrôle Border dans le panneau Outils, puis dessinez un objet Border dans l'objet GridRoot. Dimensionnez automatiquement le nouvel objet Border en cliquant avec le bouton droit dessus dans le panneau Objets et chronologie, en pointant sur Taille automatique, puis en cliquant sur Remplir.

10. Le nouvel objet Border étant toujours sélectionné dans le panneau 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’objet [Thumb] dans le panneau Objets et chronologie, pointez sur Modifier le modèle, puis cliquez sur Modifier une copie. Dans l’étendue d’édition du style SimpleThumbStyle, cliquez sur l’objet 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