Partager via


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

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

  1. 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.

  2. Ajoutez une nouvelle classe nommée Student au projet. Pour plus d'informations, consultez Comment : ajouter de nouveaux éléments de projet.

  3. 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>
        {
    
        }
    }
    
  4. Ajoutez une nouvelle classe nommée BoolToBrushConverter au projet.

  5. 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;
            }
        }
    }
    
  6. Générez le projet.

  7. Ouvrez MainWindow.xaml dans le Concepteur WPF.

  8. 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

  1. Depuis la Boîte à outils, faites glisser un contrôle ListBox sur Window.

  2. Dans la fenêtre Propriétés, accédez par défilement à la propriété ItemsSource.

  3. Au niveau du bord de la colonne de gauche, cliquez sur le marqueur de propriété (marqueur de propriété).

    Un menu s'affiche.

    Conseil

    Vous pouvez également cliquer avec le bouton droit sur la ligne pour afficher le menu.

  4. Cliquez sur Appliquer la liaison de données.

    Le générateur de liaison de données apparaît.

    générateur de liaison de données

  5. Sur le volet Source, dans le panneau gauche, cliquez sur StaticResource.

  6. Dans le panneau central, cliquez sur Window.Resources.

  7. Dans le panneau droit, cliquez sur studentCollection.

    Le contrôle ListBox est rempli avec ces éléments.

  8. 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.

    Liaison de données de la zone de liste

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

  1. Dans la fenêtre Propriétés, effacez la propriété DisplayMemberPath.

  2. Accédez par défilement à la propriété ItemTemplate.

  3. Cliquez sur le marqueur de propriété (marqueur de propriété).

  4. Cliquez sur Appliquer la ressource.

    Le sélecteur de ressource apparaît.

  5. 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.

    Liaison de données de la zone de liste avec un convertisseur de valeurs

Étapes suivantes

Voir aussi

Référence

Binding

ListBox

ItemTemplate

IValueConverter

Concepts

Vue d'ensemble de la liaison de données

Autres ressources

Utilisation du Concepteur WPF