VC++ 自適應對話方塊佈局類 ClxDialog：控制項隨視窗縮放自動調整位置與大小

痛點：OnSize 手寫座標計算的噩夢

對話方塊可調整大小 (WS_THICKFRAME) 時，每個控制項都需在 OnSize 中手算新位置/大小。控制項一多、對話方塊一多，代碼量爆炸、維護極難。

解決方案：聲明式佈局規則 + 基類自動套用

定義控制項「如何跟隨對話方塊變化」的規則，基類 ClxDialog 自動計算並套用，業務對話方塊僅需在 OnInitDialog 宣告規則陣列。

核心資料結構

// 佈局旗標
enum LayoutFlag {
    MOVEX     = 0, // 水平移動
    MOVEY     = 1, // 垂直移動
    MOVEXY    = 2, // 同時移動
    ELASTICX  = 3, // 寬度彈性縮放
    ELASTICY  = 4, // 高度彈性縮放
    ELASTICXY = 5  // 寬高同時縮放
};

struct DLGCTLINFO {
    int iId;      // 控制項 ID
    int iFlag;    // LayoutFlag
    int iPercent; // 變化比例 (0-100+)
};

規則語意範例

使用範例：業務對話方塊只需宣告規則

class CMyDialog : public ClxDialog {
    // ...
    virtual BOOL OnInitDialog() override {
        ClxDialog::OnInitDialog();
        
        static DLGCTLINFO rules[] = {
            {IDOK,       MOVEX,  100}, // OK 鈕右對齊
            {IDCANCEL,   MOVEX,  100}, // Cancel 右對齊
            {IDC_BTN1,   MOVEX,   50}, // 按鈕置中
            {IDC_BTN1,   MOVEY,  100}, // 按鈕底對齊
            {IDC_EDIT1,  ELASTICX, 100}, // 編輯框填滿寬度
            {IDC_EDIT2,  ELASTICX,  50}, // 編輯框半比例寬度
            {IDC_EDIT2,  MOVEX,    50}, // 同時置中
            {IDC_LIST1,  ELASTICXY,100}, // 列表填滿客戶區
            {IDC_TREE1,  ELASTICY, 100}, // 樹狀圖填滿高度
            {IDC_TREE1,  MOVEX,   50},  // 樹狀圖水平置中
        };
        
        SetControlProperty(rules, _countof(rules));
        ShowSizeIcon(TRUE); // 右下角顯示縮放圖示
        return TRUE;
    }
};

ClxDialog 核心實作原理

class ClxDialog : public CDialog {
protected:
    int m_cxClient, m_cyClient;      // 當前客戶區尺寸
    int m_cxMin, m_cyMin;            // 最小尺寸限制
    DLGCTLINFO* m_pRules;            // 規則陣列指標
    int m_nRuleCount;                // 規則數量
    BOOL m_bShowSizeIcon;
    CStatic m_wndSizeIcon;           // 縮放圖示靜態控制項
    CBitmap m_bmpSizeIcon;

    // 初始化：記錄初始客戶區尺寸、載入縮放圖示
    virtual BOOL OnInitDialog() override {
        CDialog::OnInitDialog();
        CRect rc; GetClientRect(&rc);
        m_cxClient = rc.Width(); m_cyClient = rc.Height();
        m_cxMin = m_cxClient; m_cyMin = m_cyClient; // 預設最小=初始
        if (m_bShowSizeIcon) InitSizeIcon();
        return TRUE;
    }

    // 尺寸變化核心邏輯
    afx_msg void OnSize(UINT nType, int cx, int cy) {
        CDialog::OnSize(nType, cx, cy);
        if (nType == SIZE_MINIMIZED || !m_pRules) return;
        
        int dx = cx - m_cxClient;
        int dy = cy - m_cyClient;
        m_cxClient = cx; m_cyClient = cy;
        
        for (int i = 0; i < m_nRuleCount; ++i) {
            ApplyRule(m_pRules[i], dx, dy);
        }
        RepositionSizeIcon();
    }

    void ApplyRule(const DLGCTLINFO& rule, int dx, int dy) {
        CWnd* pCtrl = GetDlgItem(rule.iId);
        if (!pCtrl) return;
        
        CRect rc; pCtrl->GetWindowRect(&rc); ScreenToClient(&rc);
        
        switch (rule.iFlag) {
            case MOVEX:   rc.OffsetRect(dx * rule.iPercent / 100, 0); break;
            case MOVEY:   rc.OffsetRect(0, dy * rule.iPercent / 100); break;
            case MOVEXY:  rc.OffsetRect(dx * rule.iPercent / 100, dy * rule.iPercent / 100); break;
            case ELASTICX: rc.right += dx * rule.iPercent / 100; break;
            case ELASTICY: rc.bottom += dy * rule.iPercent / 100; break;
            case ELASTICXY:
                rc.right += dx * rule.iPercent / 100;
                rc.bottom += dy * rule.iPercent / 100; break;
        }
        pCtrl->MoveWindow(&rc);
    }

    // Sizing 限制最小尺寸
    afx_msg void OnSizing(UINT nSide, LPRECT lpRect) {
        CDialog::OnSizing(nSide, lpRect);
        int cx = lpRect->right - lpRect->left;
        int cy = lpRect->bottom - lpRect->top;
        if (cx < m_cxMin) {
            if (nSide & (WMSZ_LEFT | WMSZ_TOPLEFT | WMSZ_BOTTOMLEFT))
                lpRect->left = lpRect->right - m_cxMin;
            else
                lpRect->right = lpRect->left + m_cxMin;
        }
        if (cy < m_cyMin) {
            if (nSide & (WMSZ_TOP | WMSZ_TOPLEFT | WMSZ_TOPRIGHT))
                lpRect->top = lpRect->bottom - m_cyMin;
            else
                lpRect->bottom = lpRect->top + m_cyMin;
        }
    }
    
    // 縮放圖示處理 (OBM_SIZE 右下角標準圖示)
    void InitSizeIcon() { /* 載入 OBM_SIZE 位圖到 m_wndSizeIcon */ }
    void RepositionSizeIcon() { /* 移動圖示至右下角 */ }
    
    DECLARE_MESSAGE_MAP()
};

BEGIN_MESSAGE_MAP(ClxDialog, CDialog)
    ON_WM_SIZE()
    ON_WM_SIZING()
END_MESSAGE_MAP()

進階功能

• 最小尺寸限制：覆寫 SetMinTrackSize(cx, cy) 設定 m_cxMin/m_cyMin
• 巢狀佈局：GroupBox/TabControl 內控制項需相對父容器計算，可擴充規則加入 iParentId 欄位
• DPI 感知：高 DPI 下 dx/dy 需轉換為邏輯單位，或啟用 Per-Monitor DPI Aware
• 儲存/還原視窗尺寸：OnDestroy 寫入註冊表/INI，OnInitDialog 讀取並 SetWindowPos

對比現有方案

將 ClxDialog.h/cpp 加入專案，繼承它並宣告規則陣列，即可擁有專業級自適應對話方塊佈局能力，徹底告別 OnSize 手算座標的時代。

1. 上一篇文章： VC++ 與 Delphi 通用單一實例技術：具名互斥體跨語言實戰
2. 下一篇文章： VC++ 簡易實現啟動畫面淡入淡出：AnimateWindow API 一鍵搞定

VC 教學

VC++ 調用 MATLAB 神經網絡工具箱：透過 COM 組件實現 BP 網絡訓練與預測

本文展示如何將 MATLAB 神經網絡工具箱編寫的 BP 神

VC++ 仿製金山毒霸專殺工具無標題列异形介面完整實戰

目標 完全模仿《金山毒霸 2002》附屬工具 `Duba_G

VC.NET 輕鬆實現按鈕自繪：GraphicsPath 建立非矩形區域 + 事件驅動狀態切換

.NET Framework (WinForms) 讓按鈕自

手把手教你打造 24 位真彩工具列：Visual Toolbar + CTrueColorToolBar 實戰全紀錄

一直以來，想在 VC++ 專案中實現像 Office、Vis