Vue d'ensemble de GridViewGridView Overview

GridViewle mode d’affichage est l’un des modes d' ListView affichage d’un contrôle.GridView view mode is one of the view modes for a ListView control. La GridView classe et ses classes de prise en charge permettent à vous et à vos utilisateurs d’afficher des collections d’éléments dans une table qui utilise généralement des boutons comme en-têtes de colonnes interactifs.The GridView class and its supporting classes enable you and your users to view item collections in a table that typically uses buttons as interactive column headers. Cette rubrique présente la GridView classe et décrit son utilisation.This topic introduces the GridView class and outlines its use.

Qu’est-ce qu’un affichage de grille ou GridView ?What Is a GridView View?

Le GridView mode d’affichage affiche une liste d’éléments de données en liant les champs de données aux colonnes et en affichant un en-tête de colonne pour identifier le champ.The GridView view mode displays a list of data items by binding data fields to columns and by displaying a column header to identify the field. Le style GridView par défaut implémente des boutons comme en-têtes de colonnes.The default GridView style implements buttons as column headers. En utilisant des boutons pour les en-têtes de colonnes, vous pouvez implémenter des fonctionnalités d’interaction utilisateur importantes. par exemple, les utilisateurs peuvent cliquer sur l’en- GridView tête de colonne pour trier les données en fonction du contenu d’une colonne spécifique.By using buttons for column headers, you can implement important user interaction capabilities; for example, users can click the column header to sort GridView data according to the contents of a specific column.

Notes

Les contrôles bouton que GridView utilise pour les en-têtes de colonnes ButtonBasesont dérivés de.The button controls that GridView uses for column headers are derived from ButtonBase.

L’illustration suivante montre une GridView vue du ListView contenu.The following illustration shows a GridView view of ListView content.

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

GridViewles colonnes sont représentées par GridViewColumn des objets, qui peuvent être automatiquement redimensionnés en fonction de leur contenu.GridView columns are represented by GridViewColumn objects, which can automatically size to their content. Si vous le souhaitez, vous pouvez affecter GridViewColumn explicitement à une largeur spécifique.Optionally, you can explicitly set a GridViewColumn to a specific width. Vous pouvez redimensionner les colonnes en faisant glisser la barre de redimensionnement entre les en-têtes de colonnes.You can resize columns by dragging the gripper between column headers. Vous pouvez également ajouter, supprimer, remplacer et réorganiser des colonnes dynamiquement, car cette fonctionnalité est intégrée GridViewà.You can also dynamically add, remove, replace, and reorder columns because this functionality is built into GridView. Toutefois, GridView ne peut pas mettre à jour directement les données qu’il affiche.However, GridView cannot directly update the data that it displays.

L’exemple suivant montre comment définir un GridView qui affiche les données des employés.The following example shows how to define a GridView that displays employee data. Dans cet exemple, ListView définit le EmployeeInfoDataSource comme ItemsSource.In this example, ListView defines the EmployeeInfoDataSource as the ItemsSource. Définitions de propriétés de DisplayMemberBinding lier GridViewColumn du contenu EmployeeInfoDataSource à des catégories de données.The property definitions of DisplayMemberBinding bind GridViewColumn content to EmployeeInfoDataSource data categories.


<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.The following illustration shows the table that the previous example creates. Le contrôle GridView affiche les données d’un objet ItemsSource:The GridView control displays data from an ItemsSource object:

Capture d’écran montrant une sortie de contrôle ListView avec GridView.

Disposition et style de GridViewGridView Layout and Style

Les cellules de colonne et l’en-tête GridViewColumn de colonne d’un ont la même largeur.The column cells and the column header of a GridViewColumn have the same width. Par défaut, chaque colonne adapte sa largeur à son contenu.By default, each column sizes its width to fit its content. Si vous le souhaitez, vous pouvez définir une colonne sur une largeur fixe.Optionally, you can set a column to a fixed width.

Le contenu des données connexes s’affiche sur des lignes horizontales.Related data content displays in horizontal rows. 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.For example, in the previous illustration, each employee's last name, first name, and ID number are displayed as a set because they appear in a horizontal row.

Définir et appliquer un style aux colonnes dans GridViewDefining and Styling Columns in a GridView

Quand vous définissez le champ de données à afficher GridViewColumndans un, DisplayMemberBindingutilisez CellTemplateles propriétés CellTemplateSelector , ou.When defining the data field to display in a GridViewColumn, use the DisplayMemberBinding, CellTemplate, or CellTemplateSelector properties. La DisplayMemberBinding propriété est prioritaire sur l’une ou l’autre des propriétés de modèle.The DisplayMemberBinding property takes precedence over either of the template properties.

Pour spécifier l’alignement du contenu dans une colonne d’un GridView, définissez un CellTemplate.To specify the alignment of content in a column of a GridView, define a CellTemplate. N’utilisez pas les HorizontalContentAlignment propriétés VerticalContentAlignment et pour ListView le contenu qui s’affiche à l' GridViewaide d’un.Do not use the HorizontalContentAlignment and VerticalContentAlignment properties for ListView content that is displayed by using a GridView.

Pour spécifier des propriétés de style et de modèle pour les en- GridViewtêtes GridViewColumnde colonnes GridViewColumnHeader , utilisez les classes, et.To specify template and style properties for column headers, use the GridView, GridViewColumn, and GridViewColumnHeader classes. Pour plus d’informations, consultez Vue d’ensemble des modèles et styles d’en-tête de colonne GridView.For more information, see GridView Column Header Styles and Templates Overview.

Ajout d’éléments visuels à un affichage GridViewAdding Visual Elements to a GridView

Pour ajouter des éléments visuels, tels CheckBox que Button les contrôles et, GridView à un mode d’affichage, utilisez des modèles ou des styles.To add visual elements, such as CheckBox and Button controls, to a GridView view mode, use templates or 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 GridViewseule fois dans un.If you explicitly define a visual element as a data item, it can appear only one time in a 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.This limitation exists because an element can have only one parent and therefore, can appear only one time in the visual tree.

Appliquer un style à des lignes dans un affichage GridViewStyling Rows in a GridView

Utilisez les GridViewRowPresenter classes GridViewHeaderRowPresenter et pour mettre en forme et afficher les lignes GridViewd’un.Use the GridViewRowPresenter and GridViewHeaderRowPresenter classes to format and display the rows of a GridView. Pour obtenir un exemple de style de lignes dans un GridView mode d’affichage, consultez appliquer un style à une ligne dans un ListView implémentant un GridView.For an example of how to style rows in a GridView view mode, see Style a Row in a ListView That Implements a GridView.

Problèmes d’alignement lorsque vous utilisez ItemContainerStyleAlignment Issues When You Use ItemContainerStyle

Pour éviter les problèmes d’alignement entre les en-têtes de colonnes et les cellules, ne définissez pas une propriété ou spécifiez un modèle qui affecte ItemContainerStylela largeur d’un élément dans un.To prevent alignment issues between column headers and cells, do not set a property or specify a template that affects the width of an item in an ItemContainerStyle. Par exemple, ne définissez pas la Margin propriété ou spécifiez ControlTemplate un qui ajoute CheckBox un à ItemContainerStyle un défini sur un ListView contrôle.For example, do not set the Margin property or specify a ControlTemplate that adds a CheckBox to an ItemContainerStyle that is defined on a ListView control. Au lieu de cela, spécifiez les propriétés et les modèles qui affectent directement la largeur GridView de colonne sur les classes qui définissent un mode d’affichage.Instead, specify the properties and templates that affect column width directly on classes that define a GridView view mode.

Par exemple, pour ajouter un CheckBox aux lignes en GridView mode CheckBox affichage, ajoutez à un DataTemplate, puis affectez à DataTemplatela propriété CellTemplate la valeur.For example, to add a CheckBox to the rows in GridView view mode, add the CheckBox to a DataTemplate, and then set the CellTemplate property to that DataTemplate.

Interactions utilisateur avec un affichage GridViewUser Interactions with a GridView

Lorsque vous utilisez un GridView dans votre application, les utilisateurs peuvent interagir avec et modifier la mise en forme GridViewdu.When you use a GridView in your application, users can interact with and modify the formatting of the GridView. 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.For example, users can reorder columns, resize a column, select items in a table, and scroll through content. 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.You can also define an event handler that responds when a user clicks the column header button. Le gestionnaire d’événements peut effectuer des opérations telles que le tri des données affichées GridView dans le en fonction du contenu d’une colonne.The event handler can perform operations like sorting the data that is displayed in the GridView according to the contents of a column.

La liste suivante décrit plus en détail les fonctionnalités de l’utilisation GridView de pour l’interaction avec l’utilisateur:The following list discusses in more detail the capabilities of using GridView for user interaction:

  • Réorganiser les colonnes à l’aide de la méthode glisser-déplacer.Reorder columns by using the drag-and-drop method.

    Les utilisateurs peuvent réorganiser les colonnes GridView d’un en appuyant sur le bouton gauche de la souris lorsqu’il se trouve sur un en-tête de colonne, puis en faisant glisser cette colonne vers une nouvelle position.Users can reorder columns in a GridView by pressing the left mouse button while it is over a column header and then dragging that column to a new 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.While the user drags the column header, a floating version of the header is displayed as well as a solid black line that shows where to insert the column.

    Si vous souhaitez modifier le style par défaut pour la version flottante d’un en-tête ControlTemplate , spécifiez un pour un GridViewColumnHeader type qui est Role déclenché lorsque Floatingla propriété a la valeur.If you want to modify the default style for the floating version of a header, specify a ControlTemplate for a GridViewColumnHeader type that is triggered when the Role property is set to Floating. Pour plus d’informations, consultez Créer un style pour un en-tête de colonne GridView déplacé.For more information, see Create a Style for a Dragged GridView Column Header.

  • Redimensionner une colonne selon son contenu.Resize a column to its content.

    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.Users can double-click the gripper to the right of a column header in order to resize a column to fit its content.

    Notes

    Vous pouvez affecter à Width la Double.NaN propriété la valeur pour produire le même effet.You can set the Width property to Double.NaN to produce the same effect.

  • Sélectionner des éléments de lignes.Select row items.

    Les utilisateurs peuvent sélectionner un ou plusieurs éléments dans GridViewun.Users can select one or more items in a GridView.

    Si vous souhaitez modifier le Style d’un élément sélectionné, consultez utiliser des déclencheurs pour appliquer un style aux éléments sélectionnés d’un ListView.If you want to change the Style of a selected item, see Use Triggers to Style Selected Items in a ListView.

  • Faire défiler pour afficher le contenu qui n’est pas initialement visible à l’écran.Scroll to view content that is not initially visible on the screen.

    Si la taille du GridView n’est pas assez grande pour afficher tous les éléments, les utilisateurs peuvent faire défiler horizontalement ou verticalement en utilisant des barres de défilement, qui sont fournies par un ScrollViewer contrôle.If the size of the GridView is not large enough to display all the items, users can scroll horizontally or vertically by using scrollbars, which are provided by a ScrollViewer control. Un ScrollBar est masqué si tout le contenu est visible dans une direction spécifique.A ScrollBar is hidden if all the content is visible in a specific direction. Les en-têtes de colonnes ne défilent pas avec une barre de défilement verticale. Ils défilent horizontalement.Column headers do not scroll with a vertical scroll bar, but do scroll horizontally.

  • Interagir avec les colonnes en cliquant sur les boutons d’en-tête de colonne.Interact with columns by clicking the column header buttons.

    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.When users click a column header button, they can sort the data that is displayed in the column if you have provided a sorting algorithm.

    Vous pouvez gérer l' Click événement pour les boutons d’en-tête de colonne afin de fournir des fonctionnalités telles qu’un algorithme de tri.You can handle the Click event for column header buttons in order to provide functionality like a sorting algorithm. Pour gérer l' Click événement pour un en-tête de colonne unique, définissez un gestionnaire GridViewColumnHeaderd’événements sur.To handle the Click event for a single column header, set an event handler on the GridViewColumnHeader. Pour définir un gestionnaire d’événements qui gère Click l’événement pour tous les en-têtes de colonnes, définissez ListView le gestionnaire sur le contrôle.To set an event handler that handles the Click event for all column headers, set the handler on the ListView control.

Obtention d’autres vues personnaliséesObtaining Other Custom Views

La GridView classe, dérivée de la ViewBase classe abstraite, n’est qu’un des modes d’affichage possibles pour ListView la classe.The GridView class, which is derived from the ViewBase abstract class, is just one of the possible view modes for the ListView class. Vous pouvez créer d’autres vues personnalisées pour ListView en dérivant de la ViewBase classe.You can create other custom views for ListView by deriving from the ViewBase class. Pour obtenir un exemple de mode d’affichage personnalisé, consultez Créer un mode d’affichage personnalisé pour un ListView.For an example of a custom view mode, see Create a Custom View Mode for a ListView.

Classes de prise en charge pour GridViewGridView Supporting Classes

Les classes suivantes prennent en GridView charge le mode d’affichage.The following classes support the GridView view mode.

Voir aussiSee also