逐步解說：將 Silverlight 控制項繫結至物件

發行項
08/12/2011

在這個逐步解說中，您將建立包含資料繫結控制項的 Silverlight 應用程式。這些控制項繫結至兩個相關使用者定義商務物件。

這個逐步解說將說明下列工作：

建立 Silverlight 應用程式。
建立兩個要繫結至使用者介面的相關自訂物件。
執行 [資料來源組態精靈] 以連接至填入 [資料來源] 視窗的自訂物件。

從 [資料來源] 視窗將項目拖曳至 Silverlight Designer，建立一組資料繫結控制項。

注意事項
在下列指示的某些 Visual Studio 使用者介面項目中，您的電腦可能會顯示不同的名稱或位置。您所擁有的 Visual Studio 版本和使用的設定決定了這些項目。如需詳細資訊，請參閱使用設定。

必要條件

您需要下列元件才能完成此逐步解說：

Visual Studio 2010。

預先了解下列概念也有助於完成此逐步解說 (但非必要)：

使用 Silverlight Designer。如需詳細資訊，請參閱 Silverlight。
Silverlight 資料繫結。如需詳細資訊，請參閱資料繫結。
使用 XAML。如需詳細資訊，請參閱 XAML (英文)。

建立 Silverlight 應用程式

建立 Silverlight 應用程式，開始進行這個逐步解說。

若要建立 Silverlight 專案

在 [檔案] 功能表上，建立新專案。
按一下 [Visual C#] 或 [Visual Basic] 節點底下的 [Silverlight]，然後按一下 [Silverlight 應用程式]。
在 [名稱] 方塊中輸入 SilverlightObjectBinding，然後按一下 [確定]。
保留 [新 Silverlight 應用程式] 對話方塊中的預設設定，然後按一下 [確定]。

Silverlight 應用程式是建立為有兩個專案的方案：SilverlightObjectBinding 專案以及用來裝載 SilverlightObjectBinding 專案的 SilverlightObjectBinding.Web 專案。

建立要繫結至的自訂物件

若要將資料公開至應用程式，必須定義資料模型。在這個逐步解說中，您會建立表示資料模型之客戶和訂單的自訂物件。

若要建立 Customers 物件

在 [方案總管] 中，以滑鼠右鍵按一下 [SilverlightObjectBinding] 專案，指向 [加入]，然後按一下 [新增項目]。
在 [加入新項目] 對話方塊中，按一下 [Class] 項目。
將名稱改成 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] 專案，指向 [加入]，然後按一下 [新增項目]。
在 [加入新項目] 對話方塊中，按一下 [Class] 項目。
將名稱改成 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]，而不是單數 [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();
    }
}

測試應用程式

建置並執行應用程式，以驗證您可以檢視客戶記錄。

若要測試應用程式

按一下 [建置] 功能表上的 [建置方案]。接著驗證方案建置無誤。
執行應用程式。
確認資料格中顯示三個客戶，而且訂單格線中顯示所選客戶的訂單。
選取不同的客戶，並確認訂單更新為只顯示所選客戶的訂單。
請關閉應用程式。

後續步驟

完成這個逐步解說後，您可以執行下列相關的工作：

學習如何將變更儲存回資料存放區。如需詳細資訊，請參閱資料繫結。

請參閱

其他資源

存取 Visual Studio 中的資料

資料存取和資料結構

共用方式為

逐步解說：將 Silverlight 控制項繫結至物件

必要條件

建立 Silverlight 應用程式

若要建立 Silverlight 專案

建立要繫結至的自訂物件

若要建立 Customers 物件

若要建立 Orders 物件

建立物件資料來源

建立物件資料來源

建立資料繫結控制項

若要建立資料繫結控制項

在物件中填入資料，並將這些物件繫結至產生的 CollectionViewSource

若要在物件中填入資料，並將控制項繫結至這些物件

測試應用程式

若要測試應用程式

後續步驟

請參閱

其他資源

其他資源