Conseils de conception de styles pour le contrôle ScrollBar des contrôles Silverlight dans Blend

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.

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 Curseur

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). Pour que les RepeatButtons fonctionnent mais soient invisibles, attribuez-leur une Opacity nulle. 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 :

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 Indicateur du mode d’enregistrement , ou sélectionnez Base dans le panneau Etats.

Pour plus d'informations, consultez Définition d'états visuels différents pour un contrôle dans Blend.

Liaison de modèle

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

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.

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, Blend for Visual Studio 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.

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

   Notes

   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, 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.

    Notes

    Arrêtez 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 Vertical Thumb. 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 cliquez sur Réinitialiser.

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 appuyant sur Ctrl+Maj+B. Une fois la génération terminée, exécutez votre projet en appuyant 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 Silverlight ScrollBar dans la Silverlight Control Gallery 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 dans Blend

SimpleScrollBar (prise en charge de WPF dans Blend)