演练:将 Silverlight 控件绑定到对象
在本演练中,您将创建一个包含数据绑定控件的 Silverlight 应用程序。 控件将绑定到两个相关的用户定义业务对象。
本演练阐释了以下任务:
创建 Silverlight 应用程序。
创建要绑定到用户界面的两个相关自定义对象。
运行**“数据源配置向导”以连接到填充“数据源”**窗口的自定义对象。
通过将项从**“数据源”**窗口拖到 Silverlight Designer 来创建一组数据绑定控件。
提示
以下说明中的某些 Visual Studio 用户界面元素在您的计算机上出现的名称或位置可能会不同。 您安装的 Visual Studio 版本以及使用的设置决定了这些元素。 有关更多信息,请参见 使用设置。
系统必备
您需要以下组件来完成本演练:
- Visual Studio 2010.
事先了解以下概念也很有用,但对于完成本演练并不是必需的:
使用 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(数据绑定)。