Procédure pas à pas : création d'une liaison de données à l'aide du Concepteur WPF

Article
08/10/2011

Cette procédure pas à pas vous indique comment utiliser le Concepteur WPF pour Visual Studio pour créer des liaisons de données qui connectent des données à un contrôle.

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

créer le projet ;
créer une classe Student et une collection StudentList ;
créer un contrôle ListBox qui affiche la collection StudentList via une liaison de données ;
créer un DataTemplate personnalisé qui utilise un IValueConverter pour personnaliser l'apparence d'une propriété booléenne.

Lorsque vous aurez terminé, vous disposerez d'une zone de liste liée à une liste d'étudiants. Pour chaque élément de zone de liste, un carré coloré s'affiche qui indique si l'étudiant est actuellement inscrit.

Notes

Pour créer une liaison avec les données à partir d'une connexion de données, utilisez la fenêtre Sources de données. Pour plus d'informations, consultez Liaison de contrôles WPF avec des données dans Visual Studio.

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.

Création du projet

La première étape consiste à créer le projet d'application WPF et à ajouter la source de données. La source de données est une ObservableCollection<T> qui contient des instances d'une classe Student simple. Le projet comporte également un IValueConverter et un DataTemplate personnalisé pour affecter un style au contrôle ListBox.

Pour créer le projet

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

MainWindow.xaml s'ouvre dans le Concepteur WPF.
Ajoutez une nouvelle classe nommée Student au projet. Pour plus d'informations, consultez Comment : ajouter de nouveaux éléments de projet.

Remplacez le code généré automatiquement par le code suivant.

Imports System
Imports System.Collections.ObjectModel
Imports System.Windows

' Student is a simple class that stores a name and an 
' IsEnrolled value. 
Public Class Student

    ' The default constructor is required for creation from XAML. 
    Public Sub New()
    End Sub

    ' The StudentName property is a string that holds the first and last name. 
    Public Property StudentName As String

    ' The IsEnrolled property gets or sets a value indicating whether 
    ' the student is currently enrolled. 
    Public Property IsEnrolled As Boolean

End Class

' The StudentList collection is declared for convenience, 
' because declaring generic types in XAML is inconvenient. 
Public Class StudentList
    Inherits ObservableCollection(Of Student)
End Class

using System;
using System.Collections.ObjectModel;
using System.Windows;

namespace DataBindingDemo
{
    // Student is a simple class that stores a name and an
    // IsEnrolled value.
    public class Student 
    {   
        // The default constructor is required for creation from XAML.
        public Student()
        {
        }

        // The StudentName property is a string that holds the first and last name.
        public string StudentName { get; set; }

        // The IsEnrolled property gets or sets a value indicating whether
        // the student is currently enrolled.
        public bool IsEnrolled { get; set; }
    }

    // The StudentList collection is declared for convenience,
    // because declaring generic types in XAML is inconvenient.
    public class StudentList : ObservableCollection<Student>
    {

    }
}

Ajoutez une nouvelle classe nommée BoolToBrushConverter au projet.

Remplacez le code généré automatiquement par le code suivant.

Imports System
Imports System.Globalization
Imports System.Windows.Data
Imports System.Windows.Media

' The BoolToBrushConverter class is a value converter 
' that helps to bind a bool value to a brush property. 
<ValueConversion(GetType(Boolean), GetType(Brush))> _
Public Class BoolToBrushConverter
    Implements IValueConverter

    Public Function Convert( _
        ByVal value As Object, _
        ByVal targetType As Type, _
        ByVal parameter As Object, _
        ByVal culture As CultureInfo) As Object Implements IValueConverter.Convert

        Dim b As Brush = Nothing

        ' Only apply the conversion if value is assigned and 
        ' is of type bool. 
        If value IsNot Nothing AndAlso value.[GetType]() Is GetType(Boolean) Then
            ' true is painted with a green brush, 
            ' false with a red brush. 
            b = If(CBool(value), Brushes.Green, Brushes.Red)
        End If

        Return b
    End Function

    ' Not used. 
    Public Function ConvertBack( _
        ByVal value As Object, _
        ByVal targetType As Type, _
        ByVal parameter As Object, _
        ByVal culture As CultureInfo) As Object Implements IValueConverter.ConvertBack
        Return Nothing
    End Function

End Class

using System;
using System.Collections.Generic;
using System.Globalization;
using System.Linq;
using System.Text;
using System.Windows.Data;
using System.Windows.Media;

namespace DataBindingDemo
{
    // The BoolToBrushConverter class is a value converter
    // that helps to bind a bool value to a brush property.
    [ValueConversion(typeof(bool), typeof(Brush))]
    public class BoolToBrushConverter : IValueConverter
    {
        public object Convert(
            object value, 
            Type targetType, 
            object parameter, 
            CultureInfo culture)
        {
            Brush b = null;

            // Only apply the conversion if value is assigned and
            // is of type bool.
            if (value != null &&
                value.GetType() == typeof(bool))
            {
                // true is painted with a green brush, 
                // false with a red brush.
                b = (bool)value ? Brushes.Green : Brushes.Red;
            }

            return b;
        }

        // Not used.
        public object ConvertBack(
            object value, 
            Type targetType, 
            object parameter, 
            CultureInfo culture)
        {
            return null;
        }
    }
}

Générez le projet.
Ouvrez MainWindow.xaml dans le Concepteur WPF.

Remplacez le code XAML généré automatiquement par le code XAML suivant.

    <Window x:Class="DataBindingDemo.MainWindow"
        xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:DataBindingDemo"
        Title="Databinding Demo" Height="300" Width="300">
    <Window.Resources>

        <local:StudentList x:Key="studentCollection" >
            <local:Student StudentName="Syed Abbas" IsEnrolled="false" />
            <local:Student StudentName="Lori Kane" IsEnrolled="true" />
            <local:Student StudentName="Steve Masters" IsEnrolled="false" />
            <local:Student StudentName="Tai Yee" IsEnrolled="true" />
            <local:Student StudentName="Brenda Diaz" IsEnrolled="true" />
        </local:StudentList>

        <local:BoolToBrushConverter x:Key="boolToBrushConverter" />

        <DataTemplate x:Key="listBoxTemplate">
            <StackPanel Orientation="Horizontal" >
                <Rectangle Fill="{Binding Path=IsEnrolled, Converter={StaticResource boolToBrushConverter}}"
                           Height="10" 
                           Width="10" 
                           Margin="0,0,5,0" />
                <TextBlock Text="{Binding Path=StudentName}" />
            </StackPanel>
        </DataTemplate>

    </Window.Resources>
    <Grid></Grid>

</Window>

Assignation d'une liaison de données

Vous utilisez une Binding pour afficher la studentCollection dans le contrôle ListBox. Le Concepteur WPF permet la liaison de données sans écriture de code ou XAML.

Pour lier la ListBox à une source de données

Depuis la Boîte à outils, faites glisser un contrôle ListBox sur Window.
Dans la fenêtre Propriétés, accédez par défilement à la propriété ItemsSource.
Au niveau du bord de la colonne de gauche, cliquez sur le marqueur de propriété ().

Un menu s'affiche.

Conseil

Vous pouvez également cliquer avec le bouton droit sur la ligne pour afficher le menu.
Cliquez sur Appliquer la liaison de données.

Le générateur de liaison de données apparaît.
Sur le volet Source, dans le panneau gauche, cliquez sur StaticResource.
Dans le panneau central, cliquez sur Window.Resources.
Dans le panneau droit, cliquez sur studentCollection.

Le contrôle ListBox est rempli avec ces éléments.
Dans la fenêtre Propriétés, accédez par défilement à la propriété DisplayMemberPath et affectez-lui la valeur StudentName.

Le contrôle ListBox affiche la propriété StudentName pour chaque instance de Student dans studentCollection.

Création d'une liaison de données avec un convertisseur de valeur

Vous créez un DataTemplate pour mettre en forme vos données dans le contrôle ListBox. Dans ce projet, le DataTemplate utilise un convertisseur de valeur pour afficher une propriété booléenne sous la forme d'un carré coloré.

Pour créer une liaison de données avec un convertisseur de valeur

Dans la fenêtre Propriétés, effacez la propriété DisplayMemberPath.
Accédez par défilement à la propriété ItemTemplate.
Cliquez sur le marqueur de propriété ().
Cliquez sur Appliquer la ressource.

Le sélecteur de ressource apparaît.
Dans la section Local, cliquez sur listBoxTemplate.

Le contrôle ListBox affiche un carré rouge ou vert à côté du nom de chaque étudiant, ce qui indique si celui-ci est inscrit ou non.

Étapes suivantes

Vous pouvez affecter des propriétés aux liaisons de données à l'aide du générateur de liaisons de données. Pour plus d'informations, consultez Comment : définir les propriétés de la liaison de données à l'aide du concepteur WPF.

Voir aussi

Partager via