Conseils de style pour le contrôle ScrollViewer

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

Parties d’un modèle ScrollViewer

Le modèle ScrollViewer comprend les parties suivantes :

Nom de la partie	Type d’objet
ScrollContentPresenter	ScrollContentPresenter
HorizontalScrollBar	ScrollBar
VerticalScrollBar	ScrollBar

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

Astuces ScrollViewer

Un objet ScrollViewer se compose de contenu de défilement contrôlé par un objet ScrollBar horizontal et un objet ScrollBar vertical. Il est possible de définir un objet ScrollBar de sorte qu’il soit toujours affiché, toujours masqué ou affiché uniquement lorsque cela est nécessaire.

Partie ScrollViewerPresenter

La partie ScrollContentPresenter est obligatoire. La partie ScrollContentPresenter affiche le contenu de défilement.

Partie HorizontalScrollBar

La partie HorizontalScrollBar est facultative. Liez par modèle la propriété Visibility de cette partie à ComputedHorizontalScrollBarVisibility , sa propriété Maximum à ScrollableWidth , sa propriété Value à HorizontalOffset et sa propriété ViewportSize à ViewportWidth .

Partie VerticalScrollBar

La partie VerticalScrollBar est facultative. Liez par modèle la propriété Visibility de cette partie à ComputedVerticalScrollBarVisibility , sa propriété Maximum à ScrollableHeight , sa propriété Value à VerticalOffset et sa propriété ViewportSize à ViewportHeight .

Liaison de modèle

Vous pouvez lier par modèle les propriétés Background, 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 ScrollViewer

Le graphique suivant est une maquette de conception détaillée d’une visionneuse à défilement créée par un concepteur.

Il est important de noter que le graphique précédent n’est pas encore une visionneuse à défilement, mais une conception graphique qui y ressemble.

Cet exemple montre comment utiliser le code XAML à l’étape 2 de la procédure suivante.

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="root" Height="146" Width="146">
      <Rectangle Fill="#FF333333" RadiusX="3" RadiusY="3" />
      <Rectangle x:Name="content" Stroke="Black" Width="200" Height="200">
         <Rectangle.Fill>
         <RadialGradientBrush>
            <GradientStop Color="White"/>
            <GradientStop Color="Black" Offset="1"/>
         </RadialGradientBrush>
         </Rectangle.Fill>
      </Rectangle>
      <Grid x:Name="verticalscrollbar" Width="17" Height="146" HorizontalAlignment="Right">
         <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>
   </Grid>
   

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

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

   Dans cette étape, Expression Blend supprime root et tout ce qui se trouve à l’intérieur, puis place un nouvel objet ScrollViewer à sa place. Ensuite, Expression Blend transforme root en modèle d’un nouveau style ScrollViewer et applique ce nouveau style au nouvel objet ScrollViewer .

5. Dans le panneau Objets et chronologie, cliquez avec le bouton droit sur ContentPresenter, puis cliquez sur Supprimer.

6. Dans le panneau Objets et chronologie, cliquez sur Racine. Dans le panneau Parties, double-cliquez sur ScrollContentPresenter.

7. Cliquez avec le bouton droit sur verticalScrollBar, pointez sur Créer une partie de ScrollViewer, puis cliquez sur VerticalScrollBar. Cliquez sur OK.

   Pour appliquer un style VerticalScrollBar , voir Conseils de style pour le contrôle ScrollBar (barre de défilement).

8. Cliquez sur ****Rétablir l’étendue à **** pour revenir à ScrollViewerStyle1 (modèle ScrollViewer).

9. VerticalScrollBar doit être en mesure de faire défiler la fenêtre d’affichage de la zone avec défilement. Pour cela, vous pouvez utiliser l’option Expression personnalisée du menu Options avancées dans le panneau Propriétés. Affectez à Visibilité la valeur {TemplateBinding ComputedVerticalScrollBarVisibility}, à Maximum la valeur {TemplateBinding ScrollableHeight}, à Valeur la valeur {TemplateBinding VerticalOffset} et à ViewportSize la valeur {TemplateBinding ViewportHeight}.

   Vous pouvez, si vous préférez, localiser la ligne de code qui commence par <ScrollBar x:Name="VerticalScrollBar, en mode Fractionné, avec VerticalScrollBar sélectionné dans le panneau Objets et chronologie, puis copier le code suivant à la fin de la ligne que vous venez de localiser.

   Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" 
   Maximum="{TemplateBinding ScrollableHeight}" 
   Value="{TemplateBinding VerticalOffset}" 
   ViewportSize="{TemplateBinding ViewportHeight}"
   

10. ScrollContentPresenter et VerticalScrollBar doivent être côte à côte, chacun dans sa propre colonne. Dans le panneau Objets et chronologie, cliquez sur Racine. Sur la planche graphique, cliquez sur la bordure bleue située au-dessus du contrôle, puis faites glisser la flèche orange jusqu’à ce qu’elle se trouve à côté de la barre de défilement, comme l’illustre l’image suivante :

    

11. Pour la colonne de droite, cliquez sur ****Étoile **** à deux reprises. L’icône Auto  s’affiche.

12. Dans le panneau Objets et chronologie, cliquez sur ScrollContentPresenter. Dans la catégorie Disposition du panneau Propriétés, cliquez sur Options avancées à droite de ColumnSpan, puis cliquez sur Rétablir.

13. Dans le panneau Objets et chronologie, cliquez sur VerticalScrollBar. Dans la catégorie Disposition du panneau Propriétés, cliquez sur Options avancées à droite de Margin, puis cliquez sur Rétablir.

14. L’objet nommé content se trouve toujours dans le modèle. Cet objet correspond au Rectangle de 200 pixels sur lequel l’objet ScrollViewer carré de 146 pixels doit défiler. L’étape suivante consiste à le couper du modèle et à le coller dans la propriété Content de l’objet ScrollViewer. L’objet ScrollContentPresenter l’affichera alors. Dans le panneau Objets et chronologie, cliquez avec le bouton droit sur content, puis cliquez sur Couper.

15. Cliquez sur ****Rétablir l’étendue à **** et appuyez sur Ctrl+V pour coller content dans la propriété Content de l’objet ScrollViewer.

16. Générez votre projet (Ctrl+Maj+B) et testez-le en appuyant sur F5.

    Important :
    L’objet ListBox ne fonctionnera pas comme prévu, sauf si vous avez appliqué un style à l’objet ScrollBar en suivant les Conseils de style pour le contrôle ScrollBar (barre de défilement) décrits à l’étape 7.

Pour plus d’informations sur l’application de votre nouveau modèle ComboBox à d’autres objets ComboBox , 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 de Silverlight dans la Galerie de contrôles Silverlight  sur MSDN.

Voir aussi

Concepts

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

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