Partager via

Vue d’ensemble de GridView

GridView le mode d’affichage est l’un des modes d’affichage d’un ListView contrôle. La GridView classe et ses classes de prise en charge permettent à vous et vos utilisateurs de visualiser des collections d'éléments dans un tableau qui utilise généralement des boutons comme en-têtes de colonnes interactifs. Cette rubrique présente la GridView classe et décrit son utilisation.

Qu’est-ce qu’une vue GridView ?

Le GridView mode d’affichage affiche une liste d’éléments de données en liant des champs de données à des colonnes et en affichant un en-tête de colonne pour identifier le champ. Le style par défaut GridView implémente des boutons en tant qu’en-têtes de colonne. En utilisant des boutons pour les en-têtes de colonne, vous pouvez implémenter des fonctionnalités d’interaction utilisateur importantes ; Par exemple, les utilisateurs peuvent cliquer sur l’en-tête de colonne pour trier GridView les données en fonction du contenu d’une colonne spécifique.

Remarque

Les contrôles de bouton qui GridView utilisent pour les en-têtes de colonne sont dérivés de ButtonBase.

L’illustration suivante montre une GridView vue du contenu de ListView.

Capture d’écran montrant la vue GridView du contenu ListView.

GridView les colonnes sont représentées par GridViewColumn des objets, qui peuvent automatiquement dimensionner leur contenu. Si vous le souhaitez, vous pouvez définir explicitement une GridViewColumn largeur spécifique. Vous pouvez redimensionner les colonnes en faisant glisser la poignée entre les en-têtes de colonne. Vous pouvez également ajouter, supprimer, remplacer et réorganiser dynamiquement des colonnes, car cette fonctionnalité est intégrée GridView. Toutefois, GridView ne peut pas mettre directement à jour les données qu’il affiche.

L’exemple suivant montre comment définir un GridView qui affiche les données des employés. Dans cet exemple, ListView définit le EmployeeInfoDataSource comme le ItemsSource. Les définitions de propriétés de DisplayMemberBinding lient le contenu GridViewColumn aux catégories de données EmployeeInfoDataSource.


<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 le tableau créé par l’exemple précédent. Le contrôle GridView affiche les données d’un objet ItemsSource :

Capture d’écran montrant une liste ListView avec la sortie GridView.

Mise en page et style GridView

Les cellules de colonne et l’en-tête de colonne d’un GridViewColumn ont la même largeur. Par défaut, chaque colonne dimensionne sa largeur pour qu’elle corresponde à son contenu. Si vous le souhaitez, vous pouvez définir une colonne sur une largeur fixe.

Le contenu des données associées s’affiche dans des lignes horizontales. Par exemple, dans l’illustration précédente, le nom, le prénom et le numéro d’ID de chaque employé sont affichés sous la forme d’un ensemble, car ils apparaissent dans une ligne horizontale.

Définition et style de colonnes dans un GridView

Lorsque vous définissez le champ de données à afficher dans un GridViewColumn, utilisez les propriétés DisplayMemberBinding, CellTemplate ou CellTemplateSelector. La DisplayMemberBinding propriété est prioritaire sur l’une des propriétés du modèle.

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

Pour spécifier des propriétés de modèle et de style pour les en-têtes de colonne, utilisez les classes GridView, GridViewColumn, et GridViewColumnHeader. Pour plus d’informations, consultez Vue d’ensemble des styles et modèles d’en-tête de colonne GridView.

Ajout d’éléments visuels à un GridView

Pour ajouter des éléments visuels, tels que les contrôles CheckBox et Button, à un mode d’affichage GridView, utilisez des modèles ou des styles.

Si vous définissez explicitement un élément visuel en tant qu’élément de données, il ne peut apparaître qu’une seule fois dans un GridView. Cette limitation existe, car un élément ne peut avoir qu’un seul parent et, par conséquent, ne peut apparaître qu’une seule fois dans l’arborescence visuelle.

Personnalisation des lignes dans une GridView

Utilisez les classes GridViewRowPresenter et GridViewHeaderRowPresenter pour mettre en forme et afficher les lignes d’un GridView. Pour obtenir un exemple de la manière de styliser des lignes en mode affichage GridView, consultez Styliser une ligne dans un ListView qui implémente un GridView.

Problèmes d’alignement lorsque vous utilisez ItemContainerStyle

Pour éviter les problèmes d’alignement entre les en-têtes de colonne et les cellules, ne définissez pas de propriété ou spécifiez un modèle qui affecte la largeur d’un élément dans un ItemContainerStyle. Par exemple, ne définissez pas la propriété Margin ni ne spécifiez un ControlTemplate qui ajoute un CheckBox à un ItemContainerStyle qui est défini sur un composant ListView. Au lieu de cela, spécifiez les propriétés et les modèles qui affectent directement la largeur des colonnes sur les classes qui définissent un GridView mode d’affichage.

Par exemple, pour ajouter une CheckBox aux lignes en mode GridView affichage, ajoutez CheckBox à un DataTemplate, puis définissez la propriété CellTemplate sur DataTemplate.

Interactions utilisateur avec un GridView

Lorsque vous utilisez un GridView dans votre application, les utilisateurs peuvent interagir avec et modifier la mise en forme du GridView. Par exemple, les utilisateurs peuvent réorganiser des colonnes, redimensionner une colonne, sélectionner des éléments dans une table et parcourir le contenu. Vous pouvez également définir un gestionnaire d’événements qui répond lorsqu’un utilisateur clique sur le bouton d’en-tête de colonne. Le gestionnaire d'événements peut effectuer des opérations comme trier les données affichées dans le GridView en fonction du contenu d'une colonne.

La liste suivante décrit plus en détail les fonctionnalités d’utilisation GridView pour l’interaction utilisateur :

  • Réorganisez les colonnes à l’aide de la méthode glisser-déplacer.

    Les utilisateurs peuvent réorganiser des colonnes dans un GridView en appuyant sur le bouton gauche de la souris pendant qu’il se trouve sur un en-tête de colonne, puis en faisant glisser cette colonne vers une nouvelle position. Alors que l’utilisateur fait glisser l’en-tête de colonne, une version flottante de l’en-tête s’affiche, ainsi qu’une ligne noire unie qui indique où insérer la colonne.

    Si vous souhaitez modifier le style par défaut pour la version flottante d’un en-tête, spécifiez un ControlTemplate pour un type GridViewColumnHeader déclenché lorsque la propriété Role est définie sur Floating. Pour plus d’informations, consultez Créer un style pour un en-tête de colonne GridView déplacé.

  • Redimensionnez une colonne en fonction de son contenu.

    Les utilisateurs peuvent double-cliquer sur le gripper à droite d’un en-tête de colonne pour redimensionner une colonne en fonction de son contenu.

    Remarque

    Vous pouvez définir la propriété Width sur Double.NaN pour produire le même effet.

  • Sélectionnez les éléments de ligne.

    Les utilisateurs peuvent sélectionner un ou plusieurs éléments dans un GridView.

    Si vous souhaitez modifier l’élément Style sélectionné, consultez Utiliser des déclencheurs pour styler les éléments sélectionnés dans un ListView.

  • Faites défiler pour afficher le contenu qui n’est pas initialement visible sur l’écran.

    Si la taille de l’élément GridView n’est pas suffisamment grande pour afficher tous les éléments, les utilisateurs peuvent faire défiler horizontalement ou verticalement à l’aide de barres de défilement fournies par un ScrollViewer contrôle. Un ScrollBar est masqué si tout le contenu est visible dans une direction spécifique. Les en-têtes de colonne ne défilent pas avec une barre de défilement verticale, mais défilent horizontalement.

  • Interagissez avec les colonnes en cliquant sur les boutons d’en-tête de colonne.

    Lorsque les utilisateurs cliquent sur un bouton d’en-tête de colonne, ils peuvent trier les données affichées dans la colonne si vous avez fourni un algorithme de tri.

    Vous pouvez gérer l’événement Click pour les boutons d’en-tête de colonne afin de fournir des fonctionnalités telles qu’un algorithme de tri. Pour gérer l’événement Click pour un en-tête de colonne unique, définissez un gestionnaire d’événements sur le GridViewColumnHeader. Pour définir un gestionnaire d’événements qui gère l’événement Click pour tous les en-têtes de colonne, définissez le gestionnaire sur le ListView contrôle.

Obtention d’autres vues personnalisées

La GridView classe, dérivée de la ViewBase classe abstraite, n’est qu’un des modes d’affichage possibles pour la ListView classe. Vous pouvez créer d'autres vues personnalisées pour ListView en dérivant de la classe ViewBase. Pour obtenir un exemple de mode d’affichage personnalisé, consultez Créer un mode Affichage personnalisé pour un ListView.

Classes de prise en charge GridView

Les classes suivantes prennent en charge le mode d’affichage GridView .

Voir aussi