Démarrage rapide : ajout des contrôles ListView et GridView
Langage: HTML | XAML

Démarrage rapide : ajout des contrôles ListView et GridView (XAML)

[ Cet article est destiné aux développeurs Windows 8.x et Windows Phone 8.x qui créent des applications Windows Runtime. Si vous développez une application pour Windows 10, voir la Documentation ]

Vous pouvez utiliser un contrôle ListView ou GridView en XAML pour afficher vos collections de données, telles qu’une liste de contacts, des images dans une galerie ou le contenu d’une boîte de réception de courrier électronique.

Objectif: Apprendre à ajouter des contrôles ListView et GridView à une application du Windows Store

Prérequis

Nous partons du principe que vous savez ajouter des contrôles à une application Windows Runtime de base en C++, C# ou Visual Basic. Pour obtenir des instructions sur l’ajout d’un contrôle, voir Démarrage rapide : ajout de contrôles et gestion des événements.

Instructions

1. Choix d’un contrôle ListView ou GridView

Les contrôles ListView et GridView permettent tous les deux d’afficher des collections de données dans votre application. Leurs fonctionnalités sont similaires, mais ils affichent les données différemment. Ils sont tous deux dérivés de la classe ItemsControl. Lorsque nous parlons d’un ItemsControl, les informations s’appliquent aux deux contrôles ListView et GridView.

Le contrôle ListView affiche les données en les empilant. Il est souvent utilisé pour afficher une liste ordonnée d’éléments, telle qu’une liste de messages électroniques ou de résultats de recherche. Il est également utile dans les scénarios maître/détail, où les éléments de liste ne contiennent qu’une petite quantité d’informations et où les détails de l’élément sélectionné sont affichés séparément.

Le contrôle GridView affiche les données en les juxtaposant. Il est souvent utilisé pour mettre en valeur chaque élément sur davantage d’espace, comme dans le cas d’une galerie de photos.

Vous pouvez remplir un contrôle ItemsControl en ajoutant des éléments directement dans sa collection Items, ou en liant sa propriété ItemsSource à une source de données. Il est courant qu’un contrôle ListView et un contrôle GridView soient liés à la même source de données. Dans ce cas, vous pouvez afficher l’un et masquer l’autre en fonction de l’orientation et de la résolution.

Voici un contrôle ListView affichant des éléments dans une application qui apparaît étroite lorsqu’elle est placée à côté d’une autre application, ainsi qu’un contrôle GridView présentant les mêmes éléments quand l’application est affichée en mode plein écran.

ListView et GridView

2. Ajout d’éléments à la collection Items

Vous pouvez ajouter des éléments à la collection Items en utilisant le langage ou code XAML (Extensible Application Markup Language). Vous ajoutez généralement des éléments de cette façon si vous avez un petit nombre d’éléments qui ne sont pas modifiés et sont facilement définis en XAML, ou si vous générez les éléments dans le code lors de l’exécution. Voici un contrôle ListView qui est composé d’éléments définis inline en XAML, et un contrôle GridView composé d’éléments ajoutés au code.


<ListView x:Name="listView1" SelectionChanged="ListView_SelectionChanged">
    <x:String>Item 1</x:String>
    <x:String>Item 2</x:String>
</ListView>



// Create a new grid view, add content, 
// and add a SelectionChanged event handler.
GridView gridView1 = new GridView();
gridView1.Items.Add("Item 1");
gridView1.Items.Add("Item 2");
gridView1.SelectionChanged += GridView_SelectionChanged;

// Add the grid view to a parent container in the visual tree.
stackPanel1.Children.Add(gridView1);


Lorsque vous ajoutez des éléments à un contrôle ItemsControl, ils sont automatiquement placés dans un conteneur d’élément. Le conteneur d’élément pour un ListView est ListViewItem et le conteneur d’élément pour un GridView est GridViewItem. Pour modifier l’apparence d’un élément, vous pouvez appliquer un style au conteneur d’éléments en définissant la propriété ItemContainerStyle.

Lorsque vous définissez les éléments en XAML, ceux-ci sont automatiquement ajoutés à la collection d’Items.

3. Définition de la source des éléments

La plupart des applications utilisent un contrôle ListView ou GridView à partir d’une source, telle qu’une base de données ou Internet. Pour remplir un ItemsControl à partir d’une source de données, vous affectez à sa propriété ItemsSource une collection d’éléments de données.

Remarque  Vous pouvez remplir un contrôle ItemsControl en ajoutant des éléments directement dans sa collection Items, ou en définissant sa propriété ItemsSource, mais vous ne pouvez pas faire les deux à la fois. Si vous définissez la propriété ItemsSource et que vous ajoutez un élément en XAML, l’élément ajouté est alors ignoré. Si vous définissez la propriété ItemsSource et que vous ajoutez un élément à la collection d’Items dans le code, une exception est levée.
 

Voici quelques-uns des types de collection qui prennent en charge la liaison à un ItemsControl.

Type de collectionQuand utiliser
List(Of T) Lorsque la collection n’est pas modifiée lors de l’exécution. Une fois créé, le contenu de la liste ou de la grille est statique.
ObservableCollection(Of T) Lorsque la collection ne peut pas être modifiée lors de l’exécution. La liste ou la grille est informée des modifications apportées à la collection et met à jour l’affichage.
FileInformationFactory.GetVirtualizedFilesVector Établir une liaison avec une collection de fichiers.
FileInformationFactory.GetVirtualizedFoldersVector Établir une liaison avec une collection de dossiers.
FileInformationFactory.GetVirtualizedItemsVector Établir une liaison avec une collection d’éléments de stockage.

 

Ici, la ItemsSource prend la valeur de l’instance d’une collection directement dans le code.


// Data source.
List<String> itemsList = new List<string>();
itemsList.Add("Item 1");
itemsList.Add("Item 2");

// Create a new grid view, add content, 
// and add a SelectionChanged event handler.
GridView gridView1 = new GridView();
gridView1.ItemsSource = itemsList;
gridView1.SelectionChanged += GridView_SelectionChanged;

// Add the grid view to a parent container in the visual tree.
stackPanel1.Children.Add(gridView1);


Vous pouvez également lier la propriété ItemsSource à une CollectionViewSource. CollectionViewSource agit en tant que proxy pour la classe de collection afin d’activer la prise en charge de la devise et du regroupement. Si les mêmes données sont à la fois liées à un contrôle ListView et GridView afin de prendre en charge le passage d’un affichage étroit à un affichage large, vous devez établir une liaison avec un objet CollectionViewSource afin que les deux affichages disposent du même élément actif. Pour plus d’informations, voir Liaison de données avec XAML.

Pour illustrer des éléments groupés dans une liste ou une grille, la source de données doit prendre en charge le groupement, et vous devez lier la ItemsSource à une CollectionViewSource dont la propriété IsSourceGrouped a la valeur True. Pour plus d’informations, voir Comment regrouper des éléments dans un contrôle de données.

Dans le cas présent, la propriété ItemsSource est liée à un objet CollectionViewSource nommé itemsViewSource. Pour afficher le code complet pour cet exemple et les exemples suivants, créez une application à l’aide du modèle Application fractionnée dans Microsoft Visual Studio.


<Page.Resources>
    <!-- Collection of items displayed by this page -->
    <CollectionViewSource x:Name="itemsViewSource" Source="{Binding Items}"/>
</Page.Resources>



<ListView x:Name="itemListView" 
          ItemsSource="{Binding Source={StaticResource itemsViewSource}}"/>


4. Spécification de l’aspect des éléments

Par défaut, un élément de données apparaît dans la liste ou dans la grille en tant que représentation de chaîne de l’objet de données auquel il est lié. Vous pouvez afficher la représentation de chaîne d’une propriété spécifique de l’élément de données en définissant la propriété DisplayMemberPath sur cette propriété.

Vous voulez généralement afficher plus d’une propriété de votre élément de données. Pour définir précisément la façon dont les éléments sont affichés dans la liste ou dans la grille, vous pouvez créer un objet DataTemplate. Le code XAML dans l’objet DataTemplate définit la disposition des contrôles qui permettent d’afficher un élément spécifique. Les contrôles dans la disposition peuvent être liés aux propriétés d’un objet de données ou leur contenu peut être défini inline. L’objet DataTemplate est affecté à la propriété ItemTemplate de l’objet ListView ou GridView.

Dans cet exemple, l’élément ItemTemplate d’un ListView est défini en ligne. Les exemples des sections suivantes indiquent comment lier l’élément ItemTemplate à une ressource statique nommée.


<ListView x:Name="itemListView"
          Margin="120,0,0,60"
          ItemsSource="{Binding Source={StaticResource itemsViewSource}}"
          SelectionChanged="ItemListView_SelectionChanged">
    <ListView.ItemTemplate>
        <DataTemplate>
            <Grid Height="110" Margin="6">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <Border Background="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}" Width="110" Height="110">
                    <Image Source="{Binding Image}" Stretch="UniformToFill"/>
                </Border>
                <StackPanel Grid.Column="1" VerticalAlignment="Top" Margin="10,0,0,0">
                    <TextBlock Text="{Binding Title}" Style="{StaticResource TitleTextStyle}" TextWrapping="NoWrap"/>
                    <TextBlock Text="{Binding Subtitle}" Style="{StaticResource CaptionTextStyle}" TextWrapping="NoWrap"/>
                    <TextBlock Text="{Binding Description}" Style="{StaticResource BodyTextStyle}" MaxHeight="60"/>
                </StackPanel>
            </Grid>
        </DataTemplate>
    </ListView.ItemTemplate>          
</ListView>


Voici à quoi ressemble la disposition définie par le modèle de données.

Modèle de données de contrôle ListView

5. Spécification de la disposition de l’affichage

Pour spécifier la disposition des éléments dans un affichage de liste ou de grille, vous devez définir la propriété ItemsPanel afin de spécifier un modèle ItemsPanelTemplate qui est défini sur un contrôle Panel de disposition. Par défaut, le contrôle GridView utilise un contrôle WrapGrid comme contrôle ItemsPanel, et le contrôle ListView utilise un contrôle VirtualizingStackPanel comme contrôle ItemsPanel.

Voici comment utiliser un contrôle WrapGrid pour changer la disposition des éléments dans un contrôle ListView. Le contrôle WrapGrid remplace le contrôle VirtualizingStackPanel par défaut, qui classe les éléments dans une seule colonne. Nous définissons la propriété WrapGrid.MaximumRowsOrColumns de façon à ce que les éléments soient classés dans deux colonnes.


<ListView Height="320" Width="260">
    <ListView.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapGrid Orientation="Horizontal" MaximumRowsOrColumns="2"/>
        </ItemsPanelTemplate>
    </ListView.ItemsPanel>

    <Rectangle Height="100" Width="100" Fill="Blue" />
    <Rectangle Height="100" Width="100" Fill="Red" />
    <Rectangle Height="100" Width="100" Fill="Yellow" />
    <Rectangle Height="100" Width="100" Fill="Green" />
    <Rectangle Height="100" Width="100" Fill="Gray" />
    <Rectangle Height="100" Width="100" Fill="LightBlue" />
    <Rectangle Height="100" Width="100" Fill="Pink" />
    <Rectangle Height="100" Width="100" Fill="YellowGreen" />
</ListView>


Voici à quoi ressemble le contrôle ListView en utilisant un contrôle WrapGrid avec deux colonnes comme ItemsPanel.

Contrôle ListView avec deux colonnes

6. Ajout d’un en-tête à l’affichage

Vous pouvez ajouter un en-tête à un contrôle ListView ou GridView en affectant une chaîne ou un objet à la propriété Header. Vous pouvez utiliser un modèle de données pour définir la disposition de l’objet Header en définissant la propriété HeaderTemplate.

Par défaut, l’en-tête apparaît sur le bord de début de l’affichage. Il apparaît en haut pour un contrôle ListView et à gauche pour un contrôle GridView. Si la propriété FlowDirection est définie sur RightToLeft, l’en-tête apparaît à droite pour un contrôle GridView.

Voici un contrôle GridView avec un en-tête qui contient un objet StackPanel avec du texte et une image. Ce balisage XAML est une version simplifiée du contrôle GridView utilisé dans la page GroupDetail du modèle Application grille de Visual Studio.


<GridView x:Name="itemGridView"
          Margin="0,-14,0,0"
          Padding="120,0,120,50"
          ItemsSource="{Binding Source={StaticResource itemsViewSource}}"
          ItemTemplate="{StaticResource Standard500x130ItemTemplate}">

    <GridView.Header>
        <StackPanel Width="480" Margin="0,4,14,0">
            <TextBlock Text="{Binding Subtitle}" Margin="0,0,18,20" 
                       Style="{StaticResource SubheaderTextStyle}" MaxHeight="60"/>
            <Image Source="{Binding Image}" Height="400" Margin="0,0,18,20" 
                   Stretch="UniformToFill" AutomationProperties.Name="{Binding Title}"/>
            <TextBlock Text="{Binding Description}" Margin="0,0,18,0" 
                       Style="{StaticResource BodyTextStyle}"/>
        </StackPanel>
    </GridView.Header>
</GridView>


Ici, l’en-tête du contrôle GridView est la partie délimitée en jaune.

Modèle de données de contrôle ListView.

7. Définition du mode d’interaction de l’affichage

Par défaut, un utilisateur peut sélectionner un seul élément dans un objet ListView ou GridView. Pour modifier ce comportement, vous pouvez définir la propriété SelectionMode sur une valeur d’énumération ListViewSelectionMode afin d’autoriser la sélection multiple ou de désactiver la sélection.

Voici un objet ListView pour lequel la sélection est désactivée, et un objet GridView pour lequel la sélection multiple est activée.


<ListView x:Name="itemList"
          ItemsSource="{Binding Source={StaticResource itemsViewSource}}"
          SelectionMode="None"/>

<GridView x:Name="itemGrid"
          ItemsSource="{Binding Source={StaticResource itemsViewSource}}"
          SelectionChanged="ItemView_SelectionChanged"
          SelectionMode="Extended"/>


En réaction aux modifications de sélection dans une liste ou une grille, gérez l’événement SelectionChanged. Dans le code du gestionnaire d’événements, vous pouvez obtenir la liste des éléments sélectionnés auprès de la propriété SelectionChangedEventArgs.AddedItems. En dehors de l’événement SelectionChanged, vous obtenez les éléments sélectionnés à partir des propriétés SelectedItem et SelectedItems, soit dans le code, soit à travers la liaison de données.

Voici le gestionnaire d’événements SelectionChanged pour GridView de l’exemple précédent.


List<object> selectedItems;

private void ItemView_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    // Use e.AddedItems to get the items that are selected in the ItemsControl.
    selectedItems = (List<object>)e.AddedItems;
}


Vous pouvez également modifier un objet ListView ou GridView afin qu’un utilisateur clique sur des éléments, tels que des boutons, au lieu de les sélectionner. Cela est par exemple utile lorsque l’utilisateur de votre application accède à une nouvelle page en cliquant sur un élément dans une liste ou dans une grille. Pour activer ce comportement, définissez la propriété SelectionMode sur None, la propriété IsItemClickEnabled sur true et gérez l’événement ItemClick afin qu’une opération soit réalisée lorsque l’utilisateur clique sur un élément.

Voici un objet GridView constitué d’éléments pouvant être activés par un clic. Le code du gestionnaire ItemClick accède à une nouvelle page et transmet l’élément activé par un clic en tant que données pour la nouvelle page.


<GridView x:Name="itemGridView"
          Margin="116,0,116,46"
          ItemsSource="{Binding Source={StaticResource itemsViewSource}}"
          ItemTemplate="{StaticResource Standard250x250ItemTemplate}"
          SelectionMode="None"
          IsItemClickEnabled="True"
          ItemClick="ItemView_ItemClick"/>



private void ItemView_ItemClick(object sender, ItemClickEventArgs e)
{
    // Navigate to the split page, configuring the new page
    // by passing required information as a navigation parameter
    this.Frame.Navigate(typeof(SplitPage), e.ClickedItem);
}


Récapitulatif et étapes suivantes

Vous avez appris à créer des contrôles ListView et GridView pour afficher des collections de données.

Pour obtenir une liste de modèles d’éléments prédéfinis à utiliser dans votre application, voir Modèles d’éléments pour les dispositions en liste et Modèles d’éléments pour les dispositions en grille. Pour savoir comment regrouper des éléments, voir Comment regrouper des éléments dans un contrôle dans une liste ou une grille.

Vous trouverez davantage d’exemples de code permettant d’illustrer les contrôles ListView et GridView parmi les exemples suivants :

Rubriques associées

Feuille de route pour les applications Windows Runtime en C# ou Visual Basic
Feuille de route pour les applications Windows Runtime en C++

 

 

Afficher:
© 2016 Microsoft