Procédure pas à pas : liaison de contrôles Silverlight à des objets

Article
08/10/2011

Dans cette procédure pas à pas, vous allez créer une application Silverlight qui contient des contrôles liés aux données. Les contrôles sont liés à 2 objets métier définis par l'utilisateur.

Cette procédure pas à pas décrit les tâches suivantes :

Création d'une application Silverlight
Création de 2 objets personnalisés connexes à lier à l'interface utilisateur.
Exécution de l'Assistant Configuration de source de données pour se connecter à l'objet personnalisé qui remplit la fenêtre Sources de données.
Création d'un jeu de contrôles liés aux données en faisant glisser des éléments de la fenêtre Sources de données vers le Concepteur Silverlight.

Notes

Il est possible que pour certains des éléments de l'interface utilisateur de Visual Studio, votre ordinateur affiche des noms ou des emplacements différents de ceux indiqués dans les instructions suivantes. Ces éléments dépendent de l'édition de Visual Studio dont vous disposez et des paramètres que vous utilisez. 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.

Une connaissance préalable des concepts suivants est aussi utile, mais pas obligatoire, pour effectuer cette procédure pas à pas :

Utilisation de Concepteur Silverlight. Pour plus d'informations, consultez Silverlight (page éventuellement en anglais).
Liaison de données Silverlight. Pour plus d'informations, consultez Liaison de données.
Utilisation du langage XAML. Pour plus d'informations, consultez XAML (page éventuellement en anglais).

Création de l'application Silverlight

Démarrez cette procédure pas à pas en créant une application Silverlight.

Pour créer le projet Silverlight

Dans le menu Fichier, créez un nouveau projet.
Sous le nœud Visual C# ou Visual Basic, cliquez sur Silverlight, puis sur Application Silverlight.
Dans la zone Nom, tapez LiaisonObjetsSilverlight, puis cliquez sur OK.
Conservez les paramètres par défaut de la boîte de dialogue Nouvelle application Silverlight, puis cliquez sur OK.

L'application Silverlight est créée sous forme de solution comportant 2 projets : un projet LiaisonObjetsSilverlight et un projet LiaisonObjetsSilverlight.Web utilisé pour héberger le projet LiaisonObjetsSilverlight.

Création d'objets personnalisés avec lesquels créer une liaison

Pour exposer des données dans une application, un modèle de données doit être défini. Dans cette procédure pas à pas, vous créez des objets personnalisés qui représentent des clients et des commandes pour le modèle de données.

Pour créer des objets Customers

Dans l'Explorateur de solutions, cliquez avec le bouton droit sur le projet LiaisonObjetsSilverlight, pointez sur Ajouter, puis cliquez sur Nouvel élément.
Dans la boîte de dialogue Ajouter un nouvel élément, cliquez sur l'élément Classe.
Renommez-le en Customer, puis cliquez sur Ajouter.

Dans le fichier de code Customer, remplacez la classe Customer par le code suivant :

''' <summary>
''' A single customer
''' </summary>
Public Class Customer

    Public Sub New()
    End Sub

    ''' <summary>
    ''' Creates a new customer
    ''' </summary>
    ''' <param name="customerId">The ID that uniquely identifies this customer</param>
    ''' <param name="companyName">The name for this customer</param>
    ''' <param name="city">The city for this customer</param>
    Public Sub New(ByVal customerId As String,
                   ByVal companyName As String,
                   ByVal city As String)
        customerIDValue = customerId
        companyNameValue = companyName
        cityValue = city
    End Sub

    Private customerIDValue As String
    ''' <summary>
    ''' The ID that uniquely identifies this customer
    ''' </summary>
    Public Property CustomerID() As String
        Get
            Return customerIDValue
        End Get
        Set(ByVal value As String)
            customerIDValue = value
        End Set
    End Property

    Private companyNameValue As String
    ''' <summary>
    ''' The name for this customer
    ''' </summary>
    Public Property CompanyName() As String
        Get
            Return companyNameValue
        End Get
        Set(ByVal Value As String)
            companyNameValue = Value
        End Set
    End Property

    Private cityValue As String
    ''' <summary>
    ''' The city for this customer
    ''' </summary>
    Public Property City() As String
        Get
            Return cityValue
        End Get
        Set(ByVal Value As String)
            cityValue = Value
        End Set
    End Property

    Private ordersValue As Orders
    ''' <summary>
    ''' The orders for this customer
    ''' </summary>
    Public Property Orders As Orders
        Get
            Return ordersValue
        End Get
        Set(ByVal value As Orders)
            ordersValue = value
        End Set
    End Property


    Public Overrides Function ToString() As String
        Return Me.CompanyName & " (" & Me.CustomerID & ")"
    End Function
End Class


''' <summary>
''' A collection of Customer objects.
''' </summary>
''' <remarks></remarks>
Public Class Customers
    Inherits System.Collections.Generic.List(Of Customer)

End Class

/// <summary>
/// A single customer
/// </summary>
public class Customer
{
    /// <summary>
    /// Creates a new customer
    /// </summary>
    public Customer()
    {
    }

    /// <summary>
    /// Creates a new customer
    /// </summary>
    /// <param name="customerID"></param>
    /// <param name="companyName"></param>
    /// <param name="city"></param>
    public Customer(string customerID, string companyName,
       string city)
    {
        customerIDValue = customerID;
        companyNameValue = companyName;
        cityValue = city;
    }

    private string customerIDValue;
    /// <summary>
    /// The ID that uniquely identifies this customer
    /// </summary>
    public string CustomerID
    {
        get { return customerIDValue; }
        set { customerIDValue = value; }
    }

    private string companyNameValue;
    /// <summary>
    /// The name for this customer
    /// </summary>
    public string CompanyName
    {
        get { return companyNameValue; }
        set { companyNameValue = value; }
    }

    private string cityValue;
    /// <summary>
    /// The city for this customer
    /// </summary>
    public string City
    {
        get { return cityValue; }
        set { cityValue = value; }
    }

    private Orders ordersValue;
    /// <summary>
    /// The orders for this customer
    /// </summary>
    public Orders Orders
    {
        get { return ordersValue; }
        set { ordersValue = value; }
    }

    public override string ToString()
    {
        return this.CompanyName + " (" + this.CustomerID + ")";
    }
}

/// <summary>
/// A collection of Customer objects
/// </summary>
public class Customers : System.Collections.Generic.List<Customer>
{

}

Pour créer des objets Orders

Dans l'Explorateur de solutions, cliquez avec le bouton droit sur le projet LiaisonObjetsSilverlight, pointez sur Ajouter, puis cliquez sur Nouvel élément.
Dans la boîte de dialogue Ajouter un nouvel élément, cliquez sur l'élément Classe.
Renommez-le en Order, puis cliquez sur Ajouter.

Dans le fichier de code Order, remplacez la classe Order par le code suivant :

''' <summary>
''' A single order
''' </summary>
Public Class Order

    Public Sub New()
    End Sub

    ''' <summary>
    ''' Creates a new order
    ''' </summary>
    ''' <param name="orderid">The identifier for this order</param>
    ''' <param name="customerID">The customer who placed this order</param>
    Public Sub New(ByVal orderid As Integer,
                   ByVal customerID As String)
        orderIDValue = orderid
        customerIDValue = customerID
    End Sub

    Private orderIDValue As Integer
    ''' <summary>
    ''' Identifier for this order
    ''' </summary>
    Public Property OrderID() As Integer
        Get
            Return orderIDValue
        End Get
        Set(ByVal value As Integer)
            orderIDValue = value
        End Set
    End Property

    Private customerIDValue As String
    ''' <summary>
    ''' The customer who placed this order
    ''' </summary>
    Public Property CustomerID() As String
        Get
            Return customerIDValue
        End Get
        Set(ByVal Value As String)
            customerIDValue = Value
        End Set
    End Property
End Class

''' <summary>
''' A collection of Orders
''' </summary>
Public Class Orders
    Inherits System.Collections.Generic.List(Of Order)

End Class

/// <summary>
/// A single order
/// </summary>
public class Order
{
    /// <summary>
    /// Creates a new order
    /// </summary>
    /// <param name="orderid"></param>
    /// <param name="customerID"></param>
    public Order(int orderid, string customerID)
    {
        orderIDValue = orderid;
        customerIDValue = customerID;
    }

    private int orderIDValue;
    /// <summary>
    /// The ID that uniquely identifies this order
    /// </summary>
    public int OrderID
    {
        get { return orderIDValue; }
        set { orderIDValue = value; }
    }

    private string customerIDValue;
    /// <summary>
    /// The customer who placed this order
    /// </summary>
    public string CustomerID
    {
        get { return customerIDValue; }
        set { customerIDValue = value; }
    }
}

/// <summary>
/// A collection of Order objects
/// </summary>
public class Orders : System.Collections.Generic.List<Order>
{

}

Générez le projet.

Création de la source de données objet

Créez une source de données Objet et remplissez la fenêtre Sources de données en exécutant l'Assistant Configuration de source de données.

Pour créer la source de données objet

Dans le menu Données, cliquez sur Afficher les sources de données.
Dans la fenêtre Sources de données, cliquez sur Ajouter une nouvelle source de données.

L'Assistant Configuration de source de données s'affiche.
Sur la page Choisir un type de source de données, cliquez sur Objet, puis sur Suivant.
Sur la page Sélectionner les objets de données, développez l'arborescence deux fois, puis activez la case à cocher en regard de Customers.

Notes

Veillez à sélectionner Customers, et non Customer au singulier. Si Customers n'est pas disponible, quittez l'Assistant et régénérez la solution.
Cliquez sur Terminer.

La fenêtre Sources de données contient la source de données Objet.

Création des contrôles liés aux données

Créez des contrôles qui affichent les données dans les objets en faisant glisser les nœuds Customers et Orders de la fenêtre Sources de données vers le concepteur.

Pour créer les contrôles liés aux données

Ouvrez MainPage.xaml en mode Design.
Faites glisser le nœud Customers de la fenêtre Sources de données jusqu'au concepteur.
Dans la fenêtre Sources de données, faites glisser le nœud Orders vers le concepteur sous la grille des clients.

Remplir les objets avec des données et les lier au CollectionViewSource généré

Dans la mesure où cette procédure pas à pas utilise des objets personnalisés en tant que modèle de données, les exemples de données sont créés et chargés lorsque la page Silverlight s'ouvre.

Une fois que vous avez fait glisser une source de données Objet de la fenêtre Sources de données, un commentaire de code est généré pour aider à configurer la source de données afin qu'elle pointe sur votre objet personnalisé. Supprimez les marques de commentaire du code généré et définissez [System.Windows.Data.CollectionViewSource.Source] (myCollectionViewSource) de façon à pointer sur votre collection d'objets de données. La procédure suivante indique comment modifier le code généré pour le lier aux contrôles générés.

Chaque fois que vous faites glisser des éléments de la fenêtre Sources de données vers le concepteur, un [System.Windows.Data.CollectionViewSource] est généré dans la page Silverlight. Son nom est basé sur la source de données que vous utilisez. Remplacez le commentaire : 'Resource Key for CollectionViewSource' par CustomersViewSource ou customerViewSource, selon le langage.

Pour remplir les objets avec les données et lier les contrôles aux objets

Dans l'Explorateur de solutions, développez le nœud MainPage.xaml, puis double-cliquez sur le fichier de code MainPage.xaml.

Dans le fichier de code (MainPage.xaml.vb ou MainPage.xaml.cs) ajoutez la méthode suivante à la classe MainPage :

' Create sample data.
Private Function GetCustomers() As Customers

    Dim customers As New Customers

    ' Create 3 sample customers,
    ' each with 3 sample orders.
    Dim cust1 As New Customer("1", "A Bike Store", "Seattle")
    Dim cust1Orders As New Orders
    cust1Orders.Add(New Order(1, cust1.CustomerID))
    cust1Orders.Add(New Order(2, cust1.CustomerID))
    cust1Orders.Add(New Order(3, cust1.CustomerID))
    cust1.Orders = cust1Orders

    Dim cust2 As New Customer("2", "Progressive Sports", "Renton")
    Dim cust2Orders As New Orders
    cust2Orders.Add(New Order(4, cust2.CustomerID))
    cust2Orders.Add(New Order(5, cust2.CustomerID))
    cust2Orders.Add(New Order(6, cust2.CustomerID))
    cust2.Orders = cust2Orders

    Dim cust3 As New Customer("3", "Advanced Bike Components", "Irving")
    Dim cust3Orders As New Orders
    cust3Orders.Add(New Order(7, cust3.CustomerID))
    cust3Orders.Add(New Order(8, cust3.CustomerID))
    cust3Orders.Add(New Order(9, cust3.CustomerID))
    cust3.Orders = cust3Orders

    ' Add the sample customer objects to the 
    ' Customers collection.
    customers.Add(cust1)
    customers.Add(cust2)
    customers.Add(cust3)

    Return customers
End Function

// Create sample data.
private Customers GetCustomers()
{
    Customers customers = new Customers();

    // Create 3 sample customers,
    // each with 3 sample orders.
    Customer cust1 = new Customer("1", "A Bike Store", "Seattle");
    Orders cust1Orders = new Orders();
    cust1Orders.Add(new Order(1, cust1.CustomerID));
    cust1Orders.Add(new Order(2, cust1.CustomerID));
    cust1Orders.Add(new Order(3, cust1.CustomerID));
    cust1.Orders = cust1Orders;

    Customer cust2 = new Customer("2", "Progressive Sports", "Renton");
    Orders cust2Orders = new Orders();
    cust2Orders.Add(new Order(4, cust2.CustomerID));
    cust2Orders.Add(new Order(5, cust2.CustomerID));
    cust2Orders.Add(new Order(6, cust2.CustomerID));
    cust2.Orders = cust2Orders;

    Customer cust3 = new Customer("3", "Advanced Bike Components", "Irving");
    Orders cust3Orders = new Orders();
    cust3Orders.Add(new Order(7, cust3.CustomerID));
    cust3Orders.Add(new Order(8, cust3.CustomerID));
    cust3Orders.Add(new Order(9, cust3.CustomerID));
    cust3.Orders = cust3Orders;

    // Add the sample customer objects to the 
    // Customers collection.
    customers.Add(cust1);
    customers.Add(cust2);
    customers.Add(cust3);

    return customers;
}

Remplacez le code commenté dans le gestionnaire d'événements UserControl_Loaded par le code suivant :

Private Sub UserControl_Loaded(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles MyBase.Loaded

    'Do not load your data at design time.
    If Not (System.ComponentModel.DesignerProperties.GetIsInDesignMode(Me)) Then
        'Load your data here and assign the result to the CollectionViewSource.
        Dim myCollectionViewSource As System.Windows.Data.CollectionViewSource = CType(Me.Resources("CustomersViewSource"), System.Windows.Data.CollectionViewSource)
        myCollectionViewSource.Source = GetCustomers()
    End If
End Sub

private void UserControl_Loaded(object sender, RoutedEventArgs e)
{

    // Do not load your data at design time.
    if (!System.ComponentModel.DesignerProperties.GetIsInDesignMode(this))
    {
        //Load your data here and assign the result to the CollectionViewSource.
        System.Windows.Data.CollectionViewSource myCollectionViewSource = (System.Windows.Data.CollectionViewSource)this.Resources["customersViewSource"];
        myCollectionViewSource.Source = GetCustomers();
    }
}

Test de l'application

Générez et exécutez l'application pour vérifier que vous pouvez afficher les enregistrements de client.

Pour tester l'application

Dans le menu Générer, cliquez sur Générer la solution. Vérifiez que la solution est générée sans erreur.
Exécutez l'application.
Vérifiez que les 3 clients s'affichent dans la grille de données et que les commandes client sélectionnées sont affichées dans la grille des commandes.
Sélectionnez un client différent et vérifiez que les commandes sont mises à jour et affichent uniquement les commandes du client sélectionné.
Fermez l'application.

Étapes suivantes

À l'issue de cette procédure pas à pas, vous pourrez effectuer les tâches connexes suivantes :

Apprenez comment répercuter les modifications dans votre magasin de données. Pour plus d'informations, consultez Liaison de données.

Voir aussi

Autres ressources

Accès aux données dans Visual Studio

Accès aux données et structures de données

Share via