逐步解說：更新 MFC Scribble 應用程式 (第 1 部分)

  • 發行項

本逐步解說示範如何修改現有的 MFC 應用程式以使用功能區使用者介面。 Visual Studio 同時支援 Office 2007 功能區和 Windows 7 風景區。 如需功能區使用者介面的詳細資訊，請參閱 功能區 。

本逐步解說會修改傳統 Scribble 1.0 MFC 範例，讓您使用滑鼠來建立線條繪圖。 本逐步解說的這個部分示範如何修改 Scribble 範例，使其顯示功能區列。 第 2 部分會將更多按鈕新增至功能區列。

必要條件

Scribble 1.0 MFC 範例 。 如需轉換成 Visual Studio 2017 或更新版本的說明，請參閱 移植指南：MFC Scribble 。

區段

本逐步解說的這個部分有下列各節：

取代基類

若要將支援功能表的應用程式轉換成支援功能區的應用程式，您必須從更新的基類衍生應用程式、框架視窗和工具列類別。 （我們建議您不要修改原始的 Scribble 範例。請改為清除 Scribble 專案，將其複製到另一個目錄，然後修改複本。

取代 Scribble 應用程式中的基類

  1. 在 scribble.cpp 中，確認包含 CScribbleApp::InitInstance 對 AfxOleInit 的 呼叫。

  2. 將下列程式碼新增至 pch.h 檔案 （ Visual Studio 2017 和更早版本中的 stdafx.h ）：

    #include <afxcontrolbars.h>

  3. 在 scribble.h 中，修改 類別的定義 CScribbleApp ，使其衍生自 CWinAppEx 類別 。

    class CScribbleApp: public CWinAppEx

  4. 當 Windows 應用程式使用初始化 （.ini） 檔案來儲存使用者喜好設定資料時，會撰寫 Scribble 1.0。 修改 Scribble 以將使用者喜好設定儲存在登錄中，而不是初始化檔案。 若要設定登錄機碼和基底，請在 語句後面 LoadStdProfileSettings() 輸入下列程式碼 CScribbleApp::InitInstance 。

    SetRegistryKey(_T("MFCNext\\Samples\\Scribble2"));
SetRegistryBase(_T("Settings"));

  5. 多個檔介面 （MDI） 應用程式的主框架不再衍生自 CMDIFrameWnd 類別。 而是衍生自 CMDIFrameWndEx 類別。

    在 mainfrm.h 和 mainfrm.cpp 檔案中，將所有的參考 CMDIFrameWnd 取代為 CMDIFrameWndEx 。

  6. 在 childfrm.h 和 childfrm.cpp 檔案中，將 取代 CMDIChildWnd 為 CMDIChildWndEx 。

    在子系中。 h 檔案，將 取代 CSplitterWnd 為 CSplitterWndEx 。

  7. 修改工具列和狀態列以使用新的 MFC 類別。

    在 mainfrm.h 檔案中：

    1. 把 CToolBar 替換為 CMFCToolBar。

    2. 把 CStatusBar 替換為 CMFCStatusBar。

  8. 在 mainfrm.cpp 檔案中：

    1. 將 取代 m_wndToolBar.SetBarStyle 為 m_wndToolBar.SetPaneStyle

    2. 將 取代 m_wndToolBar.GetBarStyle 為 m_wndToolBar.GetPaneStyle

    3. 將 取代 DockControlBar(&m_wndToolBar) 為 DockPane(&m_wndToolBar)

  9. 在 ipframe.cpp 檔案中，將下列三行程式碼批註化。

    m_wndToolBar.EnableDocking(CBRS_ALIGN_ANY);
pWndFrame->EnableDocking(CBRS_ALIGN_ANY);
pWndFrame->DockPane(&m_wndToolBar);

  10. 儲存變更，然後建置並執行應用程式。

將點陣圖新增至專案

本逐步解說的後續四個步驟需要點陣圖資源。 您可以透過各種方式取得適當的點陣圖：

  • 使用資源編輯器 來發明您自己的點陣圖。 或者，使用資源編輯器從 Visual Studio 隨附的可攜式網狀圖形 （.png） 影像組合點陣圖，並從 Visual Studio 映射庫 下載 。

    不過， 功能區 使用者介面需要特定點陣圖支援透明影像。 透明點陣圖使用 32 位圖元，其中 24 位會指定色彩的紅色、綠色和藍色元件，而 8 位會定義 Alpha 色板 ，指定色彩的透明度。 目前的資源編輯器可以檢視，但無法修改具有 32 位圖元的點陣圖。 因此，使用外部影像編輯器，而不是資源編輯器來操作透明點陣圖。

  • 將適當的資源檔從另一個應用程式複製到您的專案，然後從該檔案匯入點陣圖。

本逐步解說會從逐步解說：使用 MFC 建立功能區應用程式中所 建立的範例複製資源檔。

將點陣圖新增至專案

  1. 使用檔案總管將下列 .bmp 檔案從功能區範例的資原始目錄 （ res ） 複製到 Scribble 專案的資原始目錄 （ res ） ：

    1. 將 main.bmp 複製到您的 Scribble 專案。

    2. 將 filesmall.bmp 和 filelarge.bmp 複製到您的 Scribble 專案。

    3. 製作 filelarge.bmp 和 filesmall.bmp 檔案的新複本，但在功能區範例中儲存複本。 將 homemall.bmp 和 homelarge.bmp 複製重新命名，然後將複本移至您的 Scribble 專案。

    4. 製作 toolbar.bmp 檔案的複本，但在功能區範例中儲存複本。 重新命名複製 panelicons.bmp，然後將複本移至您的 Scribble 專案。

  2. 匯入 MFC 應用程式的點陣圖。 在 [資源檢視 ] 中 ，按兩下 scribble.rc 節點，按兩下 [點陣圖 ] 節點，然後按一下 [ 新增資源 ]。 在出現的對話方塊中，按一下 [ 匯入 ]。 流覽至 res 目錄，選取 main.bmp 檔案，然後按一下 [ 開啟 ]。

    main.bmp 點陣圖包含 26x26 影像。 將點陣圖的識別碼變更為 IDB_RIBBON_MAIN 。

  3. 匯入附加至 [應用程式 ] 按鈕之檔案功能表的 點陣圖。

    1. 匯入 filesmall.bmp 檔案，其中包含 116x16 （16x176） 影像。 將點陣圖的識別碼變更為 IDB_RIBBON_FILESMALL 。

    注意

    因為我們只需要前 8 個 16x16 影像 （16x128），因此您可以選擇性地從 176 到 128 裁剪此點陣圖的右側寬度。

    1. 匯入 filelarge.bmp，其中包含 9 個 32x32 （32x288） 影像。 將點陣圖的識別碼變更為 IDB_RIBBON_FILELARGE 。

  4. 匯入功能區類別和麵板的點陣圖。 功能區列上的每個索引標籤都是類別，由文字標籤和選擇性影像所組成。

    1. 匯入 homesmall.bmp 點陣圖，其中包含小型按鈕點陣圖的 116x16 影像。 將點陣圖的識別碼變更為 IDB_RIBBON_HOMESMALL 。

    2. 匯入 homelarge.bmp 點陣圖，其中包含大型按鈕點陣圖的 9 個 32x32 影像。 將點陣圖的識別碼變更為 IDB_RIBBON_HOMELARGE 。

  5. 匯入調整大小功能區面板的點陣圖。 如果功能區太小而無法顯示整個面板，則這些點陣圖或面板圖示會在調整大小作業之後使用。

    1. 匯入 panelicons.bmp 點陣圖，其中包含八個 16x16 影像。 在 [點陣圖編輯器 ] 的 [ 屬性 ] 視窗中，將點陣圖的寬度調整為 64 （16x64）。 將點陣圖的識別碼變更為 IDB_PANEL_ICONS 。

    注意

    因為我們只需要前四個 16x16 影像 （16x64），因此您可以選擇性地將此點陣圖的右側寬度從 128 裁剪為 64。

將功能區資源新增至專案

當您將使用功能表的應用程式轉換成使用功能區的應用程式時，您不需要移除或停用現有的功能表。 只要建立功能區資源、新增功能區按鈕，然後將新按鈕與現有的功能表項目產生關聯。 雖然功能表已不再顯示，但功能區列中的訊息會透過功能表路由傳送，功能表快捷方式會繼續運作。

功能區是由 [應用程式 ] 按鈕所組成，這是功能區左上角的大按鈕，以及一或多個類別索引標籤。 每個類別索引標籤都包含一或多個面板，做為功能區按鈕和控制項的容器。 下列程式示範如何建立功能區資源，然後自訂 [應用程式 ] 按鈕。

將功能區資源新增至專案

  1. 在方案總管中 選取 [Scribble] 專案之後，按一下 [專案 ] 功能表中的 [ 新增資源 ]。

  2. 在 [ 新增資源 ] 對話方塊中，選取 [功能區 ]，然後按一下 [ 新增 ]。

    Visual Studio 會建立功能區資源，並在設計檢視中開啟它。 功能區資源識別碼為 IDR_RIBBON1 ，會顯示在 [資源檢視 ] 中 。 功能區包含一個類別和一個面板。

  3. 您可以修改其屬性來 自訂 [應用程式 ] 按鈕。 此程式碼中使用的訊息識別碼已在 Scribble 1.0 功能表中定義。

  4. 在設計檢視中，按一下 [ 應用程式 ] 按鈕以顯示其屬性。 將屬性值變更為：將影像變更為 IDB_RIBBON_MAIN 、提示 為 File 、 索引鍵 至 f 、 將大型影像變更為 IDB_RIBBON_FILELARGE ，並將 Small Images 變更為 IDB_RIBBON_FILESMALL 。

  5. 下列修改會建立當使用者按一下 [應用程式 ] 按鈕時出現的功能表。 按一下 [主要專案] 旁的省略號 [ ... ]，以開啟 [專案編輯器 ]。

    1. 選取 [ 專案 類型 按鈕 ]，按一下 [ 新增 ] 以新增按鈕。 將 [標題] 變更為 &New ， 將 [識別碼 ] 變更為 ID_FILE_NEW 0 ， 將 [影像 大] 變更 為 0 。

    2. 按一下 [ 新增 ] 以新增按鈕。 將 [標題 ] 變更為 &Save ， 將 [識別碼 ] 變更為 ID_FILE_SAVE ， 將 [影像 ] 變更為 2 ，並將 [大型影像] 變更 為 2 。

    3. 按一下 [ 新增 ] 以新增按鈕。 將 [標題 ] 變更為 Save &As ， 將 [識別碼 ] 變更為 ID_FILE_SAVE_AS ， 將 [影像 ] 變更為 3 ，並將 [大型影像] 變更 為 3 。

    4. 按一下 [ 新增 ] 以新增按鈕。 將 [標題 ] 變更為 &Print ， 將 [識別碼 ] 變更為 ID_FILE_PRINT ， 將 [影像 ] 變更為 4 ，並將 [大型影像] 變更 為 4 。

    5. 將 [專案 類型] 變更為 [ 分隔符號 ]，然後按一下 [ 新增 ]。

    6. 將 [ 專案 類型] 變更為 [按鈕 ]。 按一下 [ 新增 ] 以新增第五個按鈕。 將 [標題 ] 變更為 &Close ， 將 [識別碼 ] 變更為 ID_FILE_CLOSE ， 將 [影像 ] 變更為 5 ，並將 [大型影像] 變更 為 5 。

  6. 下列修改會在您在上一個步驟中建立的 [列印] 按鈕下建立子功能表。

    1. 按一下 [ 列印] 按鈕，將 [專案 類型] 變更為 [標籤 ]，然後按一下 [ 插入 ]。 將 Caption 變更 為 Preview and print the document 。

    2. 按一下 [ 列印] 按鈕，將 [專案 類型] 變更為 [按鈕 ]，然後按一下 [ 插入 ]。 將 [標題 ] 變更為 &Print ， 將 [識別碼 ] 變更為 ID_FILE_PRINT ， 將 [影像 ] 變更為 4 ，並將 [大型影像] 變更 為 4 。

    3. 按一下 [ 列印] 按鈕，然後按一下 [ 插入 ] 以新增按鈕。 將 [標題 ] 變更為 &Quick Print ， 將 [識別碼 ] 變更為 ID_FILE_PRINT_DIRECT ， 將 [影像 ] 變更為 7 ，並將 [大型影像] 變更 為 7 。

    4. 按一下 [ 列印] 按鈕，然後按一下 [ 插入 ] 以新增另一個按鈕。 將 [標題 ] 變更為 Print Pre&view ， 將 [識別碼 ] 變更為 ID_FILE_PRINT_PREVIEW ， 將 [影像 ] 變更為 6 ，並將 [大型影像] 變更 為 6 。

    5. 您現在已修改 主要專案 。 按一下 [ 關閉] 結束 [專案編輯器 ]。

  7. 下列修改會建立顯示在 [應用程式 ] 按鈕功能表底部的 結束按鈕。

    1. 選擇 方案總管 中的 [ 資源檢視 ] 索引標籤 。

    2. 在 [ 屬性] 視窗中，按一下 [按鈕 ] 旁 的省略號 [ ... ]，以開啟 [專案編輯器 ]。

    3. 選取 [ 專案 類型 按鈕 ]，按一下 [ 新增 ] 以新增按鈕。 將 [標題] 變更為 E&xit ， 將 [識別碼 ] 變更為 ID_APP_EXIT ， 將 [影像 ] 變更 為 8 。

    4. 您已修改 按鈕 。 按一下 [ 關閉] 結束 [專案編輯器 ]。

建立功能區列的實例

下列步驟示範如何在應用程式啟動時建立功能區列的實例。 若要將功能區列新增至應用程式，請在 mainfrm.h 檔案中宣告功能區列。 然後，在 mainfrm.cpp 檔案中，撰寫程式碼以載入功能區資源。

若要建立功能區列的實例

  1. 在 mainfrm.h 檔案中，將資料成員新增至 的受保護區段 CMainFrame ，主框架的類別定義。 這個成員適用于功能區列。

    // Ribbon bar for the application
CMFCRibbonBar m_wndRibbonBar;

  2. 在 mainfrm.cpp 檔案中，于函式結尾 CMainFrame::OnCreate 的最後 return 一個語句前面新增下列程式碼。 它會建立功能區列的實例。

    // Create the ribbon bar
if (!m_wndRibbonBar.Create(this))
{
    return -1;   //Failed to create ribbon bar
}
m_wndRibbonBar.LoadFromResource(IDR_RIBBON1);

自訂功能區資源

現在您已建立 [ 應用程式 ] 按鈕，您可以將元素新增至功能區。

注意

本逐步解說會針對所有面板使用相同的面板圖示。 不過，您可以使用其他影像清單索引來顯示其他圖示。

若要新增 [首頁] 類別和 [編輯] 面板

  1. Scribble 程式只需要一個類別。 在設計檢視中的 [工具箱 ] 中，按兩下 [類別 ] 以新增一個類別並顯示其屬性。 將屬性值變更為：標題為 、大型影像 變更為 IDB_RIBBON_HOMELARGE 、 小型影像 變更為 IDB_RIBBON_HOMESMALL 。 &Home

  2. 每個功能區類別都會組織成具名面板。 每個面板都包含一組完成相關作業的控制項。 此類別有一個面板。 按一下 [ 面板 ]，然後將 [標題 ] 變更 為 Edit 。

  3. 在 [ 編輯 ] 面板中，新增負責清除檔內容的按鈕。 此按鈕的訊息識別碼已在功能表資源中 IDR_SCRIBBTYPE 定義。 指定 Clear All 為按鈕文字和裝飾按鈕之點陣圖的索引。 開啟 [ 工具箱 ]，然後將 [按鈕 ] 拖曳至 [ 編輯 ] 面板。 按一下按鈕，然後將 [標題] 變更為 ， 將 [識別碼 ] Clear All 變更為 ID_EDIT_CLEAR_ALL ， 將 [影像索引 ] 變更為 0 ， 將 [大型影像索引] 變更 為 0 。

  4. 儲存變更，然後建置並執行應用程式。 應該顯示 Scribble 應用程式，而且應該在視窗頂端有功能區列，而不是功能表列。 功能區列應該有一個類別， [首頁 ] 和 [首頁 ] 應該有一個面板[ 編輯 ]。 您新增的功能區按鈕應該與現有的事件處理常式相關聯，而 [開啟 ]、 [關閉]、[儲存 ]、 [列印 ] 和 [清除所有 ] 按鈕應該如預期般運作。

設定應用程式的外觀

視覺化管理員 是全域物件，可控制應用程式的所有繪圖。 由於原始 Scribble 應用程式使用 Office 2000 使用者介面 （UI） 樣式，因此應用程式看起來可能老式。 您可以重設應用程式以使用 Office 2007 視覺效果管理員，使其類似于 Office 2007 應用程式。

設定應用程式的外觀

  1. 在 函式中 CMainFrame::OnCreate ，在 語句之前 return 0; 輸入下列程式碼，以變更預設的視覺管理員和樣式。

    // Set the default manager to Office 2007
CMFCVisualManager::SetDefaultManager(RUNTIME_CLASS(CMFCVisualManagerOffice2007));
CMFCVisualManagerOffice2007::SetStyle(CMFCVisualManagerOffice2007::Office2007_LunaBlue);

  2. 儲存變更，然後建置並執行應用程式。 應用程式 UI 應該類似于 Office 2007 UI。

後續步驟

您已修改傳統 Scribble 1.0 MFC 範例，以使用 功能區設計工具 。 現在移至 第 2 部分。

另請參閱

逐步解說
逐步解說：更新 MFC Scribble 應用程式 (第 2 部分)