逐步解說：將 WPF 控制項繫結至 WCF 資料服務

在這個逐步解說中，您將建立包含資料繫結控制項的 WPF 應用程式。 這些控制項是繫結至封裝在 WCF 資料服務中的客戶記錄。 您也將會加入客戶可用來檢視及更新記錄的按鈕。

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

• 建立從 AdventureWorksLT 範例資料庫中的資料所產生的實體資料模型。

• 建立可將實體資料模型中的資料公開至 WPF 應用程式的 WCF 資料服務。

• 從 [資料來源] 視窗將項目拖曳至 WPF 設計工具，建立一組資料繫結控制項。

• 建立可向前和向後巡覽客戶記錄的按鈕。

• 建立可將控制項資料變更儲存至 WCF 資料服務和基礎資料來源的按鈕。

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

必要條件

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

• Visual Studio 2010。

• 存取附加了 AdventureWorksLT 範例資料庫之執行中的 SQL Server 或 SQL Server Express 執行個體。 您可以從 CodePlex 網站 (英文) 下載 AdventureWorksLT 資料庫。

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

• WCF 資料服務。 如需詳細資訊，請參閱 ADO.NET Data Services Framework Overview。

• WCF 資料服務中的資料模型。 如需詳細資訊，請參閱Data Model。

• 實體資料模型和 ADO.NET Entity Framework。 如需詳細資訊，請參閱Entity Data Model和Introducing the Entity Framework。

• 使用 WPF 設計工具。 如需詳細資訊，請參閱 WPF 和 Silverlight 設計工具概觀。

• WPF 資料繫結。 如需詳細資訊，請參閱資料繫結概觀。

建立服務專案

此逐步解說從建立 WCF 資料服務專案開始。

若要建立服務專案

1. 啟動 Visual Studio。

2. 在 [檔案] 功能表上，指向 [新增]，然後按一下 [專案]。

3. 展開 [Visual C#] 或 [Visual Basic]，然後選取 [Web]。

4. 選取 [ASP.NET Web 應用程式] 專案範本。

5. 在 [名稱] 方塊中輸入 AdventureWorksService，再按一下 [確定]。

   Visual Studio 隨即建立 AdventureWorksService 專案。

6. 在 [方案總管] 中，以滑鼠右鍵按一下 Default.aspx，然後選取 [刪除]。 這個逐步解說中不需要這個檔案。

建立服務的實體資料模型

若要使用 WCF 資料服務將資料公開至應用程式，必須定義服務的資料模型。 WCF 資料服務支援兩種資料模型：實體資料模型以及透過實作 IQueryable<T> 介面的 Common Language Runtime (CLR) 物件所定義的自訂資料模型。 在這個逐步解說中，您會建立實體資料模型做為資料模型之用。

若要建立實體資料模型

1. 在 [專案] 功能表上按一下 [加入新項目]。

2. 選取 [ADO.NET 實體資料模型] 專案項目。

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

   [實體資料模型精靈] 隨即出現。

4. 在 [選擇模型內容] 頁面上，按一下 [從資料庫產生]，再按 [下一步]。

5. 在 [選擇資料連接] 頁面上，選取下列其中一個選項：

   • 如果下拉式清單中提供 AdventureWorksLT 範例資料庫的資料連接，請選取這個資料連接。

     -或-

   • 按一下 [新增連接]，建立與 AdventureWorksLT 資料庫的連接。

6. 在 [選擇資料連接] 頁面上，確定已選取 [另存 App.Config 中的實體連接字串為] 選項，然後按 [下一步]。

7. 在 [選擇您的資料庫物件] 頁面上，展開 [資料表]，然後選取 [SalesOrderHeader] 資料表。

8. 按一下 [完成]。

建立服務

建立 WCF 資料服務，將實體資料模型中的資料公開至 WPF 應用程式。

若要建立服務

1. 在 [專案] 功能表中選取 [加入新項目]。

2. 選取 [WCF 資料服務] 專案項目。

3. 在 [名稱] 方塊中輸入 AdventureWorksService.svc，再按一下 [加入]。

   Visual Studio 隨即將 AdventureWorksService.svc 加入至專案。

設定服務

您必須設定服務，以處理建立的實體資料模型。

若要設定服務

1. 在 AdventureWorks.svc 程式碼檔中，以下列程式碼取代 AdventureWorksService 類別宣告。

   Public Class AdventureWorksService
       Inherits DataService(Of AdventureWorksLTEntities)
   
       ' This method is called only once to initialize service-wide policies.
       Public Shared Sub InitializeService(ByVal config As IDataServiceConfiguration)
           config.SetEntitySetAccessRule("SalesOrderHeaders", EntitySetRights.All)
           config.UseVerboseErrors = True
       End Sub
   End Class
   

   public class AdventureWorksService : DataService<AdventureWorksLTEntities>
   {
       // This method is called only once to initialize service-wide policies.
       public static void InitializeService(IDataServiceConfiguration config)
       {
           config.SetEntitySetAccessRule("SalesOrderHeaders", EntitySetRights.All);
       }
   }
   

   此程式碼會更新 AdventureWorksService 類別，使其衍生自處理實體資料模型中 AdventureWorksLTEntities 物件內容類別的 DataService<T>。 它也會更新 InitializeService 方法，以允許服務的用戶端對 SalesOrderHeader 實體的完整讀取/寫入存取權。

   如需 ADO.NET Entity Framework 中物件內容類別的詳細資訊，請參閱Object Services Overview (Entity Framework)。

2. 建置專案並驗證專案建置無誤。

建立 WPF 用戶端應用程式

若要顯示 WCF 資料服務中的資料，請建立新的 WPF 應用程式，且其具有以服務為基礎的資料來源。 在此逐步解說稍後的內容中，您會將資料繫結控制項加入至此應用程式。

若要建立 WPF 用戶端應用程式

1. 在 [方案總管] 中，以滑鼠右鍵按一下方案節點，然後按一下 [加入]，再選取 [新增專案]。

   注意事項
   在 Visual Basic 專案中，方案節點只有在已選取選項對話方塊、專案和方案、一般中的 [永遠顯示方案] 核取方塊時，才會出現在 [方案總管] 中。

2. 在 [新增專案] 對話方塊中，展開 [Visual C#] 或 [Visual Basic]，然後選取 [視窗]。

3. 選取 [WPF 應用程式] 專案範本。

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

   Visual Studio 會將 AdventureWorksSalesEditor 專案加入至方案。

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

   [資料來源] 視窗隨即開啟。

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

   [資料來源組態精靈] 隨即開啟。

7. 在精靈的 [選擇資料來源類型] 頁面上選取 [服務]，然後按 [下一步]。

8. 在 [加入服務參考] 對話方塊中，按一下 [探索]。

   Visual Studio 會搜尋目前方案中的可用服務，並且將 AdventureWorksService.svc 加入至 [服務] 方塊中的可用服務清單。

9. 在 [命名空間] 方塊中，輸入 AdventureWorksService。

10. 在 [服務] 方塊中，按一下 [AdventureWorksService.svc]，然後按一下 [確定]。

    Visual Studio 會下載服務資訊，然後回到 [資料來源組態精靈]。

11. 在 [加入服務參考] 頁面中，按一下 [完成]。

    Visual Studio 會將表示服務所傳回之資料的節點加入至 [資料來源] 視窗。

定義視窗的使用者介面

在 WPF 設計工具中修改 XAML，將數個按鈕加入至視窗。 在此逐步解說稍後的內容中，您會加入可讓使用者透過這些按鈕檢視及更新銷售記錄的程式碼。

若要建立視窗配置

1. 在 [方案總管] 中按兩下 MainWindow.xaml。

   視窗隨即在 WPF 設計工具中開啟。

2. 在設計工具的 XAML 檢視中，在 <Grid> 標記之間加入下列程式碼：

   <Grid.RowDefinitions>
       <RowDefinition Height="75" />
       <RowDefinition Height="525" />
   </Grid.RowDefinitions>
   <Button HorizontalAlignment="Left" Margin="22,20,0,24" Name="backButton" Width="75">&lt;</Button>
   <Button HorizontalAlignment="Left" Margin="116,20,0,24" Name="nextButton" Width="75">&gt;</Button>
   <Button HorizontalAlignment="Right" Margin="0,21,46,24" Name="saveButton" Width="110">Save changes</Button>
   

3. 建置專案。

建立資料繫結控制項

從 [資料來源] 視窗將 SalesOrderHeaders 節點拖曳至設計工具，以建立顯示客戶記錄的控制項。

若要建立資料繫結控制項

1. 在 [資料來源] 視窗中，按一下 [SalesOrderHeaders] 節點的下拉式功能表，然後選取 [詳細資料]。

2. 展開 [SalesOrderHeaders] 節點。

3. 在這個範例中，某些欄位不會顯示，因此請按一下下列節點旁的下拉式功能表，然後選取 [無]：

   • CreditCardApprovalCode

   • ModifiedDate

   • OnlineOrderFlag

   • RevisionNumber

   • rowguid

   這個動作可防止 Visual Studio 在下一個步驟中為這些節點建立資料繫結控制項。 在此逐步解說中，假設使用者不需要看到此資料。

4. 從 [資料來源] 視窗將 [SalesOrderHeaders] 節點拖曳至包含按鈕的資料列底下的方格資料列。

   Visual Studio 會產生 XAML 和程式碼，其建立繫結至 Product 資料表之資料的一組控制項。 如需產生之 XAML 和程式碼的詳細資訊，請參閱將 WPF 控制項繫結至 Visual Studio 中的資料。

5. 在設計工具中，按一下 [客戶 ID] 標籤旁邊的文字方塊。

6. 在 [屬性] 視窗中，選取 IsReadOnly 屬性旁邊的核取方塊。

7. 設定下列每個文字方塊的 IsReadOnly 屬性：

   • 訂單編號

   • 銷售訂單 ID

   • 銷售訂單號碼

從服務載入資料

使用服務 Proxy 物件，從服務載入銷售資料，然後將傳回的資料指派給 WPF 視窗中 CollectionViewSource 的資料來源。

若要從服務載入資料

1. 在設計工具中按兩下 [MainWindow] 文字，以建立 Window_Loaded 事件處理常式。

2. 以下列程式碼取代事件處理常式。 務必以開發電腦的本機主機位址取代此程式碼中的 localhost 位址。

   Private DataServiceClient As AdventureWorksService.AdventureWorksLTEntities
   Private SalesQuery As System.Data.Services.Client.DataServiceQuery(Of AdventureWorksService.SalesOrderHeader)
   Private OrdersViewSource As CollectionViewSource
   
   Private Sub Window_Loaded(ByVal Sender As Object, ByVal e As RoutedEventArgs) Handles MyBase.Loaded
   
       ' TODO: Modify the port number in the following URI as required.
       DataServiceClient = New AdventureWorksService.AdventureWorksLTEntities( _
       New Uri("https://localhost:32415/AdventureWorksService.svc"))
       SalesQuery = DataServiceClient.SalesOrderHeaders
   
       OrdersViewSource = CType(Me.FindResource("SalesOrderHeadersViewSource"), CollectionViewSource)
       OrdersViewSource.Source = SalesQuery.Execute()
       OrdersViewSource.View.MoveCurrentToFirst()
   End Sub
   

   private AdventureWorksService.AdventureWorksLTEntities dataServiceClient;
   private System.Data.Services.Client.DataServiceQuery<AdventureWorksService.SalesOrderHeader> salesQuery;
   private CollectionViewSource ordersViewSource;
   
   private void Window_Loaded(object sender, RoutedEventArgs e)
   {
       // TODO: Modify the port number in the following URI as required.
       dataServiceClient = new AdventureWorksService.AdventureWorksLTEntities(
           new Uri("https://localhost:45899/AdventureWorksService.svc"));
       salesQuery = dataServiceClient.SalesOrderHeaders;
   
       ordersViewSource = ((CollectionViewSource)(this.FindResource("salesOrderHeadersViewSource")));
       ordersViewSource.Source = salesQuery.Execute();
       ordersViewSource.View.MoveCurrentToFirst();
   }
   

巡覽銷售記錄

加入可讓使用者透過 < 和 > 按鈕捲動銷售記錄的程式碼。

若要讓使用者巡覽銷售記錄

1. 在設計工具中，按兩下視窗介面上的 < 按鈕。

   Visual Studio 會開啟程式碼後置檔案，並建立 Click 事件的新 backButton_Click 事件處理常式。

2. 以下列程式碼取代產生的 backButton_Click 事件處理常式：

   If OrdersViewSource.View.CurrentPosition > 0 Then
       OrdersViewSource.View.MoveCurrentToPrevious()
   End If
   

   if (ordersViewSource.View.CurrentPosition > 0)
       ordersViewSource.View.MoveCurrentToPrevious();
   

3. 回到設計工具，然後按兩下 > 按鈕。

   Visual Studio 會開啟程式碼後置檔案，並建立 Click 事件的新 nextButton_Click 事件處理常式。

4. 以下列程式碼取代產生的 nextButton_Click 事件處理常式。

   If OrdersViewSource.View.CurrentPosition < CType(OrdersViewSource.View, CollectionView).Count - 1 Then
       OrdersViewSource.View.MoveCurrentToNext()
   End If
   

   if (ordersViewSource.View.CurrentPosition < ((CollectionView)ordersViewSource.View).Count - 1)
   {
       ordersViewSource.View.MoveCurrentToNext();
   }
   

儲存銷售記錄變更

加入可讓使用者透過 [儲存變更] 按鈕檢視及儲存銷售記錄變更的程式碼。

若要加入可儲存銷售記錄變更的能力

1. 在設計工具中，按兩下 [儲存變更] 按鈕。

   Visual Studio 會開啟程式碼後置檔案，並建立 Click 事件的新 saveButton_Click 事件處理常式。

2. 將下列程式碼加入至 saveButton_Click 事件處理常式。

   Dim CurrentOrder As AdventureWorksService.SalesOrderHeader = CType(OrdersViewSource.View.CurrentItem, AdventureWorksService.SalesOrderHeader)
   
   DataServiceClient.UpdateObject(CurrentOrder)
   DataServiceClient.SaveChanges()
   

   AdventureWorksService.SalesOrderHeader currentOrder = (AdventureWorksService.SalesOrderHeader)ordersViewSource.View.CurrentItem;
   dataServiceClient.UpdateObject(currentOrder);
   dataServiceClient.SaveChanges();
   

測試應用程式

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

若要測試應用程式

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

2. 按 CTRL+F5。

   Visual Studio 隨即啟動 AdventureWorksService 專案但不偵錯專案。

3. 在 [方案總管] 中，以滑鼠右鍵按一下 [AdventureWorksSalesEditor] 專案。

4. 在內容功能表上，按一下 [偵錯] 底下的 [開始新執行個體]。

   應用程式隨即執行。 驗證下列各項：

   • 文字方塊會顯示第一個擁有銷售訂單 ID [71774] 之銷售記錄的不同資料欄位。

   • 您可以按一下 > 或 < 按鈕，巡覽其他銷售記錄。

5. 在其中一個銷售記錄中，在 [註解] 方塊中輸入一些文字，然後按一下 [儲存變更]。

6. 關閉應用程式，然後從 Visual Studio 重新啟動應用程式。

7. 巡覽至您剛變更的銷售記錄，確認在關閉並重新開啟應用程式後變更已保存。

8. 請關閉應用程式。

後續步驟

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

• 學習如何使用 Visual Studio 中的 [資料來源] 視窗，將 WPF 控制項繫結至其他資料來源類型。 如需詳細資訊，請參閱逐步解說：將 WPF 控制項繫結到實體資料模型和逐步解說：將 WPF 控制項繫結到資料集。

• 學習如何使用 Visual Studio 中的 [資料來源] 視窗，顯示 WPF 控制項中的相關資料 (也就是父子關係中的資料)。 如需詳細資訊，請參閱逐步解說：顯示 WPF 應用程式中的相關資料。

請參閱

工作

HOW TO：將 WPF 控制項繫結至 Visual Studio 中的資料

逐步解說：將 WPF 控制項繫結到實體資料模型

逐步解說：將 WPF 控制項繫結到資料集

概念

將 WPF 控制項繫結至 Visual Studio 中的資料

WPF 和 Silverlight 設計工具概觀

資料繫結概觀

其他資源

ADO.NET Data Services Framework Overview

Data Model

Entity Data Model

Introducing the Entity Framework