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, à vous et à vos utilisateurs, de voir des collections d'éléments dans une table qui utilise généralement des boutons comme en-têtes de colonnes interactifs. Cette rubrique introduit la classe GridView et décrit son utilisation.
Cette rubrique comprend les sections suivantes.
- Qu'est-ce qu'une vue GridView ?
- Disposition et style de GridView
- Interactions utilisateur avec un GridView
- Obtention d'autres vues personnalisées
- Classes de prises en charge du GridView
- Rubriques connexes
Qu'est-ce qu'une vue GridView ?
Le mode d'affichage GridView affiche une liste des é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 comme en-têtes de colonnes. En utilisant des boutons comme en-têtes de colonnes, vous pouvez implémenter d'importantes fonctionnalités d'interaction avec l'utilisateur. Par exemple, les utilisateurs peuvent cliquer sur l'en-tête de colonne pour trier des données GridView d'après le contenu d'une colonne spécifique.
.gif "Remarque") Remarque |
|---|
Les contrôles bouton que GridView utilise comme en-têtes de colonnes sont dérivés de ButtonBase. |
L'illustration suivante montre une vue GridView du contenu ListView.
Vue GridView d'un contenu ListView
.png "Vue de la liste mise en forme avec des styles")
Les colonnes GridView sont représentées par des objets GridViewColumn, dont la taille s'adapte automatiquement à leur contenu. Vous pouvez éventuellement affecter explicitement une largeur spécifique à GridViewColumn. Vous pouvez redimensionner des colonnes en faisant glisser la pince entre les en-têtes de colonnes. Vous pouvez également ajouter, supprimer, remplacer et réorganiser dynamiquement des colonnes, car ces fonctionnalités sont intégrées dans GridView. Toutefois, GridView ne peut pas directement mettre à jour les données qu'il affiche.
L'exemple suivant indique comment définir un GridView qui affiche des données d'employé. Dans cet exemple, ListView définit EmployeeInfoDataSource comme ItemsSource. Les définitions de propriété de GridViewColumn lient le contenu DisplayMemberBinding 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 la table créée par l'exemple précédent.
GridView qui affiche des données à partir d'un ItemsSource
.jpg "Sortie de ListView avec GridView")
Disposition et style de GridView
Les cellules 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. Vous pouvez éventuellement affecter une largeur fixe à une colonne.
Le contenu des données connexes s'affiche dans les lignes horizontales. Par exemple, dans l'illustration précédente, le nom, le prénom et le matricule de chaque employé s'affichent comme un jeu, parce qu'ils apparaissent dans une ligne horizontale.
Définition et application d'un 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 propriété DisplayMemberBinding est prioritaire sur l'une ou l'autre des propriétés de modèle.
Pour spécifier l'alignement du contenu d'une colonne d'un GridView, définissez un CellTemplate. N'utilisez pas les propriétés HorizontalContentAlignment et VerticalContentAlignment pour le contenu ListView affiché à l'aide d'un GridView.
Pour spécifier les propriétés de modèle et de style des en-têtes de colonnes, utilisez les classes GridView, GridViewColumn et 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 comme é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 ne peut dès lors apparaître qu'une seule fois dans l'arborescence visuelle.
Application d'un style à des lignes dans un GridView
Utilisez les classes GridViewRowPresenter et GridViewHeaderRowPresenter pour mettre en forme et afficher les lignes d'un GridView. Pour obtenir un exemple sur la manière d'appliquer un style à des lignes dans un mode d'affichage GridView, consultez Comment : appliquer un style à une ligne dans un ListView implémentant un GridView.
Problèmes d'alignement lorsque vous utilisez ItemContainerStyle
Pour éviter tout problème d'alignement entre en-têtes et cellules de colonne, ne définissez pas de propriété ou ne spécifiez pas de modèle qui affecte la largeur d'un élément dans un ItemContainerStyle. Par exemple, ne définissez pas la propriété Margin ou ne spécifiez pas de ControlTemplate qui ajoute un CheckBox à un ItemContainerStyle défini sur un contrôle ListView. À la place, spécifiez les propriétés et les modèles qui affectent directement la largeur de colonne aux classes qui définissent un mode d'affichage GridView.
Par exemple, pour ajouter un CheckBox aux lignes en mode d'affichage GridView, ajoutez le CheckBox à un DataTemplate, puis affectez la propriété CellTemplate à ce 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 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 comme trier les données affichées dans le GridView d'après le contenu d'une colonne.
La liste suivante aborde dans plus de détail les fonctions de GridView pour l'interaction avec l'utilisateur :
Réorganiser des colonnes à l'aide de la méthode du glisser-déplacer.
Les utilisateurs peuvent réorganiser des colonnes dans un GridView en appuyant sur le bouton gauche de la souris lorsque le pointeur se trouve sur un en-tête de colonne et en faisant ensuite 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.
Pour modifier le style par défaut de la version flottante d'un en-tête, spécifiez un ControlTemplate pour un type GridViewColumnHeader qui est déclenché lorsque la propriété Role a la valeur Floating. Pour plus d'informations, consultez Comment : 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 pince située à droite d'un en-tête de colonne afin de redimensionner une colonne en fonction de son contenu.
RemarqueVous pouvez affecter la valeur Double.NaN à la propriété Width pour 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.
Pour modifier le Style d'un élément sélectionné, consultez Comment : utiliser des déclencheurs pour appliquer un style aux éléments sélectionnés d'un ListView.
Faire défiler pour consulter le contenu qui n'est pas initialement visible à l'écran.
Si le GridView n'est pas assez grand pour afficher tous les éléments, les utilisateurs peuvent faire défiler horizontalement ou verticalement en utilisant des barres de défilement, fournies par un contrôle ScrollViewer. Une ScrollBar est masquée si tout le contenu est visible dans un sens spécifique. Vous ne pouvez pas faire défiler des en-têtes de colonnes verticalement mais bien horizontalement.
Interagir avec des 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 dans le GridViewColumnHeader. Pour définir un gestionnaire d'événements qui gère l'événement Click pour tous les en-têtes de colonnes, 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 que l'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 Comment : créer un mode d'affichage personnalisé pour un ListView.
Classes de prises en charge du GridView
Les classes suivantes prennent en charge le mode d'affichage GridView.
Voir aussi
Tâches
Comment : trier une colonne GridView lors d'un clic sur un en-tête