演练：将 Silverlight 控件绑定到对象

项目
02/21/2013

在本演练中，您将创建一个包含数据绑定控件的 Silverlight 应用程序。控件将绑定到两个相关的用户定义业务对象。

本演练阐释了以下任务：

创建 Silverlight 应用程序。
创建要绑定到用户界面的两个相关自定义对象。
运行**“数据源配置向导”以连接到填充“数据源”**窗口的自定义对象。
通过将项从**“数据源”**窗口拖到 Silverlight Designer 来创建一组数据绑定控件。

备注

对于在以下说明中使用的某些 Visual Studio 用户界面元素，您的计算机可能会显示不同的名称或位置。这些元素取决于您所使用的 Visual Studio 版本和您所使用的设置。有关更多信息，请参见 Visual Studio 设置。

系统必备

您需要以下组件来完成本演练：

Visual Studio

事先了解以下概念也很有用，但对于完成本演练并不是必需的：

使用 Silverlight Designer。有关更多信息，请参见 Silverlight。
Silverlight 数据绑定。有关更多信息，请参见 Data Binding（数据绑定）。
使用 XAML。有关更多信息，请参见 XAML。

创建 Silverlight 应用程序

通过创建 Silverlight 应用程序开始此演练。

创建 Silverlight 项目

在**“文件”**菜单上创建新项目。
在**“Visual C#”或“Visual Basic”节点下，单击“Silverlight”**，然后单击 “Silverlight 应用程序”。
在**“名称”框中，键入 SilverlightObjectBinding，然后单击“确定”**。
保留**“新建 Silverlight 应用程序”对话框中的默认设置，然后单击“确定”**。

将以包含以下两个项目的解决方案的形式创建 Silverlight 应用程序：SilverlightObjectBinding 项目，以及用于承载 SilverlightObjectBinding 项目的 SilverlightObjectBinding.Web 项目。

创建要绑定到的自定义对象

若要向应用程序公开数据，必须定义一个数据模型。在本演练中，您将为该数据模型创建表示客户和订单的自定义对象。

创建 Customers 对象

在**“解决方案资源管理器”中，右击“SilverlightObjectBinding”项目，指向“添加”，然后单击“新建项”**。
在**“添加新项”对话框中，单击“类”**项。
将名称更改为 Customer，然后单击**“添加”**。

在 Customer 代码文件中，将 Customer 类替换为下面的代码：

''' <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>
{

}

创建 Orders 对象

在**“解决方案资源管理器”中，右击“SilverlightObjectBinding”项目，指向“添加”，然后单击“新建项”**。
在**“添加新项”对话框中，单击“类”**项。
将名称更改为 Order，然后单击**“添加”**。

在 Order 代码文件中，将 Order 类替换为下面的代码：

''' <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>
{

}

生成项目。

创建对象数据源

创建一个对象数据源，并通过运行**“数据源配置向导”填充“数据源”**窗口。

创建对象数据源

在**“数据”菜单上，单击“显示数据源”**。
在**“数据源”窗口中，单击“添加新数据源”**。

出现**“数据源配置向导”**。
在**“选择数据源类型”页上，单击“对象”，然后单击“下一步”**。
在**“选择数据对象”页中，展开树视图两次，然后选中“Customers”**旁边的复选框。

备注

确保选择“Customers”，而不是单数形式的“Customer”。如果“Customers”不可用，请退出向导并重新生成解决方案。
单击**“完成”**。

将用对象数据源填充**“数据源”**窗口。

创建数据绑定控件

通过将**“Customers”和“Orders”节点从“数据源”**窗口拖到设计器，创建显示对象中的数据的控件。

创建数据绑定控件

在设计视图中打开 MainPage.xaml。
从**“数据源”窗口中，将“Customers”**节点拖到设计器。
从**“数据源”窗口中，将“Orders”**节点拖到设计器中的客户网格下方。

用数据填充对象并将它们绑定到生成的 CollectionViewSource

由于本演练使用自定义对象作为数据模型，因此在 Silverlight 页打开时将创建和加载示例数据。

从**“数据源”**窗口中拖出对象数据源后，将生成代码注释来帮助配置数据源以指向您的自定义对象。取消注释生成的代码注释，并设置 System.Windows.Data.CollectionViewSource.Source (myCollectionViewSource) 以指向您的数据对象集合。下面的过程演示如何修改生成的代码，以将其绑定到生成的控件。

每次将项从**“数据源”**窗口拖到设计器时，都会在 Silverlight 页上生成一个 System.Windows.Data.CollectionViewSource。其名称基于您使用的数据源。将显示为 'Resource Key for CollectionViewSource' 的注释替换为 CustomersViewSource 或 customerViewSource，具体情况视语言而言。

用数据填充对象并将控件绑定到对象

在**“解决方案资源管理器”中，展开“MainPage.xaml”节点，然后双击“MainPage.xaml”**代码文件。

在代码文件（MainPage.xaml.vb 或 MainPage.xaml.cs）中，将以下方法添加到 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;
}

将 UserControl_Loaded 事件处理程序中的带注释代码替换为以下代码：

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

测试应用程序

生成并运行应用程序，以验证您是否能够查看客户记录。

测试应用程序

在**“生成”菜单上，单击“生成解决方案”**。验证解决方案已生成且未发生错误。
运行该应用程序。
验证三个客户是否显示在数据网格中，并且选定客户的订单是否显示在订单网格中。
选择其他客户，并验证订单是否更新以仅显示选定客户的订单。
关闭应用程序。

后续步骤

完成本演练后，您可以执行以下相关任务：

了解如何将更改保存回数据存储。有关更多信息，请参见 Data Binding（数据绑定）。

请参见

其他资源

在 Visual Studio 中访问数据

数据访问和数据结构