Comment : trier une colonne GridView lors d'un clic sur un en-tête

Mise à jour : novembre 2007

Cet exemple montre comment créer un contrôle ListView qui implémente un mode d'affichage GridView et trie le contenu des données lorsqu'un utilisateur clique sur un en-tête de colonne.

Exemple

L'exemple suivant définit un GridView avec trois colonnes qui sont liées aux propriétés Year, Month et Day de la structure DateTime.

<GridView>
  <GridViewColumn DisplayMemberBinding="{Binding Path=Year}" 
                  Header="Year"
                  Width="100"/>
  <GridViewColumn DisplayMemberBinding="{Binding Path=Month}" 
                  Header="Month"
                  Width="100"/>
  <GridViewColumn DisplayMemberBinding="{Binding Path=Day}" 
                  Header="Day"
                  Width="100"/>
</GridView>

L'exemple suivant affiche les éléments de données qui sont définis comme ArrayList d'objets DateTime. Le ArrayList est défini comme ItemsSource pour le contrôle ListView.

<ListView.ItemsSource>
  <s:ArrayList>
    <p:DateTime>1993/1/1 12:22:02</p:DateTime>
    <p:DateTime>1993/1/2 13:2:01</p:DateTime>
    <p:DateTime>1997/1/3 2:1:6</p:DateTime>
    <p:DateTime>1997/1/4 13:6:55</p:DateTime>
    <p:DateTime>1999/2/1 12:22:02</p:DateTime>
    <p:DateTime>1998/2/2 13:2:01</p:DateTime>
    <p:DateTime>2000/2/3 2:1:6</p:DateTime>
    <p:DateTime>2002/2/4 13:6:55</p:DateTime>
    <p:DateTime>2001/3/1 12:22:02</p:DateTime>
    <p:DateTime>2006/3/2 13:2:01</p:DateTime>
    <p:DateTime>2004/3/3 2:1:6</p:DateTime>
    <p:DateTime>2004/3/4 13:6:55</p:DateTime>
  </s:ArrayList>
</ListView.ItemsSource>

Les identificateurs s et p dans les balises XAML font référence aux mappages d'espaces de noms qui sont définis dans les métadonnées de la page XAML. L'exemple suivant affiche la définition de métadonnées.

<Window      
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="ListViewSort.Window1"    
    xmlns:s="clr-namespace:System.Collections;assembly=mscorlib"
    xmlns:p="clr-namespace:System;assembly=mscorlib">

Pour trier les données d'après le contenu d'une colonne, l'exemple définit un gestionnaire d'événements pour gérer l'événement Click qui se produit lorsque vous appuyez sur le bouton d'en-tête de la colonne. L'exemple suivant montre comment spécifier un gestionnaire d'événements pour le contrôle GridViewColumnHeader.

<ListView x:Name='lv' Height="150" HorizontalAlignment="Center" 
  VerticalAlignment="Center" 
  GridViewColumnHeader.Click="GridViewColumnHeaderClickedHandler"
 >

L'exemple définit le gestionnaire d'événements pour que le sens du tri passe de l'ordre croissant à l'ordre décroissant et vice versa chaque fois que vous appuyez sur le bouton d'en-tête de colonne. L'exemple suivant présente le gestionnaire d'événements.

public partial class Window1 : Window
{
    public Window1()
    {
        InitializeComponent();
    }

    GridViewColumnHeader _lastHeaderClicked = null;
    ListSortDirection _lastDirection = ListSortDirection.Ascending;

    void GridViewColumnHeaderClickedHandler(object sender,
                                            RoutedEventArgs e)
    {
        GridViewColumnHeader headerClicked =
              e.OriginalSource as GridViewColumnHeader;
        ListSortDirection direction;

        if (headerClicked != null)
        {
            if (headerClicked.Role != GridViewColumnHeaderRole.Padding)
            {
                if (headerClicked != _lastHeaderClicked)
                {
                    direction = ListSortDirection.Ascending;
                }
                else
                {
                    if (_lastDirection == ListSortDirection.Ascending)
                    {
                        direction = ListSortDirection.Descending;
                    }
                    else
                    {
                        direction = ListSortDirection.Ascending;
                    }
                }

                string header = headerClicked.Column.Header as string;
                Sort(header, direction);

                if (direction == ListSortDirection.Ascending)
                {
                    headerClicked.Column.HeaderTemplate =
                      Resources["HeaderTemplateArrowUp"] as DataTemplate;
                }
                else
                {
                    headerClicked.Column.HeaderTemplate =
                      Resources["HeaderTemplateArrowDown"] as DataTemplate;
                }

                // Remove arrow from previously sorted header
                if (_lastHeaderClicked != null && _lastHeaderClicked != headerClicked)
                {
                    _lastHeaderClicked.Column.HeaderTemplate = null;
                }


                _lastHeaderClicked = headerClicked;
                _lastDirection = direction;
            }
        }
    }

L'exemple suivant présente l'algorithme de tri qui est appelé par le gestionnaire d'événements pour trier les données. Le tri est exécuté en créant une nouvelle structure SortDescription.

private void Sort(string sortBy, ListSortDirection direction)
{
    ICollectionView dataView =
      CollectionViewSource.GetDefaultView(lv.ItemsSource);

    dataView.SortDescriptions.Clear();
    SortDescription sd = new SortDescription(sortBy, direction);
    dataView.SortDescriptions.Add(sd);
    dataView.Refresh();
}

Pour l'exemple complet, consultez ListView triant des données, exemple.

Voir aussi

Tâches

ListView triant des données, exemple

Concepts

Vue d'ensemble de ListView

Vue d'ensemble de GridView

Référence

ListView

GridView

Autres ressources

Rubriques Comment relatives à ListView

Exemples de ListView