Visual C++.NET 程式設計講座第五講：對話框介面設計與模態/非模態顯示

第 4 講：對話框的介面世界

本講將深入探討對話框介面設計的完整流程與技巧，包含資源建立、控件佈局、類別創建，以及模態與非模態對話框的顯示機制差異。透過實作「背景設定」對話框，掌握 MFC 對話框開發的核心觀念。

對話框介面設計流程

對話框是 Windows 應用程式中最重要的使用者介面元素之一，透過按鈕、編輯框、列表框、下拉式方塊等控件與使用者互動。設計流程主要分為三階段：

1. 新增對話框資源

1. 啟動 Visual Studio .NET，開啟上一講的單一檔案應用程式專案 Viewer。
2. 從 [專案] 功能表選擇 [加入資源]，在 [加入資源] 對話框中選取 Dialog 資源類型，按下 [新增] 按鈕。
3. 系統自動指派預設識別名稱 IDD_DIALOG1，並建立含有 [確定]、[取消] 兩個按鈕的對話框範本，左側自動顯示工具箱視窗。
4. 按一下工具箱視窗的釘選圖示 ，使其固定停靠於開發環境左側。
5. 點選對話框空白處，在屬性視窗中設定屬性：於 [外觀] 分類修改 Caption 為「設定」，[雜項] 分類保留預設 ID。

圖 1 「加入資源」對話框

圖 2 對話框資源的屬性設定

2. 加入與佈局控件

推薦使用拖曳方式：在工具箱選取控件按住滑鼠不放，移至對話框所需位置鬆開。控件加入後，可透過下列方式精確佈局：

• 參照線與網格：預設顯示參照線，控件不得超出範圍。點選對話框編輯器工具列的 [網格] 按鈕 可啟用網格自動對齊。
• 對話框編輯器工具列：提供對齊、置中、等寬/等高等佈局按鈕，對應 [格式] 功能表命令。

圖 3 對話框資源編輯器介面

圖 4 對話框編輯器工具列

控件選取與主導控件觀念：

1. 框選：拖曳滑鼠畫出選取框，框內及相交控件全選。
2. 單選：按住 Ctrl 或 Shift 點選控件；Shift 再次點選可取消選取。
3. 主導控件：被選控件群中，唯一擁有實心縮放控點者，佈局操作以此為基準。按住 Ctrl 再點選控件可指定為主導控件。

3. 為對話框建立類別

1. 在對話框編輯器中雙擊空白處，或右鍵選擇 [加入類別]，開啟 [MFC 類別精靈]。
2. 類別名稱輸入 CSetDlg（慣例以大寫 C 開頭）。
3. 基底類別選擇 CDialog，確認 .h/.cpp 檔名無誤後按 [完成]。

圖 5 MFC 類別精靈設定

模態與非模態對話框的顯示

對話框分為兩種類型：

• 模態對話框：顯示後使用者必須在對話框完成操作並關閉，才能回到主應用程式繼續操作。
• 非模態對話框：顯示後持續留在螢幕上，使用者可自由切換回主應用程式操作其他功能。

1. 模態對話框顯示實作

1. 切換至 [資源檢視]，雙擊 IDR_MAINFRAME 開啟選單資源。
2. 在 [格式] 選單加入「背景設定(&B)...」項目，ID 設為 ID_FOMAT_SET。
3. 將此選單項的 COMMAND 事件對應至 CViewerView 類別，於 OnFormatSet 函數撰寫顯示代碼：

void CViewerView::OnFormatSet() 
{
    CSetDlg dlg;
    if (dlg.DoModal() == IDOK)
    {
        MessageBox(_T("使用者按下確定"));
    }
}

圖 6 模態對話框顯示代碼

關鍵說明：

• DoModal() 為 CDialog 成員函數，負責模態對話框的顯示與結束。
• 使用者按 [確定] 回傳 IDOK，按 [取消] 或關閉視窗回傳 IDCANCEL。
• 需在 ViewerView.h 加入 #include "SetDlg.h"。

圖 7 加入 CSetDlg 類別標頭檔

圖 8 模態對話框顯示結果（尚未加入控件）

2. 非模態對話框顯示實作

非模態對話框與模態的關鍵差異在於記憶體管理與結束方式：

實作步驟：

1. 在 [類別檢視] 中選取 CSetDlg，於屬性視窗點選 [覆寫] 按鈕，加入 OnOK 與 OnCancel 覆寫。
2. 於兩個函數中加入代碼：

void CSetDlg::OnOK() 
{
    UpdateData(TRUE);  // 確認輸入資料有效
    DestroyWindow();   // 銷毀視窗
}

void CSetDlg::OnCancel() 
{
    DestroyWindow();
}

圖 9 加入 OnOK 函數覆寫

圖 10 非模態對話框結束代碼

3. 在 CViewerView 加入成員指標 CSetDlg* m_pSetDlg。
4. 在 CViewerView 解構函數中刪除指標：

CViewerView::~CViewerView()
{
    if (m_pSetDlg) delete m_pSetDlg;
}

圖 11 解構函數中加入刪除代碼

5. 修改 OnFormatSet 以非模態方式建立並顯示對話框：

void CViewerView::OnFormatSet() 
{
    if (!m_pSetDlg)
    {
        m_pSetDlg = new CSetDlg(this);
        m_pSetDlg->Create(IDD_DIALOG1, this);
    }
    m_pSetDlg->ShowWindow(SW_SHOW);
}

圖 12 非模態顯示的 OnFormatSet 修改代碼

執行程式，外觀與模態對話框相同，但使用者可自由切換主視窗操作。下一講將討論如何取得非模態對話框中的使用者輸入資料。