Conseils de conception de styles pour le contrôle ScrollViewer

Le contrôle ScrollViewer représente un objet qui affiche une zone d’affichage avec défilement. Vous pouvez placer des objets dans la zone d’affichage. Par exemple, à l’intérieur du modèle d’un contrôle ListBox, un contrôle ScrollViewer contient un ItemsPresenter qui affiche une liste d’éléments.

Comme avec tous les contrôles, vous pouvez modifier le contrôle ScrollViewer de sorte qu’il paraisse très différent de son apparence par défaut. Par défaut, le contrôle ScrollViewer se présente comme suit :

Propriétés intéressantes du contrôle ScrollViewer

Pour afficher ou masquer les objets ScrollBar dans un contrôle ScrollViewer, définissez les propriétés HorizontalScrollBarVisibility et VerticalScrollBarVisibility, qui s’affichent lorsque vous cliquez sur Afficher les propriétés avancées  au bas de la catégorie Disposition du panneau Propriétés.

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

• Définir les propriétés de l’objet   Après avoir dessiné un objet ScrollViewer sur la planche graphique, vous pouvez définir directement les propriétés de l’objet. Pour que plusieurs objets ScrollViewer utilisent les mêmes valeurs, définissez ces propriétés dans un style.

• Définir les propriétés dans un style   Si vous définissez ces propriétés dans le style  de l’objet ScrollViewer, tout objet ScrollViewer qui a recours à ce style utilise ces valeurs. Vous pouvez remplacer les valeurs d’un objet spécifique.

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

Pour afficher un élément dans un contrôle ScrollViewer, vous pouvez le sélectionner sous Objets et chronologie pour en faire le conteneur actif, puis dessiner de nouveaux objets ou déplacer ceux existants dans le contrôle ScrollViewer.

Si vous souhaitez que le contrôle ScrollViewer affiche des éléments dans une collection de données, pensez à utiliser un contrôle ListBox à la place.

Pour plus d’informations, voir Lier un objet à des données et Création d'un échantillon de données.

Parties d’un modèle ScrollViewer

Le contrôle ScrollViewer utilise un seul modèle pour définir son apparence : le modèle ScrollViewer. Chaque partie du modèle remplit un rôle dans l’apparence et le comportement de l’objet ScrollViewer auquel le modèle est appliqué.

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

Pour afficher les parties du modèles, ouvrez le panneau Parties tout en modifiant le modèle.

Nom de la partie	Type d’objet	Description
ScrollContentPresenter	ScrollContentPresenter	Un objet qui affiche le contenu du contrôle ScrollViewer. Cette partie est obligatoire.
HorizontalScrollBar	ScrollBar	Un objet ScrollBar le long de la partie inférieure du contrôle ScrollViewer.
VerticalScrollBar	ScrollBar	Un objet ScrollBar le long de la partie droite du contrôle ScrollViewer.

États d’un contrôle ScrollViewer

Par défaut, aucun état n’est défini pour le contrôle ScrollViewer. Vous pouvez créer vos propres états, ou utiliser ceux d’un contrôle qui comprend un contrôle ScrollViewer dans leur modèle (par exemple, le contrôle ListBox).

Pour plus d’informations, voir Définir différents états visuels et durées de transition pour un contrôle utilisateur et Conseils de conception de styles pour le contrôle ListBox.

Pour convertir des objets en contrôle ScrollViewer

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

• Dessinez un contrôle ScrollViewer  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.

• Concevez l’apparence de votre contrôle ScrollViewer en dessinant des objets ou en important les conceptions graphiques, puis utilisez la commande Créer un contrôle.

Si vous utilisez la commande Créer un contrôle, suivez ces étapes pour vous assurer de créer tous les objets requis par le modèle ScrollViewer :

1. Regroupez tous les objets souhaités pour définir l’apparence de votre contrôle ScrollViewer dans un panneau de disposition Grille.

2. Sélectionnez le nouvel objet Grid, puis, dans le menu Outils, cliquez sur Créer un contrôle.

3. Dans la boîte de dialogue qui s’affiche, sélectionnez ScrollViewer, nommez votre modèle, et sélectionnez l’emplacement de stockage du modèle.

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

4. Après avoir cliqué sur OK, Microsoft Expression Blend passe en mode d’édition de modèle et affiche les objets qui composent votre contrôle ScrollViewer vertical. 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.

5. Supprimez l’objet ContentPresenter qui a été créé dans le modèle.

6. Pour ajouter un objet qui sera affecté à la partie ScrollContentPresenter du modèle, double-cliquez sur ScrollContentPresenter dans le panneau Parties. Déplacez le nouvel objet ScrollContentPresenter vers la position souhaitée.

   Conseil :

   Vous pouvez également ajouter un objet ScrollContentPresenter et le renommer en ScrollContentPresenter avant de convertir vos objets en contrôle ScrollViewer. Lorsque la commande Créer un contrôle convertit les objets en contrôle, un objet ayant le même nom et le même type que la partie du modèle est automatiquement converti en cette partie. Si aucun objet ne peut être utilisé, la partie s’affiche dans le panneau Parties en regard d’une icône  qui indique qu’il est inutilisé. Pour plus d’informations, voir Affecter des parties de modèle aux objets.

7. Si vous voulez utiliser une conception graphique ou d’autres objets pour les parties HorizontalScrollBar et VerticalScrollBar du modèle, effectuez les opérations suivantes :

   1. Regroupez chaque ensemble d’objets dans un panneau de disposition.

   2. Cliquez avec le bouton droit sur l'un des nouveaux panneaux de disposition, pointez sur Créer une partie de ScrollViewer, puis cliquez sur HorizontalScrollBar ou sur VerticalScrollBar.

      Ceci permet de remplacer vos objets par un objet ScrollBar et d’utiliser vos objets pour créer le style et le modèle qui seront appliqués à l’objet ScrollBar.

   3. Dans la boîte de dialogue Créer une partie, tapez un nom pour le style ScrollBar qui sera créé, sélectionnez un emplacement de stockage pour le style, puis cliquez sur OK.

   4. Vous pouvez continuer à effectuer des modifications dans vos objets même en mode d’édition de modèle pour le nouvel objet ScrollBar.

      Pour plus d’informations, voir Conseils de conception de styles pour le contrôle ScrollBar.

   Pour revenir au mode d’édition de modèle pour ScrollViewer, cliquez sur le bouton Étendue supérieure  dans le panneau Objets et chronologie, ou cliquez sur HorizontalScrollBar ou sur VerticalScrollBar dans la barre de navigation en haut de la planche graphique.

8. Pensez à lier au modèle les propriétés suivantes des objets de votre modèle à celles de l’objet ScrollViewer qui utiliseront finalement votre modèle :

   • Visibility   Lier au modèle cette propriété à la propriété Visible.

   • Maximum   Lier au modèle cette propriété à la propriété Width (pour l’objet HorizontalScrollBar) ou la propriété Height (pour l’objet VerticalScrollBar).

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

9. Pensez à lier certaines propriétés de pinceau dans votre modèle :

   • Background

   • BorderBrush

   • BorderThickness

10. Pour quitter le mode d’édition de modèle, cliquez sur [ScrollViewer] dans la barre de navigation 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 ScrollViewer à d’autres objets ScrollViewer, voir Appliquer ou supprimer une ressource.

Références

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

Voir aussi

Concepts

Conseils de conception de styles pour les contrôles Silverlight courants

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

SimpleScrollBar