Export (0) Print
Expand All

Walkthrough: Binding Silverlight Controls to Objects

In this walkthrough, you will create a Silverlight application that contains data-bound controls. The controls are bound to 2 related user-defined business objects.

This walkthrough illustrates the following tasks:

  • Creating a Silverlight application.

  • Creating 2 related custom objects to bind to the user interface.

  • Running the Data Source Configuration Wizard to connect to the custom object which populates the Data Sources window.

  • Creating a set of data-bound controls by dragging items from the Data Sources window to the Silverlight Designer.

    NoteNote

    Your computer might show different names or locations for some of the Visual Studio user interface elements in the following instructions. The Visual Studio edition that you have and the settings that you use determine these elements. For more information, see Visual Studio Settings.

You need the following components to complete this walkthrough:

  • Visual Studio 2010.

Prior knowledge of the following concepts is also helpful, but not required to complete the walkthrough:

  • Working with the Silverlight Designer. For more information, see Silverlight.

  • Silverlight data binding. For more information, see Data Binding.

  • Working with XAML. For more information, see XAML.

Start this walkthrough by creating a Silverlight application.

To create the Silverlight project

  1. On the File menu, create a new project.

  2. Under the Visual C# or Visual Basic node, click Silverlight and then click Silverlight Application.

  3. In the Name box, type SilverlightObjectBinding and then click OK.

  4. Leave the default settings in the New Silverlight Application dialog box and then click OK.

    The Silverlight application is created as a solution with 2 projects: a SilverlightObjectBinding project and a SilverlightObjectBinding.Web project that is used to host the SilverlightObjectBinding project.

To expose data to an application, a data model must be defined. In this walkthrough, you create custom objects that represent customers and orders for the data model.

To create Customers objects

  1. In Solution Explorer, right-click SilverlightObjectBinding project, point to Add, and then click New Item.

  2. In the Add New Item dialog box, click the Class item.

  3. Change the name to Customer, and then click Add.

  4. In the Customer code file, replace the Customer class with the following code:

    
    /// <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>
    {
    
    }
    
    
    

To create Orders objects

  1. In Solution Explorer, right-click SilverlightObjectBinding project, point to Add, and then click New Item.

  2. In the Add New Item dialog box, click the Class item.

  3. Change the name to Order, and then click Add.

  4. In the Order code file, replace the Order class with the following code:

    
    /// <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. Build the project.

Create an object data source and populate the Data Sources window by running the Data Source Configuration Wizard.

To create the object data source

  1. On the Data menu, click Show Data Sources.

  2. In the Data Sources window, click Add New Data Source.

    The Data Source Configuration Wizard appears.

  3. In the Choose a Data Source Type page, click Object and then click Next.

  4. In the Select the Data Objects page, expand the tree view twice, and then select the check box next to Customers.

    NoteNote

    Be sure to select Customers, and not the singular Customer. If Customers is not available, exit the wizard and rebuild the solution.

  5. Click Finish.

    The Data Sources window is populated with the object data source.

Create controls that display data in the objects by dragging the Customers and Orders nodes from the Data Sources window to the designer.

To create the data-bound controls

  1. Open MainPage.xaml in design view.

  2. From the Data Sources window, drag the Customers node to the designer.

  3. From the Data Sources window, drag the Orders node to the designer below the customers grid.

Because this walkthrough uses custom objects as a data model, sample data is created and loaded when the Silverlight page opens.

After you drag an object data source from the Data Sources window, a code comment is generated to help configure the data source to point to your custom object. Uncomment the generated code comment and set System.Windows.Data.CollectionViewSource.Source (myCollectionViewSource) to point to your collection of data objects. The following procedure shows how to modify the generated code to bind it to the generated controls.

Every time that you drag items from the Data Sources window to the designer, a System.Windows.Data.CollectionViewSource is generated on the Silverlight page. Its name is based on the data source you are using. Replace the comment that reads: 'Resource Key for CollectionViewSource' with either CustomersViewSource or customerViewSource, depending on the language.

To populate the objects with data and bind the controls to the objects

  1. In Solution Explorer, expand the MainPage.xaml node, and then double-click the MainPage.xaml code file.

  2. In the code file (MainPage.xaml.vb or MainPage.xaml.cs) add the following method to the MainPage class:

    
    // 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. Replace the commented code inside the UserControl_Loaded event handler with the following:

    
    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();
        }
    }
    
    
    

Build and run the application to verify that you can view customer records.

To test the application

  1. On Build menu, click Build Solution. Verify that the solution builds without errors.

  2. Run the application.

  3. Verify the 3 Customers appear in the datagrid and the selected customer's orders are displayed in the orders grid.

  4. Select a different customer and verify the orders are updated to display only the orders of the selected customer.

  5. Close the application.

After completing this walkthrough, you can perform the following related tasks:

  • Learn how to save changes back to your data store. For more information, see Data Binding.

Community Additions

ADD
Show:
© 2014 Microsoft