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

Article
10/09/2014

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

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 :

JJ170044.3cc2d3af-6781-4937-b068-c3448a56406d(fr-fr,VS.120).png

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 de l’état est activé et toutes les modifications que vous effectuez sont enregistrées pour cet état. Pour désactiver l’enregistrement de l’état, cliquez sur le bouton d’enregistrement JJ170044.0dcc6415-6d4e-4fcf-a9a3-eb4664cb6cbc(fr-fr,VS.120).png 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 :

ListBox

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.

Notes

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.

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"/>
```

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>

Ajoutez une balise de fermeture Grid (</Grid>) après le code que vous venez de coller.
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.
Dans le panneau Objets et chronologie, cliquez avec le bouton droit sur ScrollViewer, puis cliquez sur Supprimer.
Appuyez sur Shift et sélectionnez les deux éléments TextBlock. Cliquez avec le bouton droit, puis cliquez sur Couper.
Cliquez sur **Rétablir l’étendue à ** et appuyez sur CTRL+V quatre fois pour créer huit nouveaux éléments TextBlock. Appuyez sur Shift et sélectionnez tous les éléments TextBlock.
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.
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.
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.
Dans le panneau Objets et chronologie, cliquez avec le bouton droit sur ContentPresenter, puis sur Supprimer.
Dans le panneau Objets et chronologie, cliquez sur Racine. Dans le panneau Parties, double-cliquez sur ScrollContentPresenter.
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 conception de styles pour le contrôle ScrollBar des contrôles Silverlight dans Blend.
Cliquez sur **Rétablir l’étendue à ** pour revenir au modèle ScrollViewer.
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 :
Pour la colonne de droite, cliquez deux fois sur **Étoile **. L’icône Automatique s’affiche.
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.
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.
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}"
```
Notes

Vous pouvez également définir ces propriétés à l’aide d’expressions personnalisées.
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.
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.
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 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.