1、本教程適用于正在開發桌面應用程序并希望利用新的 MFC 功能區框架優勢的 MFC 開發人員。通過本教程的步驟，您將了解如何將默認的功能區添加到一個小應用程序中，在 Ribbon Designer 中編輯各個功能區控件，然后在運行時使用控件。您將看到通過 MFC 功能區框架編輯和使用功能區控件非常輕松。在本教程中，將完成在應用程序中添加和自定義根本功能區的所有必要步驟。本教程涉及實時編譯代碼并從此文檔中復制代碼。如果發生復制錯誤或任何其他問題無法編譯應用程序，可以在本教程的程序包中找到全部完成的例如，以及每 個練習的最終源代碼。這些例如可用于解決編譯錯誤。先決條件您必須擁有以下內容才能完本錢實驗

2、： Microsoft Visual Studio 2021 Beta 2 或更高版本 Windows 7學習目標在完本錢教程時，您將了解如何： 在 Visual Studio 2021 中為應用程序創立默認的功能區 在 Ribbon Designer 中添加功能區控件，如按鈕、復選框和區塊 在 Ribbon Designer 中為功能區控件添加事件處理程序函數 在運行時使用功能區控件練習 1：在應用程序中創立默認功能區在本練習中，將開始在 Visual Studio 2021 中從頭創立一個 Windows 7 風格的帶有功能區的 MFC應用程序。您不必編寫任何代碼來執行這些操作。只需單擊，

3、單擊，再單擊！任務 1 - 在 Visual Studio 2021 中創立新的帶有功能區的 MFC 工程1. 在 Visual Studio 2021 中，使用 MFC Application Wizard 創立一個具有默認功能區的 MFC 應用程序。要運行向導，請在 File 菜單上，指向 New，然后選擇 Project。將會顯示 New Project 對話框。2. 在 New Project 對話框中，展開 Project Types 窗格中的 Visual C+ 節點，然后選擇 MFC。在 Templates 窗格中，選擇 MFC Application。鍵入工程名稱，如 Ribb

4、onApp，然后單擊 OK。請參閱圖 1-1。將顯示 MF Application Wizard。 圖 1-13. 在 Application Type 窗格中，將 Project Style 更改為 Office，然后將 Visual Style and Colors 更改為“Windows 7。其他保持不變，然后單擊 Next。請參考圖 1-2。 圖 1-24. 將 Compound Document Support 設置保存為默認值即選中“None復選框。請參考圖 1-3。 圖 1-35. 在 Document Template Strings 窗格中，保存所有默認值。請參考圖 1-4。

5、 圖 1-46. 在 Database Support 窗格中，保存所有默認設置，應選中“None。單擊“下一步。請參考圖 1-5。 圖 1-57. 在 User Interface Features 窗格中，確保選中 Use a Ribbon 選項。單擊“下一步。請參考圖 1-6。 圖 1-68. 在 Advanced Features 窗格中，去除所有選項。單擊“下一步。請參考圖 1-7。 圖 1-79. 在 Generated Classes 窗格中，保存所有默認設置。請參考圖 1-8。 圖 1-810. 要生成應用程序，請在 Build 菜單上選擇 Build Solution。如果應

6、用程序成功生成，請從 Debug 菜單中運行 Start Debugging。向導將自動創立具有一個功能區類別名稱為 Home 的 Windows 7 風格的功能區。此類別包含 3 個功能區面板，命名為 Clipboard、View 和 Window。請參考圖 1-9。 圖 1-9 練習 2：向現有功能區添加簡單的控件Visual Studio 2021 有一項新功能，稱為 MFC 應用程序的 Ribbon Designer，它可以方便地將任何功能區控件添加到應用程序中并進行編輯。在本練習中，將學習如何將控件拖到Ribbon Designer 中，以及如何輕松添加事件處理程序。在本練習中，您將

7、使用 EX02_StarterBeginRibbonApp 文件夾中的 RibbonApp 解決方案。任務 1 - 向現有功能區添加簡單控件1. 在 Visual Studio 2021 中啟動 RibbonApp.sln。2. 在 Resource 視圖中，展開 RibbonApp.rc -Ribbon-IDR_RIBBON 節點。雙擊該文件以翻開 Ribbon Designer。Resource View 面板、Ribbon Bar Designer 面板和 Toolbox 面板如圖 2-1 所示。 圖 2-13. 將一個 Category 控件從工具箱拖入到 Ribbon Bar。在設計

8、器中，會看到一個名為“Category1的類別，并在 Category1 中有一個名為“Panel1的面板。從工具箱中將兩個 Button 控件拖放到“Panel1。默認情況下，按鈕名稱為“Button1和“Button2。功能區欄具有了一個新的外觀，如圖 2-2 所示。 圖 2-24. 右鍵單擊“Category1，并選擇 Properties，翻開 Properties 窗口。如圖 2-3 所示，在 Property 窗口中，可以輕松地將標題重命名為“My Category，并編輯其他屬性。在 Property 窗口中，從“Large Images下拉列表中選擇“IDB_WRITELARG

9、E，并從“Small Images下拉列表中選擇“IDB_WRITESMALL。它定義了在這個類別中的元素的圖像集合。 圖 2-35. 翻開剛剛創立的按鈕的 Properties 窗口，并更改標題為“My Button和“My Choice。要為按鈕添加圖像，請翻開“My Choice的屬性窗口，然后單擊“Large Image Index中選擇值字段時，會看到 Browse 按鈕，允許瀏覽圖像集合。單擊 Browse 按鈕，將會彈出 Image Collection 對話框。選擇“0并編輯其他屬性，如圖 2-4 所示。將 Large Image Index 的值更改為“0以便為“My But

10、ton添加圖像。 圖 2-46. 測試功能區，方法是單擊工具欄上的“Test Ribbon按鈕，如圖 2-5 所示。 圖 2-57. 編譯并運行應用程序。現在，它具有如圖 2-6 所示的新外觀。創立的兩個按鈕“My Choice和“My Button是默認禁用的。按鈕將在為它們添加了單擊事件處理程序啟用。 圖 2-6任務 2 - 向控件添加事件處理程序1. 在 Ribbon Designer 中添加事件處理程序非常簡單。右鍵單擊“My Button按鈕控件，并選擇“Add Event Handler。將翻開 Event Handler Wizard。選擇“Command消息類型并從類列表中選擇

11、“CMainFrame，如圖 2-7 所示。 圖 2-72. 單擊“Add and Edit。向導將自動生成的一些函數，然后翻開源代碼編輯器。在這里，將看到 MainFrm.cpp 中的空函數 CMainFrame:OnMyButton()。 3. 在 Mainfrm.cpp 中的函數 OnMyButton() 中添加下面的代碼行。C+MessageBox(TEXT(This is My Button!), TEXT(My Button), MB_OK);4. 編譯并運行解決方案。應用程序將具有包含一個類別和兩個按鈕的功能區。點擊“My Button按鈕，測試應用程序，如圖 2-8 所示。 圖

12、 2-8練習 3：向現有功能區添加和使用更多控件練習 1 展示了如何使用 MFC 向導創立帶有默認功能區的應用程序。練習 2 展示了如何使用 Ribbon Designer 輕松添加或修改功能區控件。這次演示將展示有關功能區控件的更多信息，并集中討論如何在運行時使用按鈕、復選框、滑塊和組合框 MFC 功能區控件。任務 1 - 生成現有功能區應用程序以查看功能區控件1. 翻開 EX03_StarterBeginRibbonApp 文件夾中的 RibbonApp 解決方案2. 在 Build 菜單上，單擊 Rebuild Solution。3. 在 Debug 菜單上，單擊 Start Debug

13、ging。4. 將翻開如圖 3-1 所示的應用程序。這里顯示的所有功能區控件均使用 Ribbon Designer 創立。練習 2 展示了如何使用 Ribbon Designer。 圖 3-15. 單擊“My Category選項卡，將看到功能區的變化，如圖 3-2 所示。 圖 3-2幫助：為了方便，一些變量和函數如事件處理程序函數和幫助程序函數已經在此工程中聲明和定義，所以在以下任務中只需集中進行實現。 任務2 - 在運行時禁用和啟用按鈕1. 可以添加代碼來手動禁用或啟用一個按鈕。如圖 3-2 所示，My Category 的 Disable 面板包括一個復選框和一個按鈕。可以通過選中或去除

14、該復選框來觸發事件。選擇復選框將禁用 Object 按鈕。這些變量已經聲明，一些必要的函數也已經就緒。 2. 要在 MainFrm.cpp 中更新 CheckBox 控件的事件處理程序函數，請輸入以下代碼：C+void CMainFrame:OnDisableCheckbox()m_bChecked = !m_bChecked;void CMainFrame:OnUpdateDisableCheckbox(CCmdUI *pCmdUI)pCmdUI-SetCheck(!m_bChecked);3. 還必須更新 MainFrm.cpp 中的按鈕對象的事件處理程序函數，如下所示：C+void CM

15、ainFrame:OnUpdateDisableObject(CCmdUI *pCmdUI)pCmdUI-Enable(m_bChecked);4. 編譯并運行應用程序。如果選擇“Disable Object Button復選框，那么“Object按鈕將被禁用，如圖 3-3 所示。 圖 3-3 任務3 - 顯示當前選定的組合框工程。1. 更新 MainFrm.cpp 中的函數，以便在從組合框中的下拉列表中選擇工程時顯示一個消息框：C+void CMainFrame:OnComboMessage()CMFCRibbonComboBox* pFontComboBox = DYNAMIC_DOWNC

16、AST(CMFCRibbonComboBox, m_wndRibbonBar.FindByID(ID_COMBO_BOX);/ Get the selected indexint nCurSel =pFontComboBox-GetCurSel();if (nCurSel = 0) CString item=pFontComboBox-GetItem(nCurSel);CString sMessage = _T();sMessage.Format(_T(Current Selected Item is %s.),item);MessageBox(sMessage, _T(Combo Box I

17、tem), MB_OK); else MessageBox(_T(Please select one item from droplist of Combo Box.), _T(Combo Box Item), MB_OK); 2. 編譯并運行應用程序。3. 從組合框中選擇一個工程，然后單擊“Message Box按鈕。將顯示一個消息框，如下列圖 3-4 所示。 圖 3-4 任務 4 - 在按鈕按下時繪制一個矩形視圖1. Home 類別上的 Rectangle 面板包含一個 Draw 按鈕如圖 3-1。在 RibbonAppDoc.app 中更新以下函數，如下所示，以便單擊 Draw 按鈕時將

18、繪制矩形。 C+CRibbonAppDoc:CRibbonAppDoc()/ TODO:add one-time construction code herem_bDraw = FALSE;bool CRibbonAppDoc:EnableDraw(void)return m_bDraw;void CRibbonAppDoc:OnRectDraw()m_bDraw = TRUE;UpdateAllViews(NULL);2. 將以下行添加到 RibbonAppView.cpp void CRibbonAppView:OnDraw(CDC* pDC) 函數的注釋“/TODO: add draw

19、code for native data here后，如下所示：C+/ Draw a rectangleCRect client;CBrush brush;GetWindowRect(&client);if (pDoc-EnableDraw() & brush.CreateSolidBrush(RGB(255,0,222)int width=client.Width()/2; / to make it smallerint height= client.Height()/2;CRect rect=CRect(0,0, width, height);pDC-FillRect(rect, &bru

20、sh);3. 編譯并運行解決方案。單擊 Draw 按鈕查看應用程序，如圖 3-5 所示。 圖 3-5 任務 5 - 更改矩形的顏色1. Font 面板中的 Color 組合框控制矩形的顏色。要啟用 Color 控件，請實現 CRibbonAppDoc.cpp 中名為 CRibbonAppDoc:GetColor(void) 的函數，如下所示：C+COLORREF CRibbonAppDoc:GetColor(void)CMFCRibbonBar* pRibbon = (CMDIFrameWndEx*) AfxGetMainWnd()-GetRibbonBar();ASSERT_VALID(pR

21、ibbon);CMFCRibbonColorButton* pColor = DYNAMIC_DOWNCAST(CMFCRibbonColorButton, pRibbon-FindByID(ID_FONT_COLOR);/ Get the selected colorreturn pColor-GetColor();2. 更新 CRibbonAppDoc.cpp 中的事件處理程序函數 CRibbonAppDoc:OnFontColor() 。C+void CRibbonAppDoc:OnFontColor()UpdateAllViews(NULL);3. 更新 void CRibbonApp

22、View:OnDraw(CDC* pDC) 函數，將行“brush.CreateSolidBrush(RGB(255,0,222)更改為以下內容：C+brush.CreateSolidBrush(pDoc-GetColor()4. 編譯并運行應用程序。5. 單擊 Draw 按鈕，并從 Color 組合框中選擇 Yellow，查看新的用戶界面，如圖 3-6 所示。 圖 3-6 任務 6 - 移動滑塊以放大矩形1. 更新 CRibbonAppDoc.cpp 中的幫助程序函數 double CRibbonAppDoc:GetSliderFactor(void)，如下所示：C+/ Return the

23、 factor of zooming the rectangledouble CRibbonAppDoc:GetSliderFactor(void)/ Get a pointer to the ribbon barCMFCRibbonBar* pRibbon = (CMDIFrameWndEx*) AfxGetMainWnd()-GetRibbonBar();ASSERT_VALID(pRibbon);CMFCRibbonSlider* pSlider = DYNAMIC_DOWNCAST( CMFCRibbonSlider, pRibbon-FindByID(ID_RECT_SLIDER);/ Get current positionint position =pSlider-GetPos();return (double)position/(double)pSlider-GetRangeMax();2. U