共用方式為

  • 發行項

本逐步解說將示範如何修改現有的 MFC 應用程式使用功能區使用者介面。 Visual Studio 支援 Office 2007 功能區和 Windows 7 Scenic 功能區。 如需有關功能區使用者介面的詳細資訊，請參閱型 (緞帶)在 MSDN 網站上。

這個逐步解說中修改的傳統的手繪多邊形 1.0 MFC 範例，可讓您使用滑鼠來建立線條繪圖。 這部分逐步解說會示範如何修改成可顯示功能區列的手繪多邊形範例。 第二部將多個按鈕加入至功能區列。

必要條件

Visual C++ 範例

Visual C++ 範例

章節

這部分逐步解說包含下列各節：

  • 取代基底類別

  • 加入至專案的點陣圖

  • 將功能區資源新增至專案

  • 建立功能區列的執行個體

  • 加入功能區類別

  • 設定應用程式的外觀

取代基底類別

若要將支援的功能表，以支援功能區的應用程式的應用程式，您必須從更新的基底類別衍生應用程式、 框架視窗和工具列的類別。 (我們建議您不要修改原始的手繪多邊形範例 ； 相反地，清除 [手繪多邊形專案、 將它複製到另一個目錄，然後修改複本。)

若要取代的手繪多邊形的應用程式中的基底類別

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

  2. 將下列程式碼加入 stdafx.h 檔。

    #include <afxcontrolbars.h>

  3. 在 scribble.h，修改為定義CScribbleApp類別，讓它衍生自CWinAppEx 類別。

    class CScribbleApp: public CWinAppEx

  4. 手繪多邊形 1.0 被寫入 Windows 應用程式用來儲存使用者喜好設定資料的初始設定 (.ini) 檔案時。 初始設定檔案，而不是修改儲存在登錄中的使用者喜好設定的手繪多邊形。 若要設定登錄機碼和基底，輸入下列程式碼在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。

    在 childfrm 中。 h 檔案中，取代CSplitterWnd與CSplitterWndEx。

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

    在 mainfrm.h 檔案：

    1. Replace CToolBar with CMFCToolBar.

    2. Replace CStatusBar with 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. 如果您想要以靜態方式連結您的應用程式，請將下列程式碼加入專案的資源 (.rc) 檔的開頭。

    #include "afxribbon.rc"

    Afxribbon.rc 檔案包含在執行階段所需的資源。 MFC 應用程式精靈在建立應用程式時就會自動包含這個檔案。

  11. 儲存所做的變更，然後建置並執行應用程式。

[章節]

加入至專案的點陣圖

這個逐步解說中的四個步驟需要點陣圖資源。 您可以取得適當的點陣圖，以各種方式：

  • 使用資源編輯器到難以置信您自己的點陣圖。 或使用資源編輯器來組合點陣圖從可攜式網路圖形 (.png) 影像所包含的Visual Studio。 這些影像會在VS2008ImageLibrary目錄。

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

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

本逐步解說會複製範例目錄中的應用程式中的資源檔。

若要加入至專案的點陣圖

  1. 使用檔案總管] 從 [資源] 目錄中複製下列的.bmp 檔案 (res) 的 RibbonGadgets 範例：

    1. 將 main.bmp 複製到您的手繪多邊形專案中。

    2. 複製您的手繪多邊形專案 filesmall.bmp 和 filelarge.bmp。

    3. 建立新的複本的 filelarge.bmp 和 filesmall.bmp 檔案，但將複本儲存在 RibbonGadgets 範例。 重新命名的複本 homesmall.bmp 和 homelarge.bmp，然後將複本移至您的手繪多邊形專案。

    4. 製作一份 toolbar.bmp 檔案，但在 RibbonGadgets 範例儲存複本。 重新命名複本 panelicons.bmp，然後將複本移至您的手繪多邊形專案。

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

    Main.bmp 點陣圖中包含的 26 x 26 映像。 將點陣圖的 ID 變更為 IDB_RIBBON_MAIN 中。

  3. 匯入檔案] 功能表連接至應用程式按鈕的點陣圖。

    1. 匯入 filesmall.bmp 檔案，其中包含十個 16 x 16 (16 x 160) 影像。 因為我們需要只能容納八個 16 x 16 個映像 (16 x 128)，請使用資源檢視從 160 中變更該點陣圖的寬度，為 128。 將點陣圖的 ID 變更為 IDB_RIBBON_FILESMALL 中。

    2. 匯入 filelarge.bmp，其中包含八個 32x32 (32 x 256) 的影像。 將點陣圖的 ID 變更為 IDB_RIBBON_FILELARGE 中。

  4. 匯入的功能區類別和面板的點陣圖。 在功能區列上的每個索引標籤是一種類別，以及包含文字標籤和選擇性的影像。

    1. 匯入 homesmall.bmp 點陣圖，其中包含八個 16 x 16 的小按鈕點陣圖影像。 將點陣圖的 ID 變更為 IDB_RIBBON_HOMESMALL 中。

    2. 匯入 homelarge.bmp 點陣圖，其中包含八 32 x 32 的大型按鈕點陣圖影像。 將點陣圖的 ID 變更為 IDB_RIBBON_HOMELARGE 中。

  5. 匯入點陣圖調整過大小的功能區面板。 功能區是太小以至於無法顯示整個面板時，所會調整大小的作業之後使用這些點陣圖] 或 [面板] 圖示。

    1. 匯入 panelicons.bmp 點陣圖，其中包含八個 16 x 16 的影像。 在屬性 窗口 點陣圖編輯器，調整為 64 (16 x 64) 點陣圖的寬度。 將點陣圖的 ID 變更為 IDB_PANEL_ICONS 中。

[章節]

將功能區資源新增至專案

當您轉換使用功能表] 以使用功能區的應用程式的應用程式時，您並沒有移除或停用現有的功能表。 相反地，您建立功能區的資源、 新增功能區按鈕，並將與現有的功能表項目產生關聯的新按鈕。 雖然功能表將不再顯示，從功能區列的訊息會經由功能表。 此外，功能表的捷徑繼續運作。

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

將功能區資源加入至專案

  1. 在專案 ] 功能表中，按一下 加入資源。

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

    Visual Studio 建立功能區資源，並在 [設計] 檢視中開啟它。 功能區的資源 ID 是 IDR_RIBBON1，會顯示在資源檢視。 功能區會包含一個分類，而一個面板。

  3. 您可以修改其內容，來自訂應用程式按鈕。 在功能表中的手繪多邊形 1.0 已經定義這段程式碼中所使用的郵件識別碼。

  4. 在 [設計] 檢視中，按一下 [應用程式] 按鈕以顯示其屬性。 變更屬性值，如下所示： 映像到 IDB_RIBBON_MAIN， 提示到 檔案， 機碼到 f， 大型影像 到 IDB_RIBBON_FILELARGE，和 小影像 到 IDB_RIBBON_FILESMALL。

  5. 下列的修改會建立在使用者按一下 [應用程式] 按鈕時所出現的功能表。 按一下省略符號 ( ...])，位在主要項目開啟 項目編輯器 。

    1. 按一下 [ 新增要加入按鈕。 Change Caption to &New, ID to ID_FILE_NEW, Image to 0, Image Large to 0.

    2. 按一下 [ 新增若要新增第二個按鈕。 Change Caption to &Save, ID to ID_FILE_SAVE, Image to 2, and Image Large to 2.

    3. 按一下 [ 新增若要新增第三個按鈕。 Change Caption to Save &As, ID to ID_FILE_SAVE_AS, Image to 3, and Image Large to 3.

    4. 按一下 [ 新增若要新增第四個按鈕。 Change Caption to &Print, ID to ID_FILE_PRINT, Image to 4, and Image Large to 4.

    5. 變更項目 鍵入，以 分隔符號 ，然後按一下 [ 新增。

    6. 變更項目 鍵入，以 按鈕。 按一下 [ 新增要加入第五個按鈕。 Change Caption to &Close, ID to ID_FILE_CLOSE, Image to 5, and Image Large to 5.

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

    1. 按一下 [ 列印 按鈕之後，變更 項目 鍵入，以 標籤，然後按一下 [ 插入。 變更標題 到 預覽和列印文件。

    2. 按一下 [ 列印按鈕之後，變更 項目鍵入，以 按鈕，再利用 插入。 Change Caption to &Print, ID to ID_FILE_PRINT, Image to 4, and Image Large to 4.

    3. 按一下 [ 列印 按鈕，然後按一下 [ 插入要加入按鈕。 變更標題 到 及快速的列印， ID 到 ID_FILE_PRINT_DIRECT， 映像 到 7，和 大型影像 到 7。

    4. 按一下 [ 列印 按鈕，然後按一下 [ 插入以新增另一個按鈕。 變更標題 到 列印前版與檢視， 識別碼 到 ID_FILE_PRINT_PREVIEW， 映像 到 6，和 大型影像 到6。

    5. 您現在已經修改主要項目。 按一下 [ 關閉結束 項目編輯器。

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

    1. 在屬性 ] 視窗中，按一下省略符號 ( ...])，位在按鈕開啟 項目編輯器 。

    2. 按一下 [ 新增要加入按鈕。 Change Caption to E&xit, ID to ID_APP_EXIT, Image to8.

[章節]

建立功能區列的執行個體

下列的步驟將示範如何建立您的應用程式啟動時的功能區列的執行個體。 若要將功能區列加入至應用程式中，宣告 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. 手繪多邊形程式需要一種類別。 在 [設計] 檢視中，按一下 類別以顯示其屬性。 變更屬性值，如下所示： 標題 到 與家用， 大型影像 到 IDB_RIBBON_HOMELARGE， 小影像 到 IDB_RIBBON_HOMESMALL。

  2. 每個功能區類別會組織成具名面板。 每個面板包含一組執行相關的作業的控制項。 這個類別都有一個面板。 按一下 [ 面板，然後變更 標題到 編輯 和 映像索引到 0。

  3. 若要編輯面板，請新增一個按鈕，負責清除文件的內容。 此按鈕的訊息識別碼已經定義在 IDR_SCRIBBTYPE 的功能表資源。 指定全部清除做為按鈕文字] 和 [裝飾] 按鈕的點陣圖的索引。 開啟工具箱，然後拖曳 按鈕 到 編輯面板。 按一下按鈕，然後變更標題到 全部清除， ID 到 ID_EDIT_CLEAR_ALL， 映像索引 到 0， 大型影像的索引 到 0。

  4. 儲存變更，然後建置並執行應用程式。 Scribble 應用程式應該會顯示，而且應該有功能區列頂端的視窗，而不是功能表列。 功能區列應該要有一個類別， 家用，以及 家用 應該要有一個面板中， 編輯。 您所新增的功能區按鈕必須與現有的事件處理常式，並開啟， 關閉， 儲存， 列印，和 全部清除按鈕應該能如預期般作用。

[章節]

設定應用程式的外觀

A 視覺管理員是一種控制所有的繪圖應用程式的全域物件。 因為原始的手繪多邊形應用程式使用的 Office 2000 使用者介面 (UI) 的樣式，看起來傳統應用程式。 您可以重設應用程式，使它類似 Office 2007 應用程式，請使用 Office 2007 視覺管理員。

若要設定應用程式的外觀

  1. 在CMainFrame::OnCreate函式中，輸入下列程式碼來變更預設視覺管理員和樣式。

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

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

[章節]

後續步驟

您已經修改傳統手繪多邊形 1.0 MFC 範例若要使用功能區設計工具。 立即前往第 2 部分。

請參閱

工作

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

其他資源

逐步解說 (MFC)