Partager via

Vue de liste

Le ListView contrôle fournit l’infrastructure pour afficher un ensemble d’éléments de données à l’aide d’une disposition ou d’une vue différente. Par exemple, vous pouvez afficher des éléments de données dans une table et trier ses colonnes.

Les ListView dérives de ListBox. En règle générale, ses éléments sont membres d’une collection de données et sont représentés en tant qu’objets ListViewItem . A ListViewItem est un ContentControl et ne peut contenir qu’un seul élément enfant. Toutefois, cet élément enfant peut être n’importe quel élément visuel.

Capture d’écran montrant une sortie ListView avec la sortie GridView affichant des informations de fichier.

Note

Les types référencés dans cet article sont disponibles dans la section Référence du code .

Le tableau suivant répertorie les tâches courantes pour l’utilisation du contrôle ListView :

Titre Descriptif
Trier une colonne de GridView lorsque l'en-tête est cliqué Découvrez comment trier une colonne GridView lorsqu’un en-tête est cliqué.
Créer un mode d’affichage personnalisé pour un ListView Découvrez comment créer un mode d’affichage personnalisé pour un ListView.
Utiliser des modèles pour styler un ListView qui utilise GridView Découvrez comment utiliser des modèles pour mettre en forme un ListView qui utilise GridView.
Créer un style pour un en-tête de colonne GridView déplacé Découvrez comment créer un style pour un en-tête de colonne GridView déplacé.
Afficher le contenu listView à l’aide d’un GridView Découvrez comment afficher le contenu ListView à l’aide d’un GridView.
Utiliser des déclencheurs pour styler les éléments sélectionnés dans un ListView Découvrez comment utiliser des déclencheurs pour styler les éléments sélectionnés dans un ListView.
Créer ListViewItems avec un CheckBox Découvrez comment créer ListViewItems avec un CheckBox.
Afficher des données à l’aide de GridViewRowPresenter Découvrez comment afficher des données à l’aide de GridViewRowPresenter.
Regrouper des éléments dans un ListView qui implémente un GridView Découvrez comment regrouper des éléments dans un ListView qui implémente un GridView.
Style d’une ligne dans un ListView qui implémente un GridView Découvrez comment mettre en forme une ligne dans un ListView qui implémente un GridView.
Modifier l’alignement horizontal d’une colonne dans un ListView Découvrez comment modifier l’alignement horizontal d’une colonne dans un ListView.
Gérer l’événement MouseDoubleClick pour chaque élément dans un ListView Découvrez comment gérer l’événement MouseDoubleClick pour chaque élément d’un ListView.

Styles et modèles

Vous pouvez modifier la valeur par défaut ControlTemplate pour donner au contrôle une apparence unique. Pour plus d’informations, consultez Quels sont les styles et les modèles ? et Comment créer un modèle pour un contrôle.

Content, propriété

Le ListView contrôle utilise la Items propriété comme propriété de contenu. Cette propriété vous permet de spécifier les éléments affichés dans le contrôle.

Pièces

Le ListView contrôle ne définit aucune partie de modèle nommée.

Lorsque vous créez un ControlTemplate pour un modèle ListView, votre modèle peut contenir un ItemsPresenter dans un ScrollViewer. ItemsPresenter affiche chaque élément dans le ListView; le ScrollViewer permet de faire défiler le contrôle. Si le ItemsPresenter n’est pas l’enfant direct du ScrollViewer, vous devez donner au ItemsPresenter le nom ItemsPresenter.

États visuels

Le tableau suivant répertorie les états visuels du ListView contrôle.

Nom VisualState Nom du VisualStateGroup Descriptif
Valide ValidationStates Le contrôle est valide et n’a aucune erreur de validation.
NonValideConcentré ValidationStates Le contrôle a une erreur de validation et a le focus clavier.
InvalideNonFocalisé ValidationStates Le contrôle a une erreur de validation, mais n'est pas focalisé au clavier.

Le tableau suivant répertorie les états du ListViewItem contrôle.

Nom VisualState Nom du VisualStateGroup Descriptif
Normale CommonStates État par défaut.
Disabled CommonStates Le contrôle est désactivé.
Survol de la souris CommonStates Le pointeur de la souris est sur l'élément de contrôle.
Focused FocusStates Le contrôle a le focus du clavier.
Floue FocusStates L'élément de contrôle n’a pas le focus du clavier.
Sélectionnée ÉtatsDeSélection L’élément est actuellement sélectionné.
Non sélectionné ÉtatsDeSélection L’élément n’est pas sélectionné.
SélectionnéNonFocalisé ÉtatsDeSélection L’élément est sélectionné, mais n’a pas le focus du clavier.
Valide ValidationStates Le contrôle est valide et n’a aucune erreur de validation.
NonValideConcentré ValidationStates Le contrôle a une erreur de validation et a le focus clavier.
InvalideNonFocalisé ValidationStates Le contrôle a une erreur de validation, mais n'est pas focalisé au clavier.

Modes d’affichage

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

L'exemple suivant montre 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>

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

Modes d’affichage pour partage

Deux ListView contrôles ne peuvent pas partager le même mode d’affichage en même temps. Si vous essayez d’utiliser le même mode d’affichage avec plusieurs ListView contrôles, une exception se produit. 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.

Liaison de données

Utilisez les propriétés Items et ItemsSource pour spécifier des éléments pour un contrôle ListView. L’exemple suivant définit la ItemsSource propriété 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.

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

Dim gvc1 As 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 un Binding dans le cadre d'une définition DataTemplate que vous utilisez pour mettre en forme les cellules d'une colonne. Dans l’exemple suivant, le DataTemplate désigné par un ResourceKey définit le Binding pour un GridViewColumn. Notez que cet exemple ne définit pas le DisplayMemberBinding parce que cela prend le pas sur le CellTemplate.

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

Mise en forme des contrôles ListView

Le ListView contrôle contient des ListViewItem objets, 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 les problèmes d’alignement entre les cellules d’un GridView, n’utilisez pas les ItemContainerStyle propriétés 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 Margin propriété dans le 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 GridView classe et ses classes associées, telles que GridViewColumn. Pour plus d’informations sur l’utilisation de GridView et ses classes associées, consultez Vue d’ensemble de GridView.

Lorsque vous définissez un contrôle ListViewItemContainerStyle et que vous spécifiez également un ItemTemplate, vous devez inclure un ContentPresenter dans le style pour que ItemTemplate fonctionne correctement.

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

Référence de code

Les objets suivants sont référencés dans cet article :

  • EmployeeInfoDataSource collecte de données. Si vous utilisez Visual Basic .NET, l’élément Window est déclaré légèrement différent de ce que vous voyez dans l’exemple de code :

    <Window x:Class="SDKSample.Window1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Loaded="OnLoad"
        xmlns:ds="clr-namespace:SDKSample">

    <Window.Resources>
        <ObjectDataProvider x:Key="EmployeeInfoDataSource" ObjectType="{x:Type ds:myEmployees}" />
    </Window.Resources>

  • EmployeeInfo classe, qui est utilisée comme type pour la EmployeeInfoDataSource collecte de données.

    public class EmployeeInfo
{
    private string _firstName;
    private string _lastName;
    private string _employeeNumber;

    public string FirstName
    {
        get {return _firstName;}
        set {_firstName = value;}
    }

    public string LastName
    {
        get {return _lastName;}
        set {_lastName = value;}
    }

    public string EmployeeNumber
    {
        get {return _employeeNumber;}
        set {_employeeNumber = value;}
    }

    public EmployeeInfo(string firstname, string lastname, string empnumber)
    {
        _firstName = firstname;
        _lastName = lastname;
        _employeeNumber = empnumber;
    }
}

    Public Class EmployeeInfo
    Private _firstName As String
    Private _lastName As String
    Private _employeeNumber As String

    Public Property FirstName() As String
        Get
            Return _firstName
        End Get
        Set(ByVal value As String)
            _firstName = value
        End Set
    End Property

    Public Property LastName() As String
        Get
            Return _lastName
        End Get
        Set(ByVal value As String)
            _lastName = value
        End Set
    End Property

    Public Property EmployeeNumber() As String
        Get
            Return _employeeNumber
        End Get
        Set(ByVal value As String)
            _employeeNumber = value
        End Set
    End Property

    Public Sub New(ByVal firstname As String, ByVal lastname As String, ByVal empnumber As String)
        _firstName = firstname
        _lastName = lastname
        _employeeNumber = empnumber
    End Sub
End Class

Voir aussi

  • Last updated on