Vue d'ensemble de ListView

  • Article

Le contrôle ListView fournit l'infrastructure pour afficher un groupe d'éléments de données dans différentes dispositions ou différents affichages. Par exemple, il se peut qu'un utilisateur souhaite afficher des éléments de données dans une table et trier ses colonnes.

Cette rubrique comprend les sections suivantes.

  • Qu'est-ce qu'un ListView ?
  • Définition d'un mode d'affichage pour un ListView
  • Liaison de données à un ListView
  • Application d'un style à un ListView qui implémente un GridView
  • Partage du même mode d'affichage
  • Création d'un mode d'affichage personnalisé
  • Rubriques connexes

Qu'est-ce qu'un ListView ?

Le contrôle ListView est un ItemsControl dérivé de ListBox. En général, ses éléments sont les membres d'une collection de données et sont représentés comme des objets ListViewItem. Un ListViewItem est un ContentControl qui ne peut contenir qu'un seul élément enfant. Toutefois, cet élément enfant peut être n'importe quel élément visuel.

Définition d'un mode d'affichage pour un ListView

Pour spécifier un mode d'affichage pour le contenu d'un contrôle ListView, définissez la propriété View. L'un des modes d'affichage fourni par Windows Presentation Foundation (WPF) est GridView, qui affiche une collection d'éléments de données dans une table avec des colonnes personnalisables.

L'exemple suivant indique comment définir un GridView pour un contrôle ListView qui affiche des informations sur les employés.


<ListView ItemsSource="{Binding Source=
                       {StaticResource EmployeeInfoDataSource}}">

  <ListView.View>

    <GridView AllowsColumnReorder="true"
              ColumnHeaderToolTip="Employee Information">

      <GridViewColumn DisplayMemberBinding=
                          "{Binding Path=FirstName}" 
                      Header="First Name" Width="100"/>

                  <GridViewColumn DisplayMemberBinding=
                          "{Binding Path=LastName}" 
                      Width="100">
                      <GridViewColumnHeader>Last Name
                          <GridViewColumnHeader.ContextMenu>
                          <ContextMenu  MenuItem.Click="LastNameCM_Click"  
                                        Name="LastNameCM">
                              <MenuItem Header="Ascending" />
                              <MenuItem Header="Descending" />
                          </ContextMenu>
                          </GridViewColumnHeader.ContextMenu>
                      </GridViewColumnHeader>
                  </GridViewColumn>

                  <GridViewColumn DisplayMemberBinding=
                          "{Binding Path=EmployeeNumber}" 
                      Header="Employee No." Width="100"/>
    </GridView>

  </ListView.View>
</ListView>

L'illustration suivante montre comment les données apparaissent pour l'exemple précédent.

Sortie de ListView avec GridView

Vous pouvez créer un mode d'affichage personnalisé en définissant une classe qui hérite de la classe ViewBase. La classe ViewBase fournit l'infrastructure dont vous avez besoin pour créer un affichage personnalisé. Pour plus d'informations sur la création d'un affichage personnalisé, consultez Comment : créer un mode d'affichage personnalisé pour un ListView.

Liaison de données à un ListView

Utilisez les propriétés Items et ItemsSource afin de spécifier des éléments pour un contrôle ListView. L'exemple suivant définit la propriété ItemsSource sur une collection de données appelée EmployeeInfoDataSource.

<ListView ItemsSource="{Binding Source=
                       {StaticResource EmployeeInfoDataSource}}">

Dans un GridView, les objets GridViewColumn sont liés à des champs de données spécifiés. L'exemple suivant lie un objet GridViewColumn à un champ de données en spécifiant une Binding pour la propriété DisplayMemberBinding.

Dim gvc1 As New GridViewColumn()
gvc1.DisplayMemberBinding = New Binding("FirstName")
gvc1.Header = "FirstName"
gvc1.Width = 100

GridViewColumn gvc1 = new GridViewColumn();
gvc1.DisplayMemberBinding = new Binding("FirstName");
gvc1.Header = "FirstName";
gvc1.Width = 100;

<GridViewColumn DisplayMemberBinding=
                    "{Binding Path=FirstName}" 
                Header="First Name" Width="100"/>

Vous pouvez également spécifier une Binding dans la définition d'un DataTemplate que vous utilisez pour appliquer un style aux cellules d'une colonne. Dans l'exemple suivant, le DataTemplate identifié avec une ResourceKey définit la Binding pour un GridViewColumn. Notez que cet exemple ne définit pas le DisplayMemberBinding car cela substituerait la liaison spécifiée par DataTemplate.

<DataTemplate x:Key="myCellTemplateMonth">
  <DockPanel>
    <TextBlock Foreground="DarkBlue" HorizontalAlignment="Center">
      <TextBlock.Text>
        <Binding Path="Month"/>
      </TextBlock.Text>
    </TextBlock>
  </DockPanel>
</DataTemplate>

<GridViewColumn Header="Month" Width="80"
      CellTemplate="{StaticResource myCellTemplateMonth}"/>

Application d'un style à un ListView qui implémente un GridView

Le contrôle ListView contient des objets ListViewItem qui représentent les éléments de données affichés. Vous pouvez utiliser les propriétés suivantes pour définir le contenu et le style des éléments de données :

Pour éviter des problèmes d'alignement entre les cellules d'un GridView, n'utilisez pas ItemContainerStyle pour définir des propriétés ou ajouter du contenu qui affecte la largeur d'un élément dans un ListView. Par exemple, un problème d'alignement peut se produire lorsque vous définissez la propriété Margin dans ItemContainerStyle. Pour spécifier des propriétés ou définir du contenu qui affecte la largeur des éléments dans un GridView, utilisez les propriétés de la classe GridView et de ses classes associées, telles que GridViewColumn.

Pour plus d'informations sur la manière d'utiliser GridView et ses classes prises en charge, consultez Vue d'ensemble de GridView.

Si vous définissez un ItemContainerStyle pour un contrôle ListView et que vous définissez également un ItemTemplate, vous devez inclure un ContentPresenter dans le style afin que le ItemTemplate fonctionne correctement.

N'utilisez pas les propriétés HorizontalContentAlignment et VerticalContentAlignment pour le contenu ListView affiché à l'aide d'un GridView. Pour spécifier l'alignement du contenu d'une colonne d'un GridView, définissez un CellTemplate.

Partage du même mode d'affichage

Deux contrôles ListView ne peuvent pas partager le même mode d'affichage au même moment. Si vous essayez d'utiliser le même mode d'affichage avec plus d'un contrôle ListView, une exception est levée.

Pour spécifier un mode d'affichage qui peut être utilisé simultanément par plus d'un ListView, utilisez des modèles ou des styles. Pour obtenir un exemple expliquant comme définir des vues en tant que Resources, consultez ListView avec plusieurs vues, exemple.

Création d'un mode d'affichage personnalisé

Les affichages personnalisés tels que GridView sont dérivés de la classe abstraite ViewBase qui fournit les outils pour afficher des éléments de données représentés en tant qu'objets ListViewItem.

Pour obtenir un exemple de mode d'affichage personnalisé, consultez ListView avec plusieurs vues, exemple.

Voir aussi

Référence

GridView

ListView

ListViewItem

Binding

Concepts

Vue d'ensemble de GridView

Optimisation des performances : contrôles

Autres ressources

Rubriques "Comment utiliser le ListView"