TangramMini 組件開發教程（六）：MDI 應用程式框架搭建與客戶區整合

前言

TangramMini 是一款輕量級 ActiveX 組件，專為 MDI/SDI 應用程式框架快速搭建設計。本文示範在 MFC MDI 專案中動態建立 TangramMiniCtrl、載入 XTML 框架定義檔、將 MDI 客戶區嵌入 Tangram 空白視圖，實現可視化佈局配置與執行時動態調整。

環境準備

1. 下載安裝 TangramMini 組件：www.tangrammini.com
2. 從安裝包範例複製 TangramMini_i.c、TangramMini_i.h 至專案目錄
3. 在 stdafx.h 匯入：#include "TangramMini_i.c" → #include "TangramMini_i.h" (先 .c 後 .h 避免編譯錯誤)

核心實作步驟

1. CMainFrame 成員變數宣告

class CMainFrame : public CMDIFrameWnd {
    // ...
    ITangramMiniB2C* m_pMiniB2C;   // 輔助建立 TangramMiniCtrl
    ITangramMiniCtrl* m_pMiniCtrl; // 核心控制介面
};

2. OnCreate 中初始化與框架載入

int CMainFrame::OnCreate(LPCREATESTRUCT lpCreateStruct) {
    if (CMDIFrameWnd::OnCreate(lpCreateStruct) == -1) return -1;

    CoInitialize(NULL); // COM 單元模型初始化

    HRESULT hr = CoCreateInstance(CLSID_TangramMiniB2C, NULL,
        CLSCTX_INPROC_SERVER, IID_ITangramMiniB2C, (LPVOID*)&m_pMiniB2C);

    if (SUCCEEDED(hr) && m_pMiniB2C) {
        // 設定父視窗為主框架
        m_pMiniB2C->put_TargetHandle((LONG)m_hWnd);

        // 取得 TangramMiniCtrl 介面
        VARIANT_BOOL bSucceed;
        m_pMiniB2C->get_TangramMiniCtrl(&m_pMiniCtrl);

        // 載入 XTML 框架定義檔
        m_pMiniCtrl->LoadFile(L"test.xtml", &bSucceed);

        // 關鍵：將 MDI 客戶區嵌入指定 Tangram 空白視圖
        // 參數：空白視圖名稱、MDI 客戶區句柄(0=自動)、MDI 風格(0-3)
        m_pMiniCtrl->SetMDIClient(L"Page1_S0001_S0000", 0, 3, &bSucceed);
    }
    return 0;
}

3. SetMDIClient 參數詳解

BOOL SetMDIClient(BSTR strObjName, LONG nMDIHandle, LONG nMDIStyle);

XTML 框架檔案結構說明

test.xtml 由 TangramMini 設計器 (XTML Designer) 視覺化編輯生成，定義：

• 頁面：<Page name="Page1">
• 分割容器：<Splitter> 水平/垂直分割
• 空白視圖：<BlankView name="Page1_S0001_S0000"> 供外部視窗嵌入
• 內建控件：TabControl、TreeView、ListView、EditControl 等

本範例直接使用 SDI 教程中的 test.xtml，展示 TangramMini 跨 SDI/MDI 共用框架定義的能力。

執行效果與風格對比

風格 3 (nMDIStyle=3)：頂部標籤 + 關閉按鈕

• TangramMiniCtrl 填滿整個客戶區
• MDI 子視窗以標籤頁形式顯示於頂部
• 新建 3 個子視窗後效果如圖

風格 0 (nMDIStyle=0)：無標籤，空白視圖名稱改為 Page1_S0000

m_pMiniCtrl->SetMDIClient(L"Page1_S0000", 0, 0, &bSucceed);

• MDI 客戶區定位點改變
• 無標籤頁 UI，傳統 MDI 視窗管理

進階應用方向

1. 動態安裝視窗：m_pMiniCtrl->SetWnd(L"BlankViewName", (LONG)hWnd) 將任意 HWND 嵌入指定空白視圖
2. 標題修改：SetCaption(L"Page1", L"主工作區")
3. 啟動預設頁面：SetActive(L"Page1")
4. 儲存/還原佈局：Save() / LoadFile() 實現使用者個性化佈局持久化

總結

TangramMini 在 MDI 中的核心價值：將傳統難以視覺化配置的 MDI 客戶區、分割視窗、標籤頁管理，轉化為可視化 XTML 定義 + 幾行 COM 呼叫。開發者專注業務邏輯視窗開發，框架佈局交給設計器與組件處理，大幅降低 MDI 應用開發複雜度。