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 vous permettent ainsi à vos utilisateurs d’afficher des collections d’éléments dans un tableau qui utilise généralement des boutons comme en-têtes de colonne interactifs. Cette rubrique présente la GridView classe et décrit son utilisation.
Qu’est-ce qu’un affichage de grille ou 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 ListView contenu.
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 barre de redimensionnement entre les en-têtes de colonnes. 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 EmployeeInfoDataSourceItemsSourcevaleur . Définitions de propriétés de liaison GridViewColumn de DisplayMemberBinding contenu à des EmployeeInfoDataSource catégories de données.
<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 la table créée par l’exemple précédent. Le contrôle GridView affiche les données d’un objet ItemsSource :
Disposition et style de 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 adapte sa largeur à son contenu. Si vous le souhaitez, vous pouvez définir une colonne sur une largeur fixe.
Le contenu des données connexes s’affiche sur des lignes horizontales. Par exemple, dans l’illustration précédente, le nom, le prénom et le numéro d’identification de chaque employé s’affichent en tant qu’ensemble parce qu’ils apparaissent dans une ligne horizontale.
Définir et appliquer un style aux colonnes dans GridView
Lorsque vous définissez le champ de données à afficher dans un GridViewColumn, utilisez le ou CellTemplateCellTemplateSelector les DisplayMemberBindingpropriétés. 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 un CellTemplate. N’utilisez pas les propriétés et VerticalContentAlignment les propriétés pour ListView le HorizontalContentAlignment contenu 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 et GridViewColumnHeader les GridViewGridViewColumnclasses. 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 affichage GridView
Pour ajouter des éléments visuels, tels que CheckBox des contrôles et Button des contrôles, à un GridView mode d’affichage, 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 parce qu’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.
Appliquer un style à des lignes dans un affichage GridView
Utilisez les classes et GridViewHeaderRowPresenter les GridViewRowPresenter classes pour mettre en forme et afficher les lignes d’un GridView. Pour obtenir un exemple de style de lignes en GridView mode Affichage, consultez Style a Row in a ListView That Implements a 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 Margin propriété ou spécifiez un ControlTemplate élément qui ajoute un CheckBox à un ItemContainerStyle contrôle défini sur un ListView contrôle. 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 GridView mode affichage, ajoutez-la CheckBox à un DataTemplate, puis définissez la CellTemplate propriété sur celle-ci DataTemplate.
Interactions utilisateur avec un affichage GridView
Lorsque vous utilisez une GridView application, les utilisateurs peuvent interagir avec et modifier la mise en forme du GridViewfichier . Par exemple, les utilisateurs peuvent réorganiser les colonnes, redimensionner une colonne, sélectionner des éléments dans une table et faire défiler 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 contenu d’une colonne.
La liste suivante décrit plus en détail les fonctionnalités d’utilisation 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. Lorsque 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 ControlTemplateGridViewColumnHeader type déclenché lorsque la Role propriété est définie Floatingsur . Pour plus d’informations, consultez Créer un style pour un en-tête de colonne GridView déplacé.
Redimensionner une colonne selon son contenu.
Les utilisateurs peuvent double-cliquer sur la barre de redimensionnement à droite d’un en-tête de colonne afin de redimensionner une colonne en fonction de son contenu.
Remarque
Vous pouvez définir la Width propriété pour
Double.NaNproduire le même effet.Sélectionner des éléments de lignes.
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.
Faire défiler pour afficher le contenu qui n’est pas initialement visible à 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 colonnes ne défilent pas avec une barre de défilement verticale. 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 qui s’affichent 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 en ListView dérivant de la ViewBase classe. Pour obtenir un exemple de mode d’affichage personnalisé, consultez Créer un mode d’affichage personnalisé pour un ListView.
Classes de prise en charge pour GridView
Les classes suivantes prennent en charge le mode d’affichage GridView .
Voir aussi
.NET Desktop feedback