Conseils de conception de styles pour le contrôle ScrollBar

Le contrôle ScrollBar représente une plage de valeurs, où la valeur actuelle est représentée par la position d'un type d'objet appelé Thumb. Les objets ScrollBar sont habituellement utilisés dans les modèles d'autres contrôles tels que ListBox ou ScrollViewer, pour offrir une fonctionnalité de défilement.

Comme pour tous les contrôles, l'aspect du contrôle ScrollBar peut être considérablement modifié par rapport à son aspect par défaut. Par défaut, le contrôle ScrollBar se présente ainsi :

Propriétés d'intérêt du contrôle ScrollBar

Vous pouvez orienter un contrôle ScrollBar dans le sens horizontal ou vertical en définissant la propriété Orientation sous Disposition dans le panneau Propriétés. Vous pouvez spécifier la plage de valeurs en définissant les valeurs Minimum et Maximum sous Propriétés communes dans le panneau Propriétés. La valeur courante (spécifiée dans la propriété Valeur) doit se situer entre les valeurs minimum et maximum. Vous pouvez définir d'autres propriétés dans la catégorie Propriétés communes, telles que les propriétés LargeChange et SmallChange.

Vous pouvez définir ces propriétés des manières suivantes :

• Définissez les propriétés de l'objet   Après avoir tracé un objet ScrollBar sur la planche graphique, vous pouvez définir directement les propriétés de l'objet. Si vous souhaitez que plusieurs ScrollBars utilisent les mêmes valeurs, définissez ces propriétés dans un style.

• Définissez les propriétés dans un style   Si vous définissez les propriétés dans un style  de l'objet ScrollBar, tout objet ScrollBar utilisant ce style utilisera ces valeurs. Vous pouvez remplacer les valeurs d'un objet spécifique.

  Pour plus d’informations, voir Créer un style.

Le contrôle ScrollBar change d'aspect selon son état. Vous pouvez modifier l'apparence de chaque état en mode d'édition de modèle en sélectionnant un état dans le panneau États.

Pour plus d'informations, voir les états répertoriés dans les tableaux suivants, et voir Définition d'états visuels différents pour un contrôle.

Parties du modèle ScrollBar

Le contrôle ScrollBar utilise un modèle : le modèle ScrollBar. Chaque partie du modèle joue un rôle dans l'aspect et le comportement de l'objet ScrollBar auquel le modèle est appliqué.

D'autres objets peuvent exister dans le modèle pour habiller l'aspect du contrôle ScrollBar, mais les parties répertoriées dans le tableau suivant sont liées à son comportement dans un contrat.

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

Nom de la partie	Type d'objet	Description
VerticalRoot  HorizontalRoot	FrameworkElement	Un panneau de disposition contenant les objets qui définissent l'aspect du contrôle ScrollBar alors qu'il est orienté verticalement (ou horizontalement). Cette partie est obligatoire.
VerticalSmallDecrease  HorizontalSmallDecrease	RepeatButton	Un objet qui diminue la propriété Valeur de l'objet ScrollBar quand vous cliquez sur cet objet. La propriété Valeur diminue par incréments selon la valeur définie dans la propriété SmallChange.
VerticalLargeDecrease  HorizontalLargeDecrease	RepeatButton	Un objet qui diminue la propriété Valeur de l'objet ScrollBar quand vous cliquez sur cet objet. La propriété Valeur diminue par incréments selon la valeur définie dans la propriété LargeChange. Cette partie est obligatoire. Conseil : Les objets RepeatButton possèdent des propriétés que vous pouvez définir, mais si vous souhaitez ajouter, supprimer ou modifier les objets qui constituent l'objet RepeatButton, ouvrez son modèle.
VerticalThumb  HorizontalThumb	Thumb	Un objet dont la position le long d'une piste représente la valeur actuelle du contrôle ScrollBar. Cette partie est obligatoire. Conseil : Les objets Thumb possèdent des propriétés que vous pouvez définir, mais si vous souhaitez ajouter, supprimer ou modifier les objets qui constituent l'objet Thumb, ouvrez son modèle.
VerticalLargeIncrease  HorizontalLargeIncrease	RepeatButton	Un objet qui augmente la propriété Valeur de l'objet ScrollBar quand vous cliquez sur cet objet. La propriété Valeur augmente par incréments selon la valeur définie dans la propriété LargeChange. Cette partie est obligatoire.
VerticalSmallIncrease  HorizontalSmallIncrease	RepeatButton	Un objet qui augmente la propriété Valeur de l'objet ScrollBar quand vous cliquez sur cet objet. La propriété Valeur augmente par incréments selon la valeur définie dans la propriété SmallChange.

États du contrôle ScrollBar

Par défaut, le contrôle ScrollBar peut être dans l'un des trois états suivants, visibles dans le panneau États lors de la modification d'un modèle ScrollBar :

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.
Désactivé	Aspect du contrôle ScrollBar lorsque la valeur False est affectée à la propriété IsEnabled.

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 le bouton d'enregistrement ou sélectionnez Base dans le panneau États.

Pour convertir des objets en contrôle ScrollBar

Pour modifier le modèle d'un contrôle ScrollBar, effectuez l'une des opérations suivantes :

• Tracez un objet ScrollBar  sur la planche graphique, puis créez une copie du modèle par défaut.

  Pour plus d’informations, voir Créer ou modifier un modèle.

• Dessinez l'aspect de votre contrôle ScrollBar en dessinant des objets ou en important des illustrations, avant d'utiliser la commande Transformer en contrôle.

Si vous utilisez la commande Transformer en contrôle, procédez comme suit pour créer tous les objets requis par le modèle ScrollBar :

1. Regroupez vos objets dans un panneau de disposition, sélectionnez ce dernier, puis, dans le menu Outils, cliquez sur Créer un contrôle.

2. Dans la boîte de dialogue qui apparaît, sélectionnez ScrollBar, nommez votre modèle, puis sélectionnez l'emplacement où le modèle sera stocké.

   Pour plus d’informations sur les emplacements, voir Créer une ressource.

3. Après avoir cliqué sur OK, Microsoft Expression Blend passe en mode d'édition de modèle et affiche les objets qui constituent votre contrôle ScrollBar.

4. Le modèle d'un contrôle ScrollBar comprend des parties qui sont utilisées lorsqu'un objet ScrollBar est orienté verticalement ou horizontalement. Vous pouvez affecter toutes les parties figurant dans le panneau Parties à des objets de votre modèle, ou affecter seulement les parties qui sont liées à l'orientation du contrôle ScrollBar. Si vous n'avez qu'un ensemble d'objets, mais souhaitez concevoir le modèle pour les deux orientations du contrôle ScrollBar, vous pouvez dupliquer vos objets et les réorganiser.

   Conseil :

   Si vous affectez seulement les parties horizontales du panneau Parties dans votre modèle, elles disparaîtront de la planche graphique si l'objet ScrollBar (auquel le modèle est appliqué) est défini pour s'afficher verticalement. Pour modifier l'orientation de l'objet ScrollBar, cliquez sur [ScrollBar] dans le chemin de navigation en haut de la planche graphique pour revenir à l'étendue d'édition de l'objet ScrollBar, définissez la propriété Orientation sur Horizontal, puis utilisez le troisième bouton du chemin de navigation pour revenir au mode d'édition de modèle.

5. Pour créer un objet pour la partie VerticalRoot (ou HorizontalRoot), procédez comme suit :

   1. Dessinez un panneau de disposition Grille comportant cinq colonnes (ou cinq lignes). Les cinq colonnes devraient être dimensionnées sur Auto, Auto, Auto, * et Auto, respectivement.

      

      Pour plus d’informations, voir Ajouter ou supprimer une ligne ou une colonne et Modifier l’option de taille d’une ligne ou d’une colonne.

   2. Cliquez avec le bouton droit sur votre nouvel objet Grid, pointez sur Transformer en partie de ScrollBar, puis cliquez sur VerticalRoot (ou sur HorizontalRoot).

6. L'espace dans lequel l'objet Thumb se déplace est appelé la piste. La piste n'est pas une partie du modèle ; elle est donc facultative. Placez tout objet dont vous souhaitez qu'il représente la piste dans l'objet VerticalRoot (ou HorizontalRoot), soit en couvrant les cinq colonnes (ou lignes), soit en couvrant seulement les trois colonnes ou lignes centrales.

   Conseil :
   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é RowSpan (ou ColumnSpan).

7. Dans la mesure où les objets Thumb peuvent avoir leur propre modèle, vous devriez convertir les objets que vous souhaitez utiliser en contrôle Thumb en procédant comme suit :

   1. Groupez les objets qui représenteront votre objet Thumb dans un panneau de disposition.

   2. Déplacez le nouveau panneau de disposition vers la ligne (ou colonne) centrale de votre objet VerticalRoot (ou HorizontalRoot).

      Conseil :
      Pour placer un objet dans une colonne (ou une ligne) spécifique, sélectionnez l'objet, puis, dans le panneau Propriétés, définissez la propriété Row (ou Column). Le numéro de la première ligne (ou colonne) est 0.

   3. Cliquez avec le bouton droit sur le nouveau panneau de disposition, pointez sur Transformer en partie de ScrollBar, puis cliquez sur VerticalThumb (ou sur HorizontalThumb).

   4. Dans la boîte de dialogue Transformer en partie, sélectionnez l'emplacement où le modèle sera conservé.

   5. En mode d'édition de modèle pour le nouvel objet Thumb, vous pouvez continuer à faire des modifications, par exemple en sélectionnant des états dans le panneau États pour modifier l'aspect de l'objet Thumb dans ces états. Si vous souhaitez disposer d'une marge dans l'objet Thumb, définissez les propriétés de Marge dans l'objet racine.

   6. Revenez au mode d'édition de modèle pour l'objet ScrollBar en cliquant sur Étendue supérieure  dans le panneau Objets et chronologie ou en cliquant sur VerticalThumb (ou HorizontalThumb) dans le chemin de défilement situé en haut de la planche graphique.

   7. Définissez les propriétés Largeur et Hauteur de l'objet Thumb sur Auto, définissez la propriété MinHeight (ou MinWidth) sur une valeur supérieure à 0, puis définissez les propriétés de Marge sur 0.

8. Si vous souhaitez que l'utilisateur puisse cliquer sur un bouton à l'une ou l'autre extrémité de la piste pour déplacer l'objet Thumb par petits incréments, procédez comme suit :

   1. Groupez les objets que vous souhaitez utiliser pour le bouton de diminution dans un panneau de disposition.

   2. Déplacez le panneau de disposition dans la première ligne de l'objet VerticalRoot (ou dans la première colonne de l'objet HorizontalRoot).

   3. Cliquez avec le bouton droit sur le panneau de disposition, pointez sur Transformer en partie de ScrollBar, puis cliquez sur VerticalSmallDecrease (ou sur HorizontalSmallDecrease).

   4. Dans la boîte de dialogue Transformer en partie, sélectionnez l'emplacement où le modèle sera conservé.

   5. En mode d'édition de modèle pour le nouvel objet RepeatButton, vous pouvez continuer à effectuer des modifications, par exemple supprimer l'objet ContentPresenter. Si vous souhaitez disposer d'une marge dans l'objet RepeatButton, définissez les propriétés de Marge dans l'objet racine.

   6. Revenez au mode d'édition de modèle pour l'objet ScrollBar en cliquant sur Étendue supérieure  dans le panneau Objets et chronologie ou en cliquant sur VerticalSmallDecrease (ou HorizontalSmallDecrease) dans le chemin de défilement situé en haut de la planche graphique.

   7. Réglez les propriétés sous Disposition dans le panneau Propriétés pour faire apparaître l'objet RepeatButton à l'endroit de votre choix. Vous pouvez aussi réorganiser vos objets s'ils sont masqués par d'autres objets.

      Pour plus d’informations, voir Modifier l'ordre d'empilement des objets.

   8. Répétez ces étapes pour l'objet VerticalSmallIncrease (ou HorizontalSmallIncrease), en déplaçant l'objet dans la dernière ligne de l'objet VerticalRoot (ou dans la dernière colonne de l'objet HorizontalRoot).

9. Pour permettre à l'utilisateur de cliquer sur la piste d'un côté ou de l'autre de l'objet Thumb afin de le déplacer par grands incréments, procédez comme suit :

   1. Dessinez un contrôle RepeatButton dans chaque ligne (ou colonne) de part et d'autre de l'objet Thumb.

   2. Cliquez avec le bouton droit sur l'objet RepeatButton qui diminuera la valeur de l'objet ScrollBar, pointez sur Transformer en partie de ScrollBar, puis cliquez sur VerticalLargeDecrease (ou sur HorizontalLargeDecrease).

   3. Cliquez avec le bouton droit sur l'objet RepeatButton qui augmentera la valeur de l'objet ScrollBar, pointez sur Transformer en partie de ScrollBar, puis cliquez sur VerticalLargeIncrease (ou sur HorizontalLargeIncrease).

   4. Si vous ne voulez pas que les objets RepeatButton soient visibles, vous pouvez définir leurs propriétés d'Opacité sur 0.

      Conseil :
      Vous pouvez éventuellement convertir les objets existants en modèles de contrôles RepeatButton, comme vous l'avez fait pour les objets VerticalSmallDecrease (ou HorizontalSmallDecrease). Veillez à déplacer les objets RepeatButton dans les lignes (ou les colonnes) situées de part et d'autre de l'objet Thumb.

10. Vous pouvez continuer à modifier votre modèle dans ce mode. Par exemple, ajoutez ou modifiez des objets, ou sélectionnez un état dans le panneau États pour modifier l'apparence de votre modèle dans cet état.

11. Envisagez de lier certaines des propriétés de pinceau des objets de votre modèle aux propriétés suivantes dans l'objet ScrollBar qui utilisera finalement votre modèle :

    • Background

    • BorderBrush

    • Foreground

    • BorderThickness

    Pour plus d’informations, voir Véhiculer des propriétés d'objet vers le modèle.

12. Pour quitter le mode d'édition de modèle, cliquez sur [ScrollBar] dans le chemin de défilement situé en haut de la planche graphique, ou cliquez sur Étendue supérieure  dans le panneau Objets et chronologie.

    Pour plus d'informations sur l'application de votre nouveau modèle ScrollBar à d'autres objets ScrollBar, voir Appliquer ou supprimer une ressource.

Références

Vous trouverez des informations détaillées à propos des propriétés et des événements du contrôle ScrollBar Microsoft Silverlight dans la galerie de 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

Définition d'un style pour un contrôle prenant en charge les modèles