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

在這個逐步解說中，您將建立包含資料繫結控制項的 WPF 應用程式。 這些控制項是繫結至封裝在資料集中的產品記錄。 您也將會加入可瀏覽產品以及儲存產品記錄變更的按鈕。

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

• 建立 WPF 應用程式以及從 AdventureWorksLT 範例資料庫中的資料所產生的資料集。

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

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

• 建立可將使用者對產品記錄所做的變更儲存至資料表和基礎資料來源的按鈕。

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

必要條件

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

• Visual Studio 2010。

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

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

• 資料集和 TableAdapter。 如需詳細資訊，請參閱使用 Visual Studio 中的資料集和 TableAdapter 概觀。

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

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

建立專案

建立新的 WPF 專案。 此專案將會顯示產品記錄。

若要建立專案

1. 啟動 Visual Studio。

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

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

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

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

   Visual Studio 隨即建立 AdventureWorksProductsEditor 專案。

建立應用程式的資料集

在建立資料繫結控制項之前，必須先定義應用程式的資料模型並將其加入至 [資料來源] 視窗。 在這個逐步解說中，您會建立資料集做為資料模型。

若要建立資料集

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

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

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

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

3. 在 [選擇資料來源類型] 頁面上，選取 [資料庫]，再按 [下一步]。

4. 在 [選擇資料庫模型] 頁面上，選取 [資料集]，再按 [下一步]。

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

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

     -或-

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

6. 在 [將連接字串儲存至應用程式組態檔] 頁面上，選取 [是，將連接儲存為] 核取方塊，然後按 [下一步]。

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

8. 按一下 [完成]。

   Visual Studio 隨即將新的 AdventureWorksLTDataSet.xsd 檔案加入至專案，並將對應的 [AdventureWorksLTDataSet] 項目加入至 [資料來源] 視窗。 AdventureWorksLTDataSet.xsd 檔案會定義名稱為 AdventureWorksLTDataSet 的具型別資料集以及名稱為 ProductTableAdapter 的 TableAdapter。 在這個逐步解說稍後的內容中，您會使用 ProductTableAdapter 在資料集中填入資料並將變更儲存回資料庫。

9. 建置專案。

編輯 TableAdapter 的預設 Fill 方法

若要在資料集中填入資料，請使用 ProductTableAdapter 的 Fill 方法。 根據預設，Fill 方法會使用 Product 資料表的所有資料列來填入 AdventureWorksLTDataSet 中的 ProductDataTable。 您可以修改這個方法，只傳回資料列的子集。 在這個逐步解說中，修改 Fill 方法，只傳回有相片之產品的資料列。

若要載入有相片的產品資料列

1. 在 [方案總管] 中，按兩下 AdventureWorksLTDataSet.xsd 檔案。

   DataSet 設計工具隨即開啟。

2. 在設計工具中，以滑鼠右鍵按一下 [Fill,GetData()] 查詢，然後選取 [設定]。

   [TableAdapter 組態精靈] 隨即開啟。

3. 在 [輸入 SQL 陳述式] 頁面中，將下列 WHERE 子句加在文字方塊中 SELECT 陳述式的後面。

   WHERE ThumbnailPhotoFileName <> 'no_image_available_small.gif'
   

4. 按一下 [完成]。

定義使用者介面

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

若要定義視窗的使用者介面

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

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

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

   <Grid.RowDefinitions>
       <RowDefinition Height="75" />
       <RowDefinition Height="625" />
   </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. 建置專案。

建立資料繫結控制項

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

若要建立資料繫結控制項

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

2. 展開 [Product] 節點。

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

   • ProductCategoryID

   • ProductModelID

   • ThumbnailPhotoFileName

   • rowguid

   • ModifiedDate

4. 按一下 [ThumbNailPhoto] 節點旁邊的下拉式功能表，然後選取 [圖像]。

   注意事項
   根據預設，[資料來源] 視窗中表示圖片的項目會將其控制項設定為 [無]。 因為圖片以位元組陣列儲存在資料庫中，而且位元組陣列可以包含任何項目，從簡單位元組陣列到大型應用程式的可執行檔。

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

   Visual Studio 會產生 XAML，其定義了繫結至 Products 資料表之資料的一組控制項。 此外還會產生可載入資料的程式碼。 如需產生之 XAML 和程式碼的詳細資訊，請參閱將 WPF 控制項繫結至 Visual Studio 中的資料。

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

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

巡覽產品記錄

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

若要讓使用者巡覽產品記錄

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

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

2. 修改 Window_Loaded 事件處理常式，讓 ProductViewSource、AdventureWorksLTDataSet 和 AdventureWorksLTDataSetProductTableAdapter 位於方法之外且整個表單都可以存取。 只將這些宣告為表單全域的，並以下列方式將其指派至 Window_Loaded 事件處理常式：

   Dim ProductViewSource As System.Windows.Data.CollectionViewSource
   Dim AdventureWorksLTDataSet As AdventureWorksProductsEditor.AdventureWorksLTDataSet
   Dim AdventureWorksLTDataSetProductTableAdapter As AdventureWorksProductsEditor.AdventureWorksLTDataSetTableAdapters.ProductTableAdapter
   
   Private Sub Window_Loaded(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles MyBase.Loaded
       AdventureWorksLTDataSet = CType(Me.FindResource("AdventureWorksLTDataSet"), AdventureWorksProductsEditor.AdventureWorksLTDataSet)
       'Load data into the table Product. You can modify this code as needed.
       AdventureWorksLTDataSetProductTableAdapter = New AdventureWorksProductsEditor.AdventureWorksLTDataSetTableAdapters.ProductTableAdapter()
       AdventureWorksLTDataSetProductTableAdapter.Fill(AdventureWorksLTDataSet.Product)
       ProductViewSource = CType(Me.FindResource("ProductViewSource"), System.Windows.Data.CollectionViewSource)
       ProductViewSource.View.MoveCurrentToFirst()
   End Sub
   

   private AdventureWorksProductsEditor.AdventureWorksLTDataSet AdventureWorksLTDataSet;
   private AdventureWorksProductsEditor.AdventureWorksLTDataSetTableAdapters.ProductTableAdapter adventureWorksLTDataSetProductTableAdapter;
   private System.Windows.Data.CollectionViewSource productViewSource;
   
   private void Window_Loaded(object sender, RoutedEventArgs e)
   {
       AdventureWorksLTDataSet = ((AdventureWorksProductsEditor.AdventureWorksLTDataSet)(this.FindResource("adventureWorksLTDataSet")));
       // Load data into the table Product. You can modify this code as needed.
       adventureWorksLTDataSetProductTableAdapter = new AdventureWorksProductsEditor.AdventureWorksLTDataSetTableAdapters.ProductTableAdapter();
       adventureWorksLTDataSetProductTableAdapter.Fill(AdventureWorksLTDataSet.Product);
       productViewSource = ((System.Windows.Data.CollectionViewSource)(this.FindResource("productViewSource")));
       productViewSource.View.MoveCurrentToFirst();
   }
   

3. 將下列程式碼加入至 backButton_Click 事件處理常式：

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

   if (productViewSource.View.CurrentPosition > 0)
   {
       productViewSource.View.MoveCurrentToPrevious();
   }
   

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

5. 將下列程式碼加入至 nextButton_Click 事件處理常式：

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

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

儲存產品記錄變更

加入可讓使用者透過 [儲存變更] 按鈕儲存產品記錄變更的程式碼。

若要加入可儲存產品記錄變更的能力

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

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

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

   AdventureWorksLTDataSetProductTableAdapter.Update(AdventureWorksLTDataSet.Product)
   

   adventureWorksLTDataSetProductTableAdapter.Update(AdventureWorksLTDataSet.Product);
   

   注意事項
   這個範例使用 TableAdapter 的 Save 方法來儲存變更。 在這個逐步解說中，這是適當的方法，因為只會變更一個資料表。 如果您必須將變更儲存至多個資料表，可以改用 Visual Studio 以您的資料集所產生 TableAdapterManager 的 UpdateAll 方法。 如需詳細資訊，請參閱 TableAdapterManager 概觀。

測試應用程式

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

若要測試應用程式

1. 請按 F5。

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

   • 文字方塊會顯示來自第一個有相片之產品記錄的資料。 這個產品具有產品 ID 713 以及名稱 Long-Sleeve Logo Jersey, S。

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

2. 在其中一個產品記錄中，變更 [大小] 值，然後按一下 [儲存變更]。

3. 關閉應用程式，然後在 Visual Studio 中按 F5 重新啟動應用程式。

4. 巡覽至您剛變更的產品記錄，確認變更已保存。

5. 請關閉應用程式。

後續步驟

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

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

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

請參閱

工作

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

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

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

概念

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

使用 Visual Studio 中的資料集

WPF 和 Silverlight 設計工具概觀

資料繫結概觀