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

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 :

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, consultez Véhiculer des propriétés d'objet vers le modèle dans Blend.

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 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 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, Blend supprime root et tout ce qui se trouve à l’intérieur, puis place un nouvel objet ScrollViewer à sa place. Ensuite, 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 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 conception de styles pour le contrôle ScrollBar des contrôles Silverlight dans Blend.

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 deux fois sur **Étoile **. L’icône Automatique  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 du contenu dans la propriété Contenu de l’objet ScrollViewer.

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

    Important

    La ListBox risque de ne pas fonctionner comme prévu, à moins que vous n’ayez appliqué un style à ScrollBar à l’aide des Conseils de conception de styles pour le contrôle ScrollBar des contrôles Silverlight dans Blend comme décrit à 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 dans Blend.

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 dans Blend

Application de styles à des objets dans Blend

SimpleScrollBar (prise en charge de WPF dans Blend)