Vue d’ensemble de GridView
Le mode d’affichage GridView est l’un des modes d’affichage d’un contrôle ListView. La classe GridView et ses classes de prise en charge vous permettent à vos utilisateurs d’afficher 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 classe GridView et décrit son utilisation.
Qu’est-ce qu’une vue GridView ?
Le mode d’affichage GridView 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 GridView par défaut 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 données en fonction du contenu d’une colonne spécifique.
Note
Les contrôles de bouton que GridView utilise pour les en-têtes de colonne sont dérivés de ButtonBase.
L’illustration suivante montre une vue GridView du contenu ListView.
GridView colonnes sont représentées par GridViewColumn objets, qui peuvent ajuster automatiquement leur taille à leur contenu. Si vous le souhaitez, vous pouvez définir explicitement une GridViewColumn sur une largeur spécifique. Vous pouvez redimensionner les colonnes en faisant glisser le séparateur 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 la EmployeeInfoDataSource comme ItemsSource. Les définitions de propriétés de DisplayMemberBinding lient le contenu de GridViewColumn aux catégories de données de 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 :
GridView : disposition et style
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, CellTemplateou CellTemplateSelector. La propriété DisplayMemberBinding 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, GridViewColumnet GridViewColumnHeader. Pour plus d’informations, consultez Vue d’ensemble des modèles et styles d’en-tête de colonne GridView.
Ajout d’éléments visuels à un GridView
Pour ajouter des éléments visuels, tels que des 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.
Styliser les lignes dans un GridView
Utilisez les classes GridViewRowPresenter et GridViewHeaderRowPresenter pour mettre en forme et afficher les lignes d’un GridView. Pour un exemple de comment styler les lignes dans un mode d'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 ou spécifiez un ControlTemplate qui ajoute un CheckBox à un ItemContainerStyle défini sur un contrôle 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 mode d’affichage GridView.
Par exemple, pour ajouter un CheckBox aux lignes en mode affichage GridView, ajoutez le CheckBox à un DataTemplate, puis définissez la propriété CellTemplate sur cette 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 telles que le tri des 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 de GridView pour l’interaction utilisateur :
réorganiser 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é.
Redimensionner une colonne à 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.
Note
Vous pouvez définir la propriété Width sur
Double.NaNpour produire le même effet.Sélectionner des éléments de ligne.
Les utilisateurs peuvent sélectionner un ou plusieurs éléments dans un GridView.
Si vous souhaitez modifier Style pour un élément sélectionné, consultez Utiliser des déclencheurs pour appliquer un style aux éléments sélectionnés dans une ListView.
Faites défiler pour voir le contenu qui n'est pas initialement visible à l'écran.
Si la taille de l'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 contrôle ScrollViewer. Une ScrollBar est masquée 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 ils défilent horizontalement.
Interagir 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 comme 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 contrôle ListView.
Obtention d’autres vues personnalisées
La classe GridView, dérivée de la classe abstraite ViewBase, n’est qu’un des modes d’affichage possibles pour la classe ListView. 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 d’affichage personnalisé pour unListView .
Classes de support pour GridView
Les classes suivantes prennent en charge le mode d’affichage GridView.
Voir aussi
.NET Desktop feedback