Visual C++.NET 程式設計講座之六：對話框功能實現 — 介面佈局技巧、Group Box/Static/Edit/Spin/Picture 控件、Tab Order 伙伴關係、測試對話框

第六講：對話框功能實現

對話框是容器，控件是內容。本講以「設定視圖背景顏色」對話框為例，完整演示資源編輯器佈局技巧、六種常用控件屬性配置、Tab Order 決定 Spin-Edit 伙伴關係、靜態文字作預覽區、Picture Control 畫分隔線、測試按鈕驗證效果。

一、目標介面效果

功能：三組 R/G/B 編輯框 + 微調旋鈕 (Spin Control)，下方矩形區即時預覽混合顏色。

二、控件類型與屬性速查

控件	工具箱圖示	關鍵屬性	說明
Group Box		Caption="背景顏色"	靜態控件，視覺分組，無互動
Static Text		Caption="紅色顏色分量(R)"	標籤，不可編輯
Edit Control		Number=True, Read Only=True	數字輸入/顯示，配合 Spin
Spin Control		Alignment=Right, Auto Buddy=True, Set Buddy Integer=True	上下箭頭調整伙伴 Edit 值
Picture Control		Type=Horizontal Etched (分隔線) / Sunken=True (預覽區凹陷感)	靜態圖像/矩形框/分隔線

三、介面實現關鍵技巧

1. Caption 設定

逐一點選控件，屬性視窗修改 Caption：Group Box「背景顏色」、三組 Static Text「紅色顏色分量(R)」「綠色顏色分量(G)」「藍色顏色分量(B)」、Button「確定」「取消」。

2. Spin Control 與 Edit Control 成為「伙伴」 — Tab Order 決定一切

• **順序關鍵**：在對話框編輯器中，**先添加 Edit，再添加 Spin**，兩者 Tab Order 自動連續 (Edit 在前，Spin 在後)。
• **屬性配置**：Spin Control 屬性視窗 →
  Alignment = Right Align (附著在 Edit 右側)
  Auto Buddy = True (自動識別前一個 Tab Order 控件為伙伴)
  Set Buddy Integer = True (點擊箭頭直接修改伙伴 Edit 的整數值)
• **結果**：運行時 Edit 顯示數字，Spin 緊貼右側，點擊上/下箭頭數字遞增/遞減，無需寫任何代碼。

3. 預覽區實現：Static Text + Sunken/Static Edge

• 添加一個 Static Text 控件 (IDC_DRAW)，**刪除 Caption** (留空)。
• 屬性：Sunken = True (或 Static Edge = True) — 產生凹陷立體感，視覺上像可繪圖區域。
• 代碼中透過 CDC* 繪製填充矩形即可實現顏色預覽。

4. 水平分隔線：Picture Control + Type=Horizontal Etched

• 在「取消」按鈕上方添加 Picture Control，調整寬度橫跨對話框。
• 屬性 Type = Horizontal Etched — 立體陰刻線，視覺分隔功能區與按鈕區。

5. 控件 ID 命名規範 (便於代碼識別)

6. 測試按鈕 — 所見即所得驗證

• 對話框編輯器工具列點擊 測試 按鈕 ，彈出模態對話框真實運行效果。
• ESC / 確定 / 取消 關閉測試。
• **注意**：Windows XP 下實際運行效果比測試視窗更佳 (主題渲染差異)。

四、代碼層面預告 (下講實現)

1. 為 6 個 Edit 控件添加 int 型成員變數 (m_nRed, m_nGreen, m_nBlue...)，ClassWizard 自動生成 DDX_Text。
2. 為 3 個 Spin 控件添加 UDN_DELTAPOS 通知處理，或利用 SetBuddyInteger 自動同步無需代碼。
3. OnInitDialog 初始化範圍 (0-255)、預設值。
4. 繪製預覽區：OnPaint 或 OnCtlColor 中對 IDC_DRAW 區域填充 RGB(m_nRed, m_nGreen, m_nBlue)。
5. 即時更新：Spin 改變 → UpdateData(FALSE) 刷新 Edit → 觸發預覽區 InvalidateRect 重繪。

五、雷神心法：對話框佈局「三字訣」

1. 序 — **Tab Order 決定伙伴關係**，先加 Edit 再加 Spin，連續、順序不亂。
2. 組 — **Group Box 視覺分組**，相關控件物理聚合，降低認知負荷。
3. 靜 — **Static Text 做標籤**，Picture Control 做分隔/預覽框，**靜態控件零代碼、零維護、最高效**。

結語

資源編輯器是 MFC 快速開發的核心生產力工具。掌握控件屬性組合 (Spin+Edit 伙伴、Static Sunken 預覽、Picture Etched 分隔)、Tab Order 邏輯、ID 命名規範、測試按鈕驗證流程，即可在**零代碼**階段完成 80% 的 UI 交互邏輯，剩餘 20% 集中在數據驅動繪圖與業務邏輯，實現真正的「所見即所得」開發。