共用方式為

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

  • 發行項

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

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

  • 建立 Silverlight 應用程式。

  • 建立兩個要繫結至使用者介面的相關自訂物件。

  • 執行 [資料來源組態精靈] 以連接至填入 [資料來源] 視窗的自訂物件。

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

    注意事項注意事項

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

必要條件

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

  • Visual Studio

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

  • 使用 Silverlight Designer。 如需詳細資訊，請參閱 Silverlight。

  • Silverlight 資料繫結。 如需詳細資訊，請參閱資料繫結。

  • 使用 XAML。 如需詳細資訊，請參閱 XAML (英文)。

建立 Silverlight 應用程式

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

若要建立 Silverlight 專案

  1. 在 [檔案] 功能表上，建立新專案。

  2. 按一下 [Visual C#] 或 [Visual Basic] 節點底下的 [Silverlight]，然後按一下 [Silverlight 應用程式]。

  3. 在 [名稱] 方塊中輸入 SilverlightObjectBinding，然後按一下 [確定]。

  4. 保留 [新 Silverlight 應用程式] 對話方塊中的預設設定，然後按一下 [確定]。

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

建立要繫結至的自訂物件

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

若要建立 Customers 物件

  1. 在 [方案總管] 中，以滑鼠右鍵按一下 [SilverlightObjectBinding] 專案，指向 [加入]，然後按一下 [新增項目]。

  2. 在 [加入新項目] 對話方塊中，按一下 [Class] 項目。

  3. 將名稱改成 Customer，然後按一下 [加入]。

  4. 在 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 物件

  1. 在 [方案總管] 中，以滑鼠右鍵按一下 [SilverlightObjectBinding] 專案，指向 [加入]，然後按一下 [新增項目]。

  2. 在 [加入新項目] 對話方塊中，按一下 [Class] 項目。

  3. 將名稱改成 Order，然後按一下 [加入]。

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

}

  5. 建置專案。

建立物件資料來源

執行 [資料來源組態精靈]，以建立物件資料來源並填入 [資料來源] 視窗。

建立物件資料來源

  1. 按一下 [資料] 功能表上的 [顯示資料來源]。

  2. 在 [資料來源] 視窗中，按一下 [加入新資料來源]。

    [資料來源組態精靈] 隨即出現。

  3. 按一下 [選擇資料來源類型] 頁面上的 [物件]，然後按 [下一步]。

  4. 在 [選取資料物件] 頁面中，展開樹狀檢視兩次，然後選取 [Customers] 旁邊的核取方塊。

    注意事項注意事項

    務必選取 [Customers]，而不是單數 [Customer]。如果 [Customers] 無法使用，請結束精靈並重建方案。

  5. 按一下 [完成]。

    [資料來源] 視窗中隨即填入物件資料來源。

建立資料繫結控制項

從 [資料來源] 視窗將 [Customers] 和 [Orders] 節點拖曳至設計工具，以建立顯示物件資料的控制項。

若要建立資料繫結控制項

  1. 在設計檢視中開啟 MainPage.xaml。

  2. 從 [資料來源] 視窗，將 [Customers] 節點拖曳至設計工具。

  3. 從 [資料來源] 視窗，將 [Orders] 節點拖曳至設計工具的客戶格線之下。

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

因為這個逐步解說將自訂物件用做資料模型，所以在 Silverlight 頁面開啟時會建立及載入範例資料。

從 [資料來源] 視窗拖曳物件資料來源之後，會產生程式碼註解，協助您設定指向自訂物件的資料來源。 取消註解產生的程式碼註解，並將 System.Windows.Data.CollectionViewSource.Source (myCollectionViewSource) 設為指向資料物件集合。 下列程序顯示如何修改產生的程式碼，將它繫結至產生的控制項。

每當您從 [資料來源] 視窗將項目拖曳至設計工具時，在 Silverlight 頁面上都會產生 System.Windows.Data.CollectionViewSource。 其名稱是根據使用的資料來源而定。 根據語言，將註解 'Resource Key for CollectionViewSource' 取代為 CustomersViewSource 或 customerViewSource。

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

  1. 在 [方案總管] 中展開 [MainPage.xaml] 節點，然後按兩下 [MainPage.xaml] 程式碼檔。

  2. 在程式碼檔 (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;
}

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

測試應用程式

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

若要測試應用程式

  1. 按一下 [建置] 功能表上的 [建置方案]。 接著驗證方案建置無誤。

  2. 執行應用程式。

  3. 確認資料格中顯示三個客戶，而且訂單格線中顯示所選客戶的訂單。

  4. 選取不同的客戶，並確認訂單更新為只顯示所選客戶的訂單。

  5. 請關閉應用程式。

後續步驟

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

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

請參閱

其他資源

存取 Visual Studio 中的資料

資料存取和資料結構