您现在的位置：程式碼之家 >> 編程語言 > >> C語言 >> VC >> 關於VC++

TangramMini 組件開發教程（四）：樹狀導航聯動編輯區與動態視窗切換實戰

編輯：關於VC++

前言

承接前三篇對話框基礎教程，本文實作一個完整的「軟體模型」：左側 Tree Control 導航、中間 List Control 列表、右側 Edit Box 資訊顯示，透過 Tree 節點選擇動態切換中間區域顯示的視窗 (List Control / 自定義對話框)，並同步更新 Edit Box 文字。

介面佈局規劃 (XTML 定義)

Page1_S0001_S0000：中間主區域 (初始顯示 List Control)
Page1_S0002：右側 Edit Box 區域
Page1_S0003：左側 Tree Control 區域

核心實作步驟

1. 新增兩個自定義對話框類別

資源視圖 → Insert → Resource → Dialog → IDD_MYDIALOG1 / IDD_MYDIALOG2
屬性：Style = Child, Border = None
分別放置 Static Text 區分介面
ClassWizard 新增類別：CMyDialog1 : public CDialog, CMyDialog2 : public CDialog

2. 主對話框成員變數與初始化

class CTutorial1Dlg : public CDialog {
    // TangramMiniCtrl (已在前篇建立)
    CTangramMiniCtrl m_wndMiniCtrl;

    // 控件變數 (DDX_Control)
    CTreeCtrl m_wndTree;
    CListCtrl m_wndList;
    CEdit m_wndEdit;

    // 自定義對話框實例
    CMyDialog1* m_pMyDialog1;
    CMyDialog2* m_pMyDialog2;

    BOOL OnInitDialog() {
        CDialog::OnInitDialog();

        // 建立並安裝 List Control
        m_wndMiniCtrl.SetWnd(_T("Page1_S0001_S0000"), (long)m_wndList.GetSafeHwnd());

        // 建立並安裝 Tree Control
        m_wndMiniCtrl.SetWnd(_T("Page1_S0003"), (long)m_wndTree.GetSafeHwnd());

        // 建立並安裝 Edit Box
        m_wndMiniCtrl.SetWnd(_T("Page1_S0002"), (long)m_wndEdit.GetSafeHwnd());

        // 建立自定義對話框實例 (隱藏)
        m_pMyDialog1 = new CMyDialog1(this);
        m_pMyDialog2 = new CMyDialog2(this);
        m_pMyDialog1->Create(IDD_MYDIALOG1_DIALOG, this);
        m_pMyDialog2->Create(IDD_MYDIALOG2_DIALOG, this);

        // 初始化 Tree 節點
        HTREEITEM hRoot = m_wndTree.InsertItem(_T("ListView"));
        m_wndTree.InsertItem(_T("ChildWindow1"), hRoot);
        m_wndTree.InsertItem(_T("ChildWindow2"), hRoot);
        m_wndTree.Expand(hRoot, TVE_EXPAND);

        return TRUE;
    }
};

3. Tree Control 選擇變更事件處理

void CTutorial1Dlg::OnSelchangedTree1(NMHDR* pNMHDR, LRESULT* pResult) {
    NM_TREEVIEW* pNMTreeView = (NM_TREEVIEW*)pNMHDR;
    *pResult = 0;

    HTREEITEM hItem = pNMTreeView->itemNew.hItem;
    if (!hItem) return;

    CString strItemText = m_wndTree.GetItemText(hItem);
    m_wndEdit.SetWindowText(_T("selected: \"") + strItemText + _T("\""));

    // 根據節點文字動態切換中間區域視窗
    if (strItemText.CompareNoCase(_T("ListView")) == 0) {
        m_wndMiniCtrl.SetWnd(_T("Page1_S0001_S0000"), (long)m_wndList.GetSafeHwnd());
    } else if (strItemText.CompareNoCase(_T("ChildWindow1")) == 0) {
        m_wndMiniCtrl.SetWnd(_T("Page1_S0001_S0000"), (long)m_pMyDialog1->GetSafeHwnd());
    } else {
        m_wndMiniCtrl.SetWnd(_T("Page1_S0001_S0000"), (long)m_pMyDialog2->GetSafeHwnd());
    }
}

執行效果展示

選擇 ListView 節點

選擇 ChildWindow1 節點

選擇 ChildWindow2 節點

同一空白視圖 (Page1_S0001_S0000) 可重複呼叫 SetWnd 切換不同 HWND
Tree 節點選擇即時反映於 Edit Box 與中間區域
自定義對話框作為完整視窗單元嵌入，保持獨立訊息迴路

關鍵技術點總結

技術	應用場景
`SetWnd(blankView, hWnd)`	將任意 HWND (控件/對話框/視圖) 嵌入指定 Tangram 空白視圖
Tree Control `TVN_SELCHANGED`	導航驅動介面動態切換
Child Dialog (WS_CHILD, WS_VISIBLE)	模組化視窗單元，支援完整 UI 邏輯封裝
DDX_Control + GetSafeHwnd()	MFC 控件包裝與原生 HWND 互轉

資源清理提醒

void CTutorial1Dlg::OnDestroy() {
    if (m_pMyDialog1) { m_pMyDialog1->DestroyWindow(); delete m_pMyDialog1; }
    if (m_pMyDialog2) { m_pMyDialog2->DestroyWindow(); delete m_pMyDialog2; }
    CDialog::OnDestroy();
}