Pour afficher l’article en anglais, activez la case d’option Anglais. Vous pouvez aussi afficher la version anglaise dans une fenêtre contextuelle en faisant glisser le pointeur de la souris sur le texte.
Traduction
Anglais

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

JJ171025.0b2c798e-86c6-4ea2-a8a6-5cf1f12be1e2(fr-fr,VS.120).png

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 :

JJ171025.0fb6390c-a631-4f14-8f23-be3723f99405(fr-fr,VS.120).png

Le modèle ScrollViewer comprend les parties suivantes :

Nom de la partie

Type d’objet

ScrollContentPresenter

ScrollContentPresenter

HorizontalScrollBar

ScrollBar

VerticalScrollBar

ScrollBar

Conseil Conseil

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

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.

JJ171025.collapse_all(fr-fr,VS.120).gifPartie ScrollViewerPresenter

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

JJ171025.collapse_all(fr-fr,VS.120).gifPartie 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.

JJ171025.collapse_all(fr-fr,VS.120).gifPartie 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.

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.

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

ScrollViewer

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 à JJ171025.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(fr-fr,VS.120).png 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 :

    ScrollViewer avec colonnes
  11. Pour la colonne de droite, cliquez deux fois sur Étoile JJ171025.1b4edaf6-b6a8-4498-80dc-949375fa610d(fr-fr,VS.120).png. L’icône Automatique JJ171025.aa9ec064-22f8-4b62-9eed-3f4772362d22(fr-fr,VS.120).png 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 à JJ171025.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(fr-fr,VS.120).png 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.

    Remarque importante 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.

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.

Afficher: