Visual Studio 2010 WPF 4.0 建立資料驅動 Master-Detail 商務表單實作手冊

本實驗指引使用 VS2010 「資料來源」視窗、設計工具與資源管理功能，快速建立 WPF 4.0 Master-Detail (大綱/細節) 商務表單，涵蓋資料繫結支架生成、自訂樣板、導覽按鈕、資源提取與重用。

實驗環境與準備

• Visual Studio 2010 + .NET Framework 4
• 範例方案：Southridge.sln (含 Southridge.mdf 資料庫)

練習 1：建立應用程式資料支架

1. 開啟方案，設定 Window1 寬 800、高 600。
2. 「資料來源」視窗 → 「加入新資料來源」 → 資料庫 → DataSet → 連線 Southridge.mdf → 選取 Tables: Listings (MLS, Title, Price, PrimaryPhoto), Neighborhoods, Viewings。
3. 建置方案。
4. 「資料來源」視窗中 Listings 選 Details，拖曳至設計介面 → 自動生成 Grid + Label/TextBox 繫結。
5. 刪除 PrimaryPhoto TextBox，從工具箱拖 Image 控制項至右側，將 PrimaryPhoto 欄位拖曳至 Image 上 → 自動建立 Source 繫結。
6. 執行 (Ctrl+F5) 驗證顯示第一筆資料與圖片。

練習 2：建立 Master-Detail 支架與導覽

1. 「資料來源」視窗展開 Listings → 將 Viewings (外鍵關聯) 拖曳至視窗 → 自動生成同步 DataGrid (Master-Detail)。
2. 加入兩個 Button：forwardButton (Content=Forward)、backButton (Content=Back)。
3. 雙擊按鈕產生 Click 事件，撰寫導覽代碼：

// Forward
CollectionViewSource cvs = (this.FindResource("listingsViewSource")) as CollectionViewSource;
cvs.View.MoveCurrentToNext();

// Back
cvs.View.MoveCurrentToPrevious();

自訂 DataGrid 欄位樣板：Boolean 轉紅綠燈指示器

1. 文件大綱選中 DataGrid 第三欄 (DataGridCheckBoxColumn)，註解原 XAML。
2. 插入 DataGridTemplateColumn + DataTemplate + Rectangle。
3. 屬性視窗選 Rectangle → Fill → 「套用資料繫結」 → 選 BooleanToBrushConverter (專案內建) → 參數輸入 Proceeding。
4. 執行 → Proceeding 欄顯示紅/綠矩形替代核取方塊。

練習 3：建立與使用資源 (共用按鈕背景)

1. 選 forwardButton → 屬性視窗 Background → 吸管取色。
2. Background 標籤旁黑色小方塊 → 「擷取值至資源」 → 命名 LightOrangeBrushKey → 存於 Window1.xaml。
3. 選 backButton → Background → 黑色方塊 → 「套用資源」 → 選 LightOrangeBrushKey。
4. 兩按鈕共用同一 SolidColorBrush 資源，後續修改資源即同步更新。

總結

VS2010 WPF 設計工具提供「資料來源」驅動的支架生成、「標記延伸智能感知」建立繫結、「文件大綱」精準選取元素、「資源擷取/選擇器」統一視覺風格，讓開發者以最少手寫 XAML 完成專業級 Master-Detail 商務表單。