Longtemps dénigré pour son look & feel très basique et austère, la listbox n'était utilisée qu'en dernier recours.
Maintenant, WPF (Windows Presentation Foundation) est passé par là et c'est la renaissance de ce contrôle.

La nouveauté principale des contrôles de WPF est la suivante : Un contrôle WPF fournit essentiellement un comportement.

C'est à dire : un bouton fournit une interface graphique permettant de "cliquer".
Dans notre cas, la listbox fournit une interface affichant un ensemble de données, parmi lesquelles, l'utilisateur peut réaliser une séléction

Par défaut, en glissant une listbox sur votre fenetre, vous retrouverez l'interface graphique classique :


Mais la force de WPF est de nous permettre de transformer complétement l'apparence de notre contrôle.
Ceci est permis par l'utilisation des styles et des templates de la listbox.

Par exemple, on peut transformer notre listbox en gridview :

Et oui, c'est bien une listbox !!! Comment le faire ... Tout simplement en spécifiant le comportement de ma listbox.


Spécification de la mise en forme des éléménts sous la forme d'un stackpanel 

<ItemsPanelTemplate x:Key="ItemsPanelTemplate1">
     <StackPanel IsItemsHost="True" Margin="0,0,0,10"/>
</ItemsPanelTemplate>

Spécification de la représentation d'un élément dans la liste (Une grille contenant les textboxs, checkbox et combobox nécessaires à l'affichage des informations de mon objet)

<DataTemplate x:Key="DataTemplate1">
   <Grid Width="{Binding ElementName=lstContacts, Path=ActualWidth}">
     <Grid.ColumnDefinitions>
         <ColumnDefinition SharedSizeGroup="Column_SSG_0"/>
         <ColumnDefinition SharedSizeGroup="Column_SSG_1"/>
         <ColumnDefinition SharedSizeGroup="Column_SSG_2"/>
         <ColumnDefinition SharedSizeGroup="Column_SSG_3"/>
         <ColumnDefinition SharedSizeGroup="Column_SSG_4"/>
         <ColumnDefinition SharedSizeGroup="Column_SSG_5"/>
         <ColumnDefinition SharedSizeGroup="Column_SSG_6"/>
         <ColumnDefinition SharedSizeGroup="Column_SSG_7"/>
         <ColumnDefinition SharedSizeGroup="Column_SSG_8"/>
     </Grid.ColumnDefinitions>

     <Border BorderBrush="Black" BorderThickness="1,1,0,0" Grid.Column="0">
          <Label Content="&gt;" Margin="1" HorizontalAlignment="Stretch" HorizontalContentAlignment="Center" />
     </Border>

     <Border BorderBrush="Black" BorderThickness="1,1,0,0" Grid.Column="1">
          <TextBox Text="{Binding Path=Nom}" HorizontalAlignment="Stretch"/>
     </Border>

     <Border BorderBrush="Black" BorderThickness="1,1,0,0" Grid.Column="2">
          <TextBox Text="{Binding Path=Prenom}" HorizontalAlignment="Stretch"/>
     </Border>

     <Border BorderBrush="Black" BorderThickness="1,1,0,0" Grid.Column="3">
          <TextBox Text="{Binding Path=Age}" HorizontalAlignment="Stretch"/>
     </Border>

     <Border BorderBrush="Black" BorderThickness="1,1,0,0" Grid.Column="4">
          <CheckBox IsThreeState="False" VerticalAlignment="Center" IsChecked="{Binding Path=Sexe}" HorizontalAlignment="Center"/>
     </Border>

     <Border BorderBrush="Black" BorderThickness="1,1,0,0" Grid.Column="5">
          <TextBox Text="{Binding Path=Couleur}" HorizontalAlignment="Stretch"/>
     </Border>

     <Border BorderBrush="Black" BorderThickness="1,1,0,0" Grid.Column="6">
          <ComboBox ItemsSource="{Binding Source={StaticResource OdpCommunes}}" 
                          SelectedValue="{Binding Path=Ville.Id}" 
                          SelectedValuePath="Id" 
                          DisplayMemberPath="Nom" 
                          HorizontalAlignment="Stretch"/>
     </Border>

     <Border BorderBrush="Black" BorderThickness="1,1,0,0" Grid.Column="7">
          <Image Source="../Images/Valider.png" Stretch="None"/>
     </Border>

     <Border BorderBrush="Black" BorderThickness="1,1,1,0" Grid.Column="8">
          <Image Source="../Images/action-delete.gif" Stretch="None"/>
     </Border>

     </Grid>
</DataTemplate>

Pour attacher tout cela a ma listbox, il me suffira alors d'ajouter les attributs nécessaires :

<ListBox x:Name="lstContacts"
            ItemsSource="{Binding Source={StaticResource OdpContacts}}" 
            ItemsPanel="{DynamicResource ItemsPanelTemplate1}" 
            ItemTemplate="{DynamicResource DataTemplate1}"/>

et le tour est joué ...



D'autres exemples de customisation d'une listbox :


Une liste de polices de caractères disponibles sur notre poste client


 Ou encore un graphique en histogramme avec toujours le comportement d'une listbox

 

 

Un blog tres interessant sur le même sujet : The powerful of styles and templates in WPF

Yoann Vue
Consultant Technique Pôle.Net