逐步解說:將 WPF 控制項繫結到實體資料模型
在這個逐步解說中,您將建立包含資料繫結控制項的 WPF 應用程式。這些控制項是繫結至封裝在實體資料模型中的客戶記錄。您也將加入客戶可用來巡覽客戶記錄以及儲存記錄變更的按鈕。
這個逐步解說將說明下列工作:
建立 WPF 應用程式以及從 AdventureWorksLT 範例資料庫中的資料所產生的實體資料模型。
從 [資料來源] 視窗將實體拖曳至 WPF 設計工具中的視窗,以建立一組資料繫結控制項。
建立可向前和向後巡覽客戶記錄的按鈕。
建立可將控制項變更儲存至實體資料模型和基礎資料來源的按鈕。
注意事項 您的電腦可能會在下列說明中,以不同名稱或位置顯示某些 Visual Studio 使用者介面項目。您所擁有的 Visual Studio 版本以及使用的設定會決定這些項目。如需詳細資訊,請參閱 Visual Studio 設定。
必要條件
您需要下列元件才能完成此逐步解說:
Visual Studio
存取附加了 AdventureWorksLT 範例資料庫之執行中的 SQL Server 或 SQL Server Express 執行個體。您可以從 CodePlex 網站 (英文) 下載 AdventureWorksLT 資料庫。
預先了解下列概念也有助於完成此逐步解說 (但非必要):
實體資料模型和 ADO.NET Entity Framework。如需詳細資訊,請參閱 Introducing the Entity Framework。
使用 WPF 設計工具。如需詳細資訊,請參閱 WPF 和 Silverlight 設計工具概觀。
WPF 資料繫結。如需詳細資訊,請參閱資料繫結概觀。
建立專案
建立新的 WPF 專案以顯示客戶記錄。
若要建立專案
啟動 Visual Studio。
在 [檔案] 功能表上,指向 [新增],然後按一下 [專案]。
展開 [Visual Basic] 或 [Visual C#],然後選取 [視窗]。
選取 [WPF 應用程式] 專案範本。
在 [名稱] 方塊中輸入 AdventureWorksCustomerEditor,然後按一下 [確定]。
Visual Studio 隨即建立 AdventureWorksCustomerEditor 專案。
建立應用程式的實體資料模型
在建立資料繫結控制項之前,必須先定義應用程式的資料模型並將其加入至 [資料來源] 視窗。在這個逐步解說中,您會建立實體資料模型。
若要建立實體資料模型
在 [資料] 功能表上,按一下 [加入新資料來源] 以開啟 [資料來源組態精靈]。
在 [選擇資料來源類型] 頁面上,按一下 [資料庫],再按 [下一步]。
在 [選擇資料庫模型] 頁面上,按一下 [實體資料模型],再按 [下一步]。
在 [選擇模型內容] 頁面上,按一下 [從資料庫產生],再按 [下一步]。
在 [選擇資料連接] 頁面上,執行下列其中一項:
如果下拉式清單中提供 AdventureWorksLT 範例資料庫的資料連接,請選取這個資料連接。
-或-
按一下 [新增連接],建立與 AdventureWorksLT 資料庫的連接。
請確定已選取 [另存 App.Config 中的實體連接字串為] 選項,然後按 [下一步]。
在 [選擇您的資料庫物件] 頁面上,展開 [資料表],然後選取 [Customer] 資料表。
按一下 [完成]。
Model1.edmx 檔案會在設計工具中開啟。
建置專案。
定義視窗的使用者介面
將按鈕加入至視窗中修改在 WPF 設計工具中 XAML 。
若要定義視窗的使用者介面
在 [方案總管] 中按兩下 MainWindow.xaml。
視窗隨即在 WPF 設計工具中開啟。
在設計工具的 XAML 檢視中,在 <Grid> 標記之間加入下列程式碼:
<Grid.RowDefinitions> <RowDefinition Height="75" /> <RowDefinition Height="425" /> </Grid.RowDefinitions> <Button HorizontalAlignment="Left" Margin="22,20,0,24" Name="backButton" Width="75"><</Button> <Button HorizontalAlignment="Left" Margin="116,20,0,24" Name="nextButton" Width="75">></Button> <Button HorizontalAlignment="Right" Margin="0,21,46,24" Name="saveButton" Width="110">Save changes</Button>
建置專案。
建立資料繫結控制項
建立您可以從 拖曳 [資料來源] 視窗的物件顯示客戶記錄至 WPF 設計工具中的控制項。
若要建立資料繫結控制項
按一下 [資料] 功能表上的 [顯示資料來源]。
在 [資料來源] 視窗中,按一下 [Customers] 節點的下拉式功能表,然後選取 [詳細資料]。
展開 [Customers] 節點。
在這個範例中,某些欄位不會顯示,因此請按一下下列節點旁的下拉式功能表,然後選取 [無]:
NameStyle
PasswordHash
PasswordSalt
rowGuid
ModifiedDate
從 [資料來源] 視窗,將 [Customers] 節點拖曳至按鈕底下的區域。
在設計工具中,按一下 [客戶 ID] 標籤旁邊的文字方塊。
在 [屬性] 視窗中,選取 IsReadOnly 屬性旁邊的核取方塊。
建置專案。
巡覽客戶記錄
加入可讓使用者透過 < 和 > 按鈕捲動客戶記錄的程式碼。
若要讓使用者巡覽客戶記錄
在設計工具中,按兩下 < 按鈕。
Visual Studio 會開啟程式碼後置檔案,並建立 Click 事件的新 backButton_Click 事件處理常式。
修改 Window_Loaded 事件處理常式,讓 CustomersViewSource 和 AdventureWorksLTEntities 位於方法之外且整個表單都可以存取。只將這些宣告為表單全域的,並以下列方式將其指派至 Window_Loaded 事件處理常式:
Dim CustomersViewSource As System.Windows.Data.CollectionViewSource Dim AdventureWorksLTEntities As AdventureWorksCustomerEditor.AdventureWorksLTEntities Private Sub Window_Loaded(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles MyBase.Loaded CustomersViewSource = CType(Me.FindResource("CustomersViewSource"), System.Windows.Data.CollectionViewSource) AdventureWorksLTEntities = New AdventureWorksCustomerEditor.AdventureWorksLTEntities() 'Load data into Customers. You can modify this code as needed. Dim CustomersQuery As System.Data.Objects.ObjectQuery(Of AdventureWorksCustomerEditor.Customer) = Me.GetCustomersQuery(AdventureWorksLTEntities) CustomersViewSource.Source = CustomersQuery.Execute(System.Data.Objects.MergeOption.AppendOnly) End Sub
private System.Windows.Data.CollectionViewSource customersViewSource; private AdventureWorksCustomerEditor.AdventureWorksLTEntities adventureWorksLTEntities; private void Window_Loaded(object sender, RoutedEventArgs e) { adventureWorksLTEntities = new AdventureWorksCustomerEditor.AdventureWorksLTEntities(); // Load data into Customers. You can modify this code as needed. customersViewSource = ((System.Windows.Data.CollectionViewSource)(this.FindResource("customersViewSource"))); System.Data.Objects.ObjectQuery<AdventureWorksCustomerEditor.Customer> customersQuery = this.GetCustomersQuery(adventureWorksLTEntities); customersViewSource.Source = customersQuery.Execute(System.Data.Objects.MergeOption.AppendOnly); }
將下列程式碼加入至 backButton_Click 事件處理常式:
If CustomersViewSource.View.CurrentPosition > 0 Then CustomersViewSource.View.MoveCurrentToPrevious() End If
if (customersViewSource.View.CurrentPosition > 0) customersViewSource.View.MoveCurrentToPrevious();
回到設計工具,然後按兩下 > 按鈕。
Visual Studio 會開啟程式碼後置檔案,並建立 Click 事件的新 nextButton_Click 事件處理常式。
將下列程式碼加入至 nextButton _Click 事件處理常式:
If CustomersViewSource.View.CurrentPosition < CType(CustomersViewSource.View, CollectionView).Count - 1 Then CustomersViewSource.View.MoveCurrentToNext() End If
if (customersViewSource.View.CurrentPosition < ((CollectionView)customersViewSource.View).Count - 1) customersViewSource.View.MoveCurrentToNext();
檢查點
建置並執行專案,以確認程式碼編譯成功且您可以巡覽客戶記錄。
若要測試應用程式
請按 F5。
應用程式隨即建置並執行。驗證下列各項:
客戶資料會顯示。
您可以按一下 > 或 < 按鈕,巡覽客戶記錄。
儲存客戶記錄變更
加入可讓使用者透過 [儲存變更] 按鈕儲存客戶記錄變更的程式碼。
若要加入儲存客戶記錄變更的能力
在設計工具中,按兩下 [儲存變更] 按鈕。
Visual Studio 會開啟程式碼後置檔案,並建立新的 saveButton_Click 事件處理常式。
將下列程式碼加入至 saveButton_Click 事件處理常式:
AdventureWorksLTEntities.SaveChanges()
adventureWorksLTEntities.SaveChanges();
測試應用程式
建置並執行應用程式,以確認應用程式會顯示客戶記錄並可讓您儲存客戶記錄變更。
若要測試應用程式
請按 F5。
編輯其中一個客戶記錄,然後按一下 [儲存變更]。
關閉應用程式,然後按 F5 重新啟動應用程式。
巡覽至您剛變更的客戶記錄,確認變更已保存。
請關閉應用程式。
後續步驟
完成這個逐步解說後,您可以執行下列相關的工作:
學習如何使用 Visual Studio 中的 [資料來源] 視窗,將 WPF 控制項繫結至其他資料來源類型。如需詳細資訊,請參閱逐步解說:將 WPF 控制項繫結至 WCF 資料服務和逐步解說:將 WPF 控制項繫結到資料集。
學習如何使用 Visual Studio 中的 [資料來源] 視窗,顯示 WPF 控制項中的相關資料 (也就是父子關係中的資料)。如需詳細資訊,請參閱逐步解說:顯示 WPF 應用程式中的相關資料。
請參閱
工作
HOW TO:將 WPF 控制項繫結至 Visual Studio 中的資料
概念
將 WPF 控制項繫結至 Visual Studio 中的資料