Conseils de style pour le contrôle ScrollBar (barre de défilement)

Vous pouvez utiliser le modèle de contrôle ScrollBar intégré pour créer un modèle ScrollBar personnalisé. Par défaut, le modèle de contrôle ScrollBar se présente comme suit :

Parties du modèle ScrollBar

Le modèle ScrollBar comprend deux ensembles de parties : un défini pour une barre de défilement verticale et l’autre pour une barre de défilement horizontale. Les noms de parties sont précédés du mot « vertical » ou « horizontal », selon l’orientation de la barre de défilement.

Conseil :
Pour afficher les parties du modèle, ouvrez le panneau Parties lorsque vous modifiez le modèle.

Nom de la partie	Type d'objet
VerticalRoot   HorizontalRoot	FrameworkElement
VerticalSmallDecrease   HorizontalSmallDecrease	RepeatButton
VerticalLargeDecrease   HorizontalLargeDecrease	RepeatButton
VerticalThumb   HorizontalThumb	Thumb
VerticalLargeIncrease   HorizontalLargeIncrease	RepeatButton
VerticalSmallIncrease   HorizontalSmallIncrease	RepeatButton

Conseils sur ScrollBar

Partie Root

Cette partie est obligatoire. La partie Root contient tous les éléments qui composent le contrôle ScrollBar dans une orientation particulière.

Pour créer une partie Root , créez une grille nommée HorizontalRoot ou VerticalRoot qui contient cinq colonnes (pour l’orientation horizontale) ou lignes (pour l’orientation verticale) dimensionnées à une taille Automatique, Automatique, Automatique, Étoile, Automatique.

Partie Thumb

Cette partie est obligatoire. Le curseur est l’élément mobile dans la barre de défilement.

Pour changer l’objet ou les objets représentant le curseur en un contrôle Thumb ( HorizontalThumb ou VerticalThumb ), placez la partie Thumb dans la colonne/ligne du milieu de la partie Root , et définissez les propriétés Width et Height de la partie Thumb pour que la colonne (ou ligne) soit redimensionnée pour intégrer le curseur.

Ne définissez pas les propriétés Margin du curseur. Pour obtenir le même effet, définissez les marges de l’objet racine du modèle Thumb .

Track

L’espace dans lequel le curseur de déplace se nomme le track. Le track n’est pas une partie et est facultatif.

Pour inclure un track, placez le ou les objets représentant le track dans la partie Root , couvrant soit les cinq colonnes (ou lignes), soit les trois colonnes (ou lignes) du milieu.

Pour qu’un objet couvre plusieurs colonnes (ou lignes), sélectionnez l’objet, puis, dans le panneau Propriétés, définissez la propriété ColumnSpan ou RowSpan.

Déplacement du curseur le long du track par grands incréments

Pour que l’utilisateur puisse cliquer sur le track de chaque côté du curseur pour déplacer ce dernier par grands incréments, placez un contrôle RepeatButton dans les deux colonnes (ou lignes) de chaque côté de la partie Thumb et nommez-les VerticalLargeDecrease et VerticalLargeIncrease (ou HorizontalLargeDecrease et HorizontalLargeIncrease ). Afin que les RepeatButtons fonctionnent sans être visibles, attribuez-leur une Opacity égale à zéro. Vous pouvez également appliquer un modèle qui contient un seul objet avec une Opacity nulle aux contrôles RepeatButton .

Déplacement du curseur le long du track par petits incréments

Pour que l’utilisateur puisse cliquer sur un bouton à l’une ou l’autre extrémité du track pour déplacer le curseur par petits incréments, changez les objets représentant ces boutons en contrôles RepeatButton et nommez-les VerticalSmallDecrease et VerticalSmallIncrease (ou HorizontalSmallDecrease et HorizontalSmallIncrease ). Placez-les dans les deux colonnes (ou lignes) d’extrémité.

États du contrôle ScrollBar

Vous pouvez également utiliser des états avec le modèle de contrôle ScrollBar . Par défaut, le contrôle ScrollBar peut être dans l’un des trois états suivants du groupe d’états CommonStates  :

Nom de l'état	Description
Normal	Aspect du contrôle ScrollBar en l’absence d’interaction avec ce dernier.
MouseOver	Aspect du contrôle ScrollBar lorsque l’utilisateur place le pointeur dessus.
Disabled	Aspect du contrôle ScrollBar lorsque la propriété IsEnabled a la valeur False .

Conseil :
Pour afficher les états disponibles, ouvrez le panneau États lorsque vous modifiez un modèle ScrollBar .

Lorsque vous sélectionnez un état, l'enregistrement de l'état est activé et toutes les modifications que vous effectuez sont enregistrées pour cet état. Pour désactiver l’enregistrement de l’état, cliquez sur l’option Indicateur du mode d’enregistrement , ou sélectionnez Base dans le panneau États.

Pour plus d’informations, voir Définition d'états visuels différents pour un contrôle.

Liaison de modèle

Vous pouvez lier par modèle les propriétés Background , BorderBrush , Foreground , BorderThickness , ou Padding . Pour plus d’informations, voir Véhiculer des propriétés d'objet vers le modèle.

Pour convertir des objets en contrôle ScrollBar

L’image suivante est une conception complète (comp) d’une barre de défilement qui comprend les états MouseOver et Pressed des parties VerticalThumb , VerticalSmallDecrease et VerticalSmallIncrease .

Normal

MouseOver

Pressed

Disabled

Cet exemple utilise le code XAML dans l’étape 1 de la procédure suivante, qui correspond aux graphiques précédents pour créer une barre de défilement personnalisée à l’aide du modèle de contrôle ScrollBar .

Conseil :
Cliquez sur Mode mixte pour afficher les modifications en modes Création et Code lorsque vous suivez cette procédure.

1. Ouvrez un nouveau projet Microsoft Silverlight. En mode Code, recherchez le code suivant, puis supprimez la barre oblique de fermeture (/).

   <Grid x:Name="LayoutRoot" Background="White"/>
   

2. Copiez et collez ensuite le code suivant dans votre nouveau projet, après le code que vous avez localisé à l’étape 1.

   <Grid x:Name="verticalscrollbar" Width="17" Height="146" >
      <Rectangle x:Name="track" Fill="#FF3D3D3D" StrokeThickness="0" />
      <Path x:Name="smalldecrease" Fill="Gray" Stretch="Fill" Width="7" Height="7" 
         Data="M200,312 L204,312 L200,305 z" Margin="0,5,0,0" VerticalAlignment="Top"/>
      <Rectangle x:Name="thumb" Fill="Gray" RadiusX="3" RadiusY="3" Height="61" Width="7" 
         Margin="0,24,0,0" VerticalAlignment="Top"/>
      <Path x:Name="smallincrease" Fill="Gray" Stretch="Fill" Width="7" Height="7" 
         Data="M200,305 L200,312 L204,305 z" Margin="0,0,0,5" 
         VerticalAlignment="Bottom" />
   </Grid>
   

3. Ajoutez une balise de fermeture Grid (</Grid>) après le code que vous venez de coller.

4. Dans le panneau Objets et chronologie, cliquez avec le bouton droit sur verticalscrollbar , puis cliquez sur Créer un contrôle. Dans la boîte de dialogue Créer un contrôle, cliquez sur ScrollBar, puis sur OK.

   En mode Code, notez que le code que vous avez collé à l’étape précédente a été remplacé par celui pour un nouveau contrôle ScrollBar (recherchez le code commençant par <Grid x:Name="verticalscrollbar">). En outre, Microsoft Expression Blend a fait du contrôle verticalscrollbar un modèle pour un nouveau style ScrollBar et l’a appliqué à verticalscrollbar (recherchez <Style x:Key="ScrollBarStyle1" TargetType="ScrollBar">).

   Conseil :
   Dans le panneau Objets et chronologie, notez que UserControl a été remplacé par Modèle.

5. Pour changer verticalscrollbar en racine du modèle, dans le panneau Objets et chronologie, cliquez avec le bouton droit sur verticalscrollbar , puis cliquez sur Créer une partie de ScrollBar, puis cliquez sur VerticalRoot. Notez que verticalscrollbar a été renommé VerticalRoot .

6. Pour ajouter des lignes à la grille de partie Root , en mode Création, cliquez sur la règle bleue à gauche du contrôle pour ajouter des lignes comme illustré dans le graphique suivant :

   

   Si vous ajoutez les lignes comme indiqué, les parties figureront dans les lignes appropriées. Track possède une valeur RowSpan de 5, smalldecrease se situe dans Row 0, thumb se situe dans Row 2, et smallincrease se situe dans Row 4.

   Remarque :
   La numérotation commence à 0. Les 5 lignes sont donc numérotées de 0 à 4.

   Vous devez maintenant définir les éléments de la conception graphique comme parties du modèle. Lorsque vous définissez les éléments, vous pouvez également affecter des valeurs aux propriétés spécifiques.

7. Dans le panneau Objets et chronologie, cliquez avec le bouton droit sur smalldecrease , puis cliquez sur Créer une partie de ScrollBar, puis cliquez sur VerticalSmallDecrease. Dans la boîte de dialogue Créer une partie, cliquez sur OK.

   L’élément smalldecrease vient d’être changé en type de RepeatButton , c’est-à-dire, la partie VerticalSmallDecrease du modèle de contrôle ScrollBar .

8. Par défaut, Expression Blend crée un objet ContentPresenter pour la partie. Dans cet exemple, vous n’utiliserez pas ContentPresenter . Vous pouvez donc le supprimer en cliquant avec le bouton droit sur ContentPresenter dans le panneau Objets et chronologie et en cliquant sur Supprimer.

9. Pour définir les propriétés de la partie VerticalSmallDecrease , dans le panneau Objets et chronologie, cliquez sur smalldecrease , puis ouvrez le panneau Propriétés. Dans la catégorie Disposition, définissez Width et Height sur 7 .

10. Pour ajouter des états à la partie VerticalSmallDecrease , dans le panneau États, cliquez sur MouseOver. Dans le panneau Propriétés, définissez Remplir sur #FFCCCCCC . Revenez au panneau États, puis cliquez sur Base pour arrêter l’enregistrement de l’état.

    Remarque :
    Vous pouvez également arrêter l’enregistrement de l’état en cliquant sur Indicateur de mode d’enregistrement dans le coin supérieur gauche de la fenêtre du document.

    Dans le panneau États, cliquez sur Pressed. Dans le panneau Propriétés, définissez Remplir sur #FFE5E5E5 . Revenez au panneau États, puis cliquez sur Base.

    Dans le panneau États, cliquez sur Normal, sur Ajouter une transition, puis sur MouseOver à Normal. Dans la zone Durée de la transition, tapez 0,2 , puis cliquez sur Base.

11. Dans le panneau Objets et chronologie, cliquez sur Grille. Dans la catégorie Pinceaux du panneau Propriétés, cliquez sur Pinceau de couleur unie, , puis définissez la propriété Alpha sur 1 .

12. Revenez au mode d’édition de modèle pour le contrôle ScrollBar [ScrollBarStyle1 (modèle ScrollBar)] en cliquant sur Rétablir l’étendue à  dans le panneau Objets et chronologie, ou en cliquant sur VerticalSmallDecrease dans le chemin de navigation en haut de la planche graphique.

    Répétez les étapes 7 à 12 pour l’élément smallincrease .

13. Pour définir le thumb comme partie du modèle, dans le panneau Objets et chronologie, cliquez avec le bouton droit sur thumb , cliquez sur Créer une partie de ScrollBar, puis cliquez sur Curseur vertical. Dans la boîte de dialogue Créer une partie, cliquez sur OK.

14. Afin de définir les propriétés de la partie VerticalThumb , revenez au mode d’édition de modèle pour le contrôle ScrollBar [ScrollBarStyle1 (modèle ScrollBar)] en cliquant sur Rétablir l’étendue à , puis, dans le panneau Objets et chronologie, cliquez sur VerticalThumb. Dans la catégorie Disposition du panneau Propriétés, définissez Width et Height sur 7 . Définissez les valeurs de Margin comme suit :

    • Left : 5

    • Right : 5

    • Top : 0

    • Bottom : 0

    Cliquez sur Propriétés avancées, puis définissez MinHeight sur 7 . Cela affecte une valeur de hauteur minimale au curseur pour qu’il soit toujours visible.

15. Pour ajouter des états à la partie thumb , revenez au modèle Thumb [ThumbStyle1(ThumbTemplate)] en cliquant sur curseur dans le chemin de navigation en haut de la planche graphique. Dans le panneau États, cliquez sur MouseOver. Dans le panneau Propriétés, définissez Remplir sur #FFCCCCCC . Revenez au panneau États, puis cliquez sur Base.

    Dans le panneau États, cliquez sur Pressed. Dans le panneau Propriétés, définissez Remplir sur #FFE5E5E5 . Revenez au panneau États, puis cliquez sur Base.

    Dans le panneau États, cliquez sur Normal, sur Ajouter une transition, puis sur MouseOver à Normal. Dans la zone Durée de la transition, tapez 0,2 , puis cliquez sur Base.

16. Revenez à ScrollBarStyle1 (modèle ScrollBar) en cliquant sur Rétablir l’étendue à dans le panneau Objets et chronologie. Dans le panneau Objets et chronologie, cliquez sur VerticalRoot. Dans le panneau Parties, double-cliquez sur VerticalLargeDecrease pour créer cette partie et en faire un enfant de VerticalRoot . Dans le panneau Propriétés, définissez la valeur Ligne sur 1 et la valeur Opacité sur 0 .

17. Dans le panneau Objets et chronologie, cliquez sur VerticalRoot. Dans le panneau Parties, double-cliquez sur VerticalLargeDecrease pour créer cette partie et en faire un enfant de VerticalRoot. Dans le panneau Propriétés, définissez la valeur Ligne sur 3 et la valeur Opacité sur 0 .

18. Pour les lignes 0, 1, 2 et 4, cliquez deux fois sur l’icône Étoile  jusqu’à ce que l’icône Automatique  s’affiche. Pour la ligne 3, assurez-vous que l’icône Étoile s’affiche. Cela définit la hauteur des lignes comme suit : Automatique, Automatique, Automatique, Étoile et Automatique. Cliquez sur chacun des séparateurs de ligne dimensionnés automatiquement, puis, dans le panneau Propriétés, cliquez sur Afficher les propriétés avancées. À droite de la valeur MinHeight, cliquez sur Options avancées, puis sur Rétablir.

    

19. Dans le panneau Objets et chronologie, cliquez sur VerticalRoot. Dans le panneau États, cliquez sur Disabled. Dans le panneau Propriétés, définissez Opacité sur 50 .

20. Générez votre projet en cliquant sur CTRL + MAJ + B. Une fois la génération terminée, exécutez votre projet en cliquant sur F5 puis testez votre barre de défilement.

Références

Vous trouverez des informations détaillées sur les propriétés et événements du contrôle ScrollBar de Silverlight dans la Galerie des contrôles Silverlight  sur MSDN.

Voir aussi

Tâches

Lier un objet à la saisie utilisateur ou à d'autres valeurs internes

Concepts

Conseils de conception de styles pour les contrôles Silverlight courants
SimpleScrollBar
Application d’un style à un contrôle prenant en charge les modèles

Copyright © 2011 Microsoft Corporation. Tous droits réservés.