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

Vous pouvez facilement personnaliser l’aspect d’une barre de défilement dans Blend for Visual Studio, à 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 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 Copier, couper, coller ou supprimer un objet dans Blend.

   Conseil

   Pour quitter le mode de modification de modèle et revenir à l’étendue de votre document, cliquez sur le bouton Rétablir l’étendue à , 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 actif.

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

4. Dans le panneau Objets et chronologie, cliquez sur l’objet de tracé IncreaseArrow puis définissez les propriétés Stroke et Fill sur un Pinceau de couleur unie blanc. Pour la propriété Stroke, vous devez d’abord supprimer la liaison en cliquant sur Options avancées puis sur Rétablir.

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 le modèle actuel à l’étape 2, cliquez sur Modifier le modèle 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 style 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 le modèle actuel pour revenir au modèle ScrollBar que vous avez modifié auparavant.

   • Si vous modifiez votre document principal, cliquez sur Rétablir l’étendue à .

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, modifiez la propriété CornerRadius sous Apparence dans le panneau Propriétés sur 4,4,4,4. Cela permet d’arrondir 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 changez la propriété Fill en un Pinceau de couleur unie gris foncé, 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 (prise en charge de WPF dans Blend)