Partager via


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

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. L'édition de Visual Studio dont vous disposez et les paramètres que vous utilisez déterminent ces éléments. Pour plus d'informations, voir Paramètres Visual Studio.

Composants requis

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

  • Visual Studio

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

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

  1. Dans le menu Fichier, créez un nouveau projet.

  2. Sous le nœud Visual C# ou Visual Basic, cliquez sur Silverlight, puis sur Application Silverlight.

  3. Dans la zone Nom, tapez LiaisonObjetsSilverlight, puis cliquez sur OK.

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

  1. Dans l'Explorateur de solutions, cliquez avec le bouton droit sur le projet LiaisonObjetsSilverlight, pointez sur Ajouter, puis cliquez sur Nouvel élément.

  2. Dans la boîte de dialogue Ajouter un nouvel élément, cliquez sur l'élément Classe.

  3. Renommez-le en Customer, puis cliquez sur Ajouter.

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

  1. Dans l'Explorateur de solutions, cliquez avec le bouton droit sur le projet LiaisonObjetsSilverlight, pointez sur Ajouter, puis cliquez sur Nouvel élément.

  2. Dans la boîte de dialogue Ajouter un nouvel élément, cliquez sur l'élément Classe.

  3. Renommez-le en Order, puis cliquez sur Ajouter.

  4. 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>
    {
    
    }
    
  5. 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

  1. Dans le menu Données, cliquez sur Afficher les sources de données.

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

  3. Sur la page Choisir un type de source de données, cliquez sur Objet, puis sur Suivant.

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

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

  1. Ouvrez MainPage.xaml en mode Design.

  2. Faites glisser le nœud Customers de la fenêtre Sources de données jusqu'au concepteur.

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

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

  2. 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;
    }
    
  3. 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

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

  2. Exécutez l'application.

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

  4. Sélectionnez un client différent et vérifiez que les commandes sont mises à jour et affichent uniquement les commandes du client sélectionné.

  5. 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 les structures de données