共用方式為

逐步解說：更新 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 以將使用者喜好設定儲存在登錄中，而不是初始化檔案。 若要設定註冊表機碼和基底，請在CScribbleApp::InitInstance語句後面輸入下列代碼LoadStdProfileSettings()。

    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 隨附並可從 Visual Studio 影像庫下載的可攜式網路圖形 (.png) 檔案組合成位圖。

    不過，功能區 使用者介面需要某些位圖能支援透明影像。 透明點圖使用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 檔案的新複本，但在功能區範例中儲存複本。 將複本重新命名 homesmall.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 檔案，其中包含 11 個 16x16 （16x176） 影像。 將點陣圖的識別碼變更為 IDB_RIBBON_FILESMALL。

    備註

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

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

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

    1. 匯入 homesmall.bmp 點陣圖，其中包含 11 個 16x16 小型按鈕影像。 將點陣圖的識別碼變更為 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。

將功能區資源新增至專案

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

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

將功能區（ribbon）資源加入至專案

  1. 在 方案瀏覽器 中選擇 Scribble 專案後，在 專案 選單中，按一下 新增資源。

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

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

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

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

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

    1. 選取 [ 項目 類型 按鈕 ]，按兩下 [ 新增 ] 以新增按鈕。 將 標題 變更為 &New，ID 變更為 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 檔案中，於return函式結尾的最後一個CMainFrame::OnCreate語句之前，新增下列程式碼。 它會創建功能區列的實例。

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

自定義功能區資源

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

備註

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

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

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

  2. 每個功能區介面都會排列在各具名稱的面板中。 每個面板都包含一組完成相關作業的控制件。 此類別有一個面板。 點選 [面板]，然後將 [標題 ] 變更為 Edit。

  3. 在 [ 編輯 ] 面板中，新增負責清除文件內容的按鈕。 此按鈕的訊息識別碼已在功能表資源中 IDR_SCRIBBTYPE 定義。 指定 Clear All 為按鈕文字和裝飾按鈕之點陣圖的索引。 開啟 [ 工具箱]，然後將 [按鈕 ] 拖曳至 [編輯 ] 面板。 按下按鈕，然後將 標題 變更為 Clear All，ID 變更為 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 部分）