Conseils sur les styles du contrôle ListBox

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

Parties du modèle ListBox

Le contrôle ListBox contient une partie : la partie ContentElement . Cette partie est obligatoire.

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

États d’un contrôle ListBox

Par défaut, le contrôle ListBox peut être dans l’un des trois états suivants du groupe d’états ValidationStates :

Nom de l’état	Description
Valid	Aspect du contrôle ListBox lorsqu’il est valide.
InvalidUnfocused	Aspect du contrôle ListBox lorsqu’il n’est pas valide et ne possède pas le focus clavier.
InvalidFocused	Aspect du contrôle ListBox lorsqu’il n’est pas valide et possède le focus clavier.

Lorsque vous sélectionnez un état, l'enregistrement d'état est activé et les éventuelles modifications que vous apportez seront enregistrées pour cet état. Pour désactiver l’enregistrement de l’état, cliquez sur le bouton d’enregistrement  sur la planche graphique, ou sélectionnez Base dans le panneau États.

Pour convertir des objets en contrôle ListBox

L’image suivante est une conception complète (comp) d’un ListBox créé par un concepteur :

Cet exemple utilise le code XAML dans l’étape 2 de la procédure suivante, qui correspond au graphique précédent pour créer une zone de mot de passe personnalisée à l’aide du modèle de contrôle ListBox .

Remarque :
Il est important de noter que le graphique précédent n’est pas encore un contrôle ListBox , mais une conception graphique qui peut être convertie en un contrôle ListBox .

1. Ouvrez un nouveau projet Microsoft Silverlight. Dans la vue 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" />
      <TextBlock Margin="5,5,0,0" Foreground="White" Text="Lorem"/>
      <TextBlock Margin="5,26,0,0" Foreground="White" Text="Ipsum"/>
      <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 ListBox, puis cliquez sur OK.

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

6. Appuyez sur MAJ et sélectionnez les deux éléments TextBlock . Cliquez avec le bouton droit, puis cliquez sur Couper.

7. Cliquez sur ****Rétablir l’étendue à **** et appuyez sur CTRL+V quatre fois pour créer huit nouveaux éléments TextBlock. Appuyez sur MAJ et sélectionnez tous les éléments TextBlock.

8. Dans la catégorie Disposition du panneau Propriétés, à droite de la zone Largeur, cliquez sur Options avancées, puis sur Réinitialiser. Répétez l’opération pour Hauteur.

9. Dans le panneau Objets et chronologie , cliquez avec le bouton droit sur ListBox, cliquez sur Modifier le modèle, puis sur Modifier le modèle actuel.

10. Dans le panneau Objets et chronologie, cliquez avec le bouton droit sur racine, puis cliquez sur Créer une partie de ListBox, puis sur ScrollViewer. Cliquez sur OK.

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

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

13. Dans le panneau Objets et chronologie, cliquez avec le bouton droit sur VerticalScrollbar, puis cliquez sur Créer une partie de ScrollViewer, puis sur VerticalScrollBar. Cliquez sur OK.

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

14. Cliquez sur ****Rétablir l’étendue à **** pour revenir au modèle ScrollViewer .

15. Divisez la racine en deux colonnes en cliquant sur la règle bleue à gauche du contrôle tout en faisant glisser la règle vers la droite à côté de la barre de défilement comme illustré sur l’image suivante :

    

16. Pour la colonne de droite, cliquez deux fois sur ****Étoile ****. L’icône Automatique  s’affiche.

17. Dans la catégorie Disposition du panneau Propriétés, cliquez sur Afficher les propriétés avancées. Cliquez sur Options avancées à droite de MinWidth, puis cliquez sur Réinitialiser.

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

19. Une fois VerticalScrollBar sélectionné dans le panneau Objets et chronologie, passez en mode Fractionné. Copiez et collez ensuite le code suivant dans la ligne de code XAML qui commence par <ScrollBar x:Name="VerticalScrollBar".

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

    Remarque :
    Vous pouvez également définir ces propriétés à l’aide d’expressions personnalisées.

20. Cliquez sur ****Rétablir l’étendue à ****. Dans le panneau Objets et chronologie, cliquez sur ScrollViewer. Ajoutez un ItemsPresenter du panneau Composants en cliquant sur Contrôles, cliquez sur Tous puis cliquez sur ItemsPresenter. Dessinez le ItemsPresenter sur la planche graphique dans la colonne de gauche de la ListBox .

21. Une fois ItemsPresenter sélectionné dans le panneau Objets et chronologie, dans la catégorie Disposition du panneau Propriétés, à droite de la zone Largeur, cliquez sur Options avancées, puis sur Réinitialiser. Répétez l’opération pour Hauteur.

22. Générez votre projet (CTRL+MAJ+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 style pour le contrôle ScrollBar (barre de défilement) comme décrit à l’étape 13.

Références

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

Voir aussi

Tâches

Utiliser le contrôle DataGrid
Utiliser le contrôle TreeView

Concepts

Conseils de conception de styles pour les contrôles Silverlight courants
SimpleListBox et SimpleListBoxItem
Application d’un style à un contrôle prenant en charge les modèles
Appliquer un style à un contrôle d'affichage de données

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