Procédure pas à pas : construction d'une disposition dynamique pilotée par les données

Article
08/10/2011

Windows Presentation Foundation (WPF) fournit des contrôles qui prennent en charge des dispositions dynamiques pilotées par des données. L'utilisation de ces contrôles avec le Concepteur WPF pour Visual Studio vous simplifie la création de ces types de disposition. Vous pouvez utiliser les contrôles suivants dans vos applications :

Le contrôle ListView fournit l'infrastructure pour afficher un groupe d'éléments de données dans différentes dispositions. Vous utilisez en général un GridView avec le contrôle ListView pour afficher des données dans des colonnes. Pour plus d'informations, consultez Vue d'ensemble de ListView et Vue d'ensemble de GridView.

Dans cette procédure pas à pas, vous allez effectuer les tâches suivantes :

préparer une source de données ;
créer une application WPF ;
configurer le contrôle de panneau Grid par défaut ;
ajouter et configurer un contrôle ListView ;
ajouter et configurer un GridView en XAML ;
ajouter et configurer un contrôle Button ;
ajouter le code de liaison de données ;
tester l'application.

L'illustration suivante donne un aperçu de votre application.

Une présentation dynamique pilotée par les données

Notes

Les boîtes de dialogue et les commandes de menu qui s'affichent peuvent être différentes de celles qui sont décrites dans l'aide, en fonction de vos paramètres actifs ou de l'édition utilisée. Pour modifier vos paramètres, choisissez Importation et exportation de paramètres dans le menu Outils. Pour plus d'informations, consultez Utilisation des paramètres.

Composants requis

Pour exécuter cette procédure pas à pas, vous devez disposer des composants suivants :

Visual Studio 2010

Préparation de la source de données

Pour cette procédure pas à pas, vous aurez besoin d'un exemple de source de données à lier. Vous allez créer une source de données de fichier CSV simple.

Pour préparer la source de données

Créez un dossier et nommez-le Data.
Dans le dossier Données, créez un fichier texte et nommez-le employees.csv.

Notes

Vous pouvez utiliser n'importe quel éditeur de texte, par exemple Bloc-notes, pour créer le fichier.

Ajoutez le code suivant au fichier texte :

LastName,FirstName,Title
Davis,Sara,Sales Representative
Funk,Don,Vice President, Sales
Levin,Danny,Sales Representative
Penor,Lori,Sales Representative
Buschmann,Monika,Sales Manager
Suominen,Ari,Sales Representative
King,Russell,Sales Representative
Cameron,Maria,Inside Sales Coordinator
Doyle,Patricia,Sales Representative

Enregistrez et fermez le fichier.

Conseil

Vous pouvez ouvrir le fichier dans Excel et confirmer que les données séparées par les virgules apparaissent dans les colonnes séparées.
Dans le dossier Données, créez un fichier texte et nommez-le schema.ini. Le fichier de schéma décrit le format des fichiers texte dans votre dossier de données.
Ajoutez le code suivant au fichier texte :
```
[employees.csv]
Format=CSVDelimited
ColNameHeader=True
```
Conseil

Dans cette procédure pas à pas, votre fichier CSV possède des en-têtes de colonnes. Pour créer une liaison avec un fichier CSV qui n'a pas d'en-têtes de colonnes, modifiez ColNameHeader=True en ColNameHeader=False.
Enregistrez et fermez le fichier.

Création du projet

La prochaine étape consiste à créer le projet Visual Studio pour l'application.

Pour créer le projet

Créez un nouveau projet d'application WPF dans Visual Basic ou Visual C# nommé DataDrivenLayout. Pour plus d'informations, consultez Comment : créer un projet d'application WPF.

MainWindow.xaml s'ouvre dans le Concepteur WPF.
Dans le menu Fichier, cliquez sur Enregistrer tout.

Configuration du contrôle de panneau de grille par défaut

Par défaut, la nouvelle application WPF contient un Window avec un panneau Grid. Dans cette procédure vous ajoutez deux lignes à la grille. Vous affectez à la hauteur d'une ligne la valeur Auto, afin qu'elle prenne la taille de son contenu. Vous affectez à la hauteur des autres lignes la valeur *, afin qu'elle utilise la hauteur disponible restante.

Pour configurer le contrôle de panneau de grille par défaut

En mode Design, sélectionnez Grid. Pour plus d'informations, consultez Comment : sélectionner et déplacer des éléments sur l'aire de conception.
Dans la fenêtre Propriétés, recherchez la propriété RowDefinitions et cliquez sur le bouton de sélection dans la colonne Valeur de la propriété.

L'éditeur de collections apparaît.
Cliquez deux fois sur Ajouter pour ajouter deux lignes.
Affectez la valeur * à la propriété Height de la première ligne.
Affectez la valeur Auto à la propriété Height de la deuxième ligne.
Cliquez sur OK pour fermer l'éditeur de collections et retourner au Concepteur WPF.

À présent, la grille contient deux lignes, mais une seule ligne est affichée. La ligne dont la propriété Height a la valeur Auto est temporairement masquée parce qu'elle n'a aucun contenu. Cela ne pose pas de problème pour cette procédure pas à pas. Pour éviter cela à l'avenir, vous pouvez utiliser le redimensionnement star lorsque vous travaillez, puis passer à Auto lorsque vous avez fini.
Dans le menu Fichier, cliquez sur Enregistrer tout.

Ajout et configuration d'un ListView

Dans cette procédure vous ajoutez un ListView. Vous donnez un nom au ListView afin de pouvoir y faire référence dans le fichier code-behind. Vous configurez ses propriétés de disposition.

Pour ajouter et configurer un ListView

En mode Design, sélectionnez Grid.
Dans la Boîte à outils, dans le groupe Contrôles, faites glisser un contrôle ListView sur Grid.

Dans la fenêtre Propriétés, définissez les propriétés suivantes pour ListView :

Propriété	Valeur
Nom	lvEmployees
Grid.Column	0
Grid.ColumnSpan	1
Grid.Row	0
Grid.RowSpan	1
Largeur	Auto
Hauteur	Auto
HorizontalAlignment	Stretch
VerticalAlignment	Stretch
Margin	0

Dans le menu Fichier, cliquez sur Enregistrer tout.

Ajout et configuration d'un GridView

Dans cette procédure vous ajoutez un GridView avec trois colonnes pour afficher les données provenant du fichier texte. Vous donnez des noms aux colonnes car vous allez y faire référence dans le code-behind pour lier individuellement les données aux colonnes. Pour plus d'informations, consultez Comment : afficher un contenu ListView à l'aide d'un GridView.

Pour ajouter et configurer un GridView

Dans l'éditeur XAML localisez l'élément ListView. Il ressemble à ce qui suit :
```
<ListView <ATTRIBUTES> />
```
Conseil

Pour facilement mettre en surbrillance des éléments en mode XAML, cliquez sur le contrôle en mode Design ou utilisez la fenêtre Structure du document.

Remplacez l'élément ListView par le code suivant :

<ListView x:Name="lvEmployees">
    <ListView.View>
        <GridView AllowsColumnReorder="True">
            <GridViewColumn x:Name="c1Employees" Header="Last Name"></GridViewColumn>
            <GridViewColumn x:Name="c2Employees" Header="First Name"></GridViewColumn>
            <GridViewColumn x:Name="c3Employees" Header="Title"></GridViewColumn>
        </GridView>
    </ListView.View>
</ListView>

Dans le menu Fichier, cliquez sur Enregistrer tout.

Ajout et configuration d'un bouton

Dans cette procédure vous ajoutez un Button et spécifiez son événement Click.

Pour ajouter et configurer un bouton

En mode Design, sélectionnez Grid.

Conseil

Parce que le ListView couvre Grid, il peut être difficile de sélectionner Grid. Vous pouvez utiliser la touche TABULATION ou la fenêtre Structure du document pour sélectionner Grid.
Dans la Boîte à outils, dans le groupe Contrôles, faites glisser un contrôle Button sur Grid.

Dans la fenêtre Propriétés, définissez les propriétés suivantes pour Button :

Propriété	Valeur
Nom	btnGetData
Contenu	Get Data
Grid.Column	0
Grid.ColumnSpan	1
Grid.Row	1
Grid.RowSpan	1
Largeur	75
Hauteur	23
HorizontalAlignment	Droite
VerticalAlignment	Bottom
Margin	5

Dans l'éditeur XAML, localisez l'élément Button. Il ressemble à ce qui suit :
```
<Button <ATTRIBUTES>>Button</Button>
```
Conseil

Pour facilement mettre en surbrillance des éléments en mode XAML, cliquez sur le contrôle en mode Design ou utilisez la fenêtre Structure du document.
Modifiez le XAML pour ajouter un attribut d'événement Click. Il doit se présenter comme suit :
```
<Button Click="btnGetData_Click" <ATTRIBUTES>>Button</Button>
```
Dans le menu Fichier, cliquez sur Enregistrer tout.

Ajout du code de liaison de données

Dans cette procédure vous ajoutez le code pour l'événement Click du Button. Au moment de l'exécution vous cliquez sur le bouton pour obtenir les données et les lier au ListView et au GridView.

Pour ajouter le code de liaison de données

Ouvrez le fichier code-behind, MainWindow.xaml.cs ou MainWindow.xaml.vb, en fonction du langage que vous avez sélectionné pour votre projet.

En haut de l'éditeur de code, ajoutez le code suivant. Pour créer une liaison de données vous devez accéder aux espaces de noms System.Data et System.Data.OleDb.

Imports System.Data              'DataTable
Imports System.Data.OleDb        'OleDbDataAdapter
Imports System.Windows           'RoutedEventArgs
Imports System.Windows.Data      'Binding
Imports System.Windows.Controls  'ListView

using System;                   //Exception
using System.Data;              //DataTable
using System.Data.OleDb;        //OleDbDataAdapter
using System.Windows;           //RoutedEventArgs
using System.Windows.Data;      //Binding
using System.Windows.Controls;  //ListView

Dans la classe MainWindow, ajoutez le code suivant. Vous utilisez un DataTable pour stocker les données.
```
Dim dtEmployees As DataTable
```
```
DataTable dtEmployees;
```

Dans la classe MainWindow, ajoutez le code suivant. Lorsque l'utilisateur clique sur le bouton, vous obtenez les données puis les liez au ListView.

Private Sub btnGetData_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)

    dtEmployees = GetData()
    BindData()
End Sub

private void btnGetData_Click(object sender, RoutedEventArgs e)
{
    dtEmployees = GetData();
    BindData();
}

Dans la classe MainWindow, ajoutez le code suivant et spécifiez le chemin d'accès à votre dossier de données. Pour obtenir les données, vous utilisez un OleDbDataAdapter.

Function GetData() As DataTable

    Dim sConnection As String = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=<Your Path>\Data\;Extended Properties=""text;HDR=yes;FMT=delimited"";"
    Dim sSQL As String = "select * from employees.csv"

    Dim dt As DataTable = New DataTable()
    Dim da As OleDbDataAdapter = New OleDbDataAdapter(sSQL, sConnection)

    Try
        da.Fill(dt)

    Catch ex As Exception
        MessageBox.Show(ex.ToString())

    End Try

    Return dt
End Function

DataTable GetData()
{
    string sConnection = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=<Your Path>\\Data\\;Extended Properties=\"text;HDR=yes;FMT=delimited\";";
    string sSQL = "select * from employees.csv";

    DataTable dt = new DataTable();
    OleDbDataAdapter da = new OleDbDataAdapter(sSQL, sConnection);

    try
    {
        da.Fill(dt);
    }
    catch (Exception e)
    {
        MessageBox.Show(e.ToString());
    }
    return dt;
}

Dans la classe MainWindow, ajoutez le code suivant. Pour lier les données au ListView, vous affectez à son DataContext le DataTable. Vous affichez les colonnes de données dans les colonnes du GridView.

Sub BindData()
    lvEmployees.DataContext = dtEmployees
    lvEmployees.SetBinding(ListView.ItemsSourceProperty, New Binding())

    c1Employees.DisplayMemberBinding = New Binding("LastName")
    c2Employees.DisplayMemberBinding = New Binding("FirstName")
    c3Employees.DisplayMemberBinding = New Binding("Title")
End Sub

void BindData()
{
    lvEmployees.DataContext = dtEmployees;
    lvEmployees.SetBinding(ListView.ItemsSourceProperty, new Binding());

    c1Employees.DisplayMemberBinding = new Binding("LastName");
    c2Employees.DisplayMemberBinding = new Binding("FirstName");
    c3Employees.DisplayMemberBinding = new Binding("Title");
}

Dans le menu Fichier, cliquez sur Enregistrer tout.

Réglage de la fenêtre pour un dimensionnement dynamique

La propriété SizeToContent spécifie la façon dont la taille d'une fenêtre Window change lorsque la taille de son contenu change. Par défaut, cette propriété a la valeur Manual, ce qui signifie que l'utilisateur peut redimensionner manuellement la fenêtre au contenu. Dans cette procédure vous affectez à cette propriété la valeur WidthAndHeight, ce qui signifie que la fenêtre se redimensionne dynamiquement lorsque son contenu change.

Pour régler la fenêtre pour un dimensionnement dynamique

Ouvrez MainWindow.xaml dans le concepteur.
En mode Design, sélectionnez Window.
Dans la fenêtre Propriétés, définissez les propriétés suivantes pour Window :

Propriété

Valeur

SizeToContent

WidthAndHeight

Largeur

Auto

Hauteur

Auto
Dans le menu Fichier, cliquez sur Enregistrer tout.

Propriété	Valeur
SizeToContent	WidthAndHeight
Largeur	Auto
Hauteur	Auto

Test de l'application

Pour tester l'application

Dans le menu Déboguer, cliquez sur Démarrer le débogage.

L'application démarre et la fenêtre apparaît. Parce que vous avez affecté à la propriété SizeToContent la valeur WidthAndHeight, la fenêtre est juste assez grande pour les en-têtes du GridView et le Button.
Cliquez sur Get Data.

L'application obtient les données et les lie au GridView. Les GridView, ListView et Window se redimensionnent tous dynamiquement selon le contenu.
Fermez la fenêtre.

Assemblage

Voici le fichier MainWindow.xaml terminé :

<Window x:Class="MainWindow"
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="Auto" Width="Auto" SizeToContent="WidthAndHeight">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <ListView x:Name="lvEmployees">
            <ListView.View>
                <GridView AllowsColumnReorder="True">
                    <GridViewColumn x:Name="c1Employees" Header="Last Name"></GridViewColumn>
                    <GridViewColumn x:Name="c2Employees" Header="First Name"></GridViewColumn>
                    <GridViewColumn x:Name="c3Employees" Header="Title"></GridViewColumn>
                </GridView>
            </ListView.View>
        </ListView>
        <Button Click="btnGetData_Click" Name="btnGetData" Margin="5" Height="23" Width="75" HorizontalAlignment="Right" VerticalAlignment="Bottom" Grid.Column="0" Grid.ColumnSpan="1" Grid.Row="1" Grid.RowSpan="1">Get Data</Button>
    </Grid>
</Window>

Étapes suivantes

Dans cette procédure pas à pas vous avez utilisé un GridView avec trois colonnes pour afficher des données. Vous avez lié directement les données individuellement à chaque colonne. Vous pouvez également utiliser des modèles de données pour organiser et appliquer un style aux données dans un ListView ou un GridView. Pour plus d'informations, consultez Vue d'ensemble des modèles de données.

Vous pouvez expérimenter l'utilisation de modèles de données dans cette procédure pas à pas. Par exemple, vous pouvez créer un modèle tel que le suivant :

<Window.Resources>
    <DataTemplate x:Key="templateEmployees">
        <Border BorderBrush="Silver" BorderThickness="1" Padding="5" Margin="5">
            <DockPanel>
                <StackPanel DockPanel.Dock="Left">
                    <TextBlock Text="{Binding Path=LastName}" />
                    <TextBlock Text="{Binding Path=FirstName}" />
                </StackPanel>
                <TextBlock Text="{Binding Path=Title}" DockPanel.Dock="Right" />
            </DockPanel>
        </Border>
    </DataTemplate>
</Window.Resources>

Puis utiliser le modèle de données dans le GridView avec le code suivant :

<ListView.View>
    <GridView>
        <GridViewColumn CellTemplate="{StaticResource templateEmployees}" />
    </GridView>
</ListView.View>

Supprimez ou commentez le code suivant du code-behind :

c1Employees.DisplayMemberBinding = New Binding("LastName")
c2Employees.DisplayMemberBinding = New Binding("FirstName")
c3Employees.DisplayMemberBinding = New Binding("Title")

c1Employees.DisplayMemberBinding = new Binding("LastName");
c2Employees.DisplayMemberBinding = new Binding("FirstName");
c3Employees.DisplayMemberBinding = new Binding("Title");

Voir aussi

Partager via