ribbon开发.docx

1、ribbon开发本教程适用于正在开发桌面应用程序并希望利用新的 MFC 功能区框架优势的 MFC 开发人员。通过本教程的步骤，您将了解如何将默认的功能区添加到一个小应用程序中，在 Ribbon Designer 中编辑各个功能区控件，然后在运行时使用控件。您将看到通过 MFC 功能区框架编辑和使用功能区控件非常轻松。在本教程中，将完成在应用程序中添加和自定义基本功能区的所有必要步骤。本教程涉及实时编译代码并从此文档中复制代码。如果发生复制错误（或任何其他问题）无法编译应用程序，可以在本教程的程序包中找到全部完成的示例，以及每 个练习的最终源代码。这些示例可用于解决编译错误。先决条件您必须拥有以

2、下内容才能完成本实验： Microsoft Visual Studio 2010 Beta 2 （或更高版本） Windows 7学习目标在完成本教程时，您将了解如何： 在 Visual Studio 2010 中为应用程序创建默认的功能区 在 Ribbon Designer 中添加功能区控件，如按钮、复选框和区块 在 Ribbon Designer 中为功能区控件添加事件处理程序函数 在运行时使用功能区控件练习 1：在应用程序中创建默认功能区在本练习中，将开始在 Visual Studio 2010 中从头创建一个 Windows 7 风格的带有功能区的 MFC应用程序。您不必编写任何代码来

3、执行这些操作。只需单击，单击，再单击！任务 1 - 在 Visual Studio 2010 中创建新的带有功能区的 MFC 项目1. 在 Visual Studio 2010 中，使用 MFC Application Wizard 创建一个具有默认功能区的 MFC 应用程序。要运行向导，请在 File 菜单上，指向 New，然后选择 Project。将会显示 New Project 对话框。2. 在 New Project 对话框中，展开 Project Types 窗格中的 Visual C+ 节点，然后选择 MFC。在 Templates 窗格中，选择 MFC Application。键

4、入项目名称，如 RibbonApp，然后单击 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 窗格中，保

5、留所有默认值。请参考图 1-4。 图 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 菜单

6、上选择 Build Solution。如果应用程序成功生成，请从 Debug 菜单中运行 Start Debugging。向导将自动创建具有一个功能区类别名称为 Home 的 Windows 7 风格的功能区。此类别包含 3 个功能区面板，命名为 Clipboard、View 和 Window。请参考图 1-9。 图 1-9 练习 2：向现有功能区添加简单的控件Visual Studio 2010 有一项新功能，称为 MFC 应用程序的 Ribbon Designer，它可以方便地将任何功能区控件添加到应用程序中并进行编辑。在本练习中，将学习如何将控件拖到Ribbon Designer 中，以

7、及如何轻松添加事件处理程序。在本练习中，您将使用 EX02_StarterBeginRibbonApp 文件夹中的 RibbonApp 解决方案。任务 1 - 向现有功能区添加简单控件1. 在 Visual Studio 2010 中启动 RibbonApp.sln。2. 在 Resource 视图中，展开 RibbonApp.rc -Ribbon-IDR_RIBBON 节点。双击该文件以打开 Ribbon Designer。Resource View 面板、Ribbon Bar Designer 面板和 Toolbox 面板如图 2-1 所示。 图 2-13. 将一个 Category 控件

8、从工具箱拖入到 Ribbon Bar。在设计器中，会看到一个名为“Category1”的类别，并在 Category1 中有一个名为“Panel1”的面板。从工具箱中将两个 Button 控件拖放到“Panel1”。默认情况下，按钮名称为“Button1”和“Button2”。功能区栏具有了一个新的外观，如图 2-2 所示。 图 2-24. 右键单击“Category1”，并选择 Properties，打开 Properties 窗口。如图 2-3 所示，在 Property 窗口中，可以轻松地将标题重命名为“My Category”，并编辑其他属性。在 Property 窗口中，从“Larg

9、e Images”下拉列表中选择“IDB_WRITELARGE”，并从“Small Images”下拉列表中选择“IDB_WRITESMALL”。它定义了在这个类别中的元素的图像集合。 图 2-35. 打开刚才创建的按钮的 Properties 窗口，并更改标题为“My Button”和“My Choice”。要为按钮添加图像，请打开“My Choice”的属性窗口，然后单击“Large Image Index”（当选择值字段时，会看到 Browse 按钮，允许浏览图像集合）。单击 Browse 按钮，将会弹出 Image Collection 对话框。选择“0”并编辑其他属性，如图 2-4

10、所示。将 Large Image Index 的值更改为“0”以便为“My Button”添加图像。 图 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

11、”。将打开 Event Handler Wizard。选择“Command”消息类型并从类列表中选择“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. 编译并运行解决方案。应用程序将

12、具有包含一个类别和两个按钮的功能区。点击“My Button”按钮，测试应用程序，如图 2-8 所示。 图 2-8练习 3：向现有功能区添加和使用更多控件练习 1 展示了如何使用 MFC 向导创建带有默认功能区的应用程序。练习 2 展示了如何使用 Ribbon Designer 轻松添加或修改功能区控件。这次演示将展示有关功能区控件的更多信息，并集中讨论如何在运行时使用按钮、复选框、滑块和组合框 MFC 功能区控件。任务 1 - 生成现有功能区应用程序以查看功能区控件1. 打开 EX03_StarterBeginRibbonApp 文件夹中的 RibbonApp 解决方案2. 在 Build

13、菜单上，单击 Rebuild Solution。3. 在 Debug 菜单上，单击 Start Debugging。4. 将打开如图 3-1 所示的应用程序。这里显示的所有功能区控件均使用 Ribbon Designer 创建。（练习 2 展示了如何使用 Ribbon Designer。） 图 3-15. 单击“My Category”选项卡，将看到功能区的变化，如图 3-2 所示。 图 3-2帮助：为了方便，一些变量和函数（如事件处理程序函数和帮助程序函数）已经在此项目中声明和定义，所以在以下任务中只需集中进行实现。 任务2 - 在运行时禁用和启用按钮1. 可以添加代码来手动禁用或启用一个按

14、钮。如图 3-2 所示，My Category 的 Disable 面板包括一个复选框和一个按钮。可以通过选中或清除该复选框来触发事件。选择复选框将禁用 Object 按钮。这些变量已经声明，一些必要的函数也已经就绪。 2. 要在 MainFrm.cpp 中更新 CheckBox 控件的事件处理程序函数，请输入以下代码：C+void CMainFrame:OnDisableCheckbox()m_bChecked = !m_bChecked;void CMainFrame:OnUpdateDisableCheckbox(CCmdUI *pCmdUI)pCmdUI-SetCheck(!m_bCh

15、ecked);3. 还必须更新 MainFrm.cpp 中的按钮对象的事件处理程序函数，如下所示：C+void CMainFrame:OnUpdateDisableObject(CCmdUI *pCmdUI)pCmdUI-Enable(m_bChecked);4. 编译并运行应用程序。如果选择“Disable Object Button”复选框，则“Object”按钮将被禁用，如图 3-3 所示。 图 3-3 任务3 - 显示当前选定的组合框项目。1. 更新 MainFrm.cpp 中的函数，以便在从组合框中的下拉列表中选择项目时显示一个消息框：C+void CMainFrame:OnComb

16、oMessage()CMFCRibbonComboBox* pFontComboBox = DYNAMIC_DOWNCAST(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 Sele

17、cted Item is %s.),item);MessageBox(sMessage, _T(Combo Box Item), 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 面板包含一个 D

18、raw 按钮（如图 3-1）。在 RibbonAppDoc.app 中更新以下函数，如下所示，以便单击 Draw 按钮时将绘制矩形。 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.cp

19、p void CRibbonAppView:OnDraw(CDC* pDC) 函数的注释“/TODO: add draw 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()/

20、2;CRect rect=CRect(0,0, width, height);pDC-FillRect(rect, &brush);3. 编译并运行解决方案。单击 Draw 按钮查看应用程序，如图 3-5 所示。 图 3-5 任务 5 - 更改矩形的颜色1. Font 面板中的 Color 组合框控制矩形的颜色。要启用 Color 控件，请实现 CRibbonAppDoc.cpp 中名为 CRibbonAppDoc:GetColor(void) 的函数，如下所示：C+COLORREF CRibbonAppDoc:GetColor(void)CMFCRibbonBar* pRibbon = (C

21、MDIFrameWndEx*) AfxGetMainWnd()-GetRibbonBar();ASSERT_VALID(pRibbon);CMFCRibbonColorButton* pColor = DYNAMIC_DOWNCAST(CMFCRibbonColorButton, pRibbon-FindByID(ID_FONT_COLOR);/ Get the selected colorreturn pColor-GetColor();2. 更新 CRibbonAppDoc.cpp 中的事件处理程序函数 CRibbonAppDoc:OnFontColor() 。C+void CRibbon

22、AppDoc:OnFontColor()UpdateAllViews(NULL);3. 更新 void CRibbonAppView: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 中的帮助程序函数

23、 double CRibbonAppDoc:GetSliderFactor(void)，如下所示：C+/ Return the factor of zooming the rectangledouble CRibbonAppDoc:GetSliderFactor(void)/ Get a pointer to the ribbon barCMFCRibbonBar* pRibbon = (CMDIFrameWndEx*) AfxGetMainWnd()-GetRibbonBar();ASSERT_VALID(pRibbon);CMFCRibbonSlider* pSlider = DYNAMI

24、C_DOWNCAST( CMFCRibbonSlider, pRibbon-FindByID(ID_RECT_SLIDER);/ Get current positionint position =pSlider-GetPos();return (double)position/(double)pSlider-GetRangeMax();2. Update the event handler function of the Slider as follows:C+void CRibbonAppDoc:OnRectSlider()if(GetAsyncKeyState(VK_LBUTTON)=0

25、) UpdateAllViews(NULL); 3. 更新 void CRibbonAppView:OnDraw(CDC* pDC) 函数以启用滑块功能。 C+if (pDoc-EnableDraw() & brush.CreateSolidBrush(pDoc-GetColor()int width=client.Width()/2; / to make it smallerint height= client.Height()/2;double factor=pDoc-GetSliderFactor();if (factor) width=width*factor;height=heigh

26、t*factor; CRect rect=CRect(0,0, width, height);pDC-FillRect(rect, &brush);4. 编译并运行应用程序。5. 单击 Draw 按钮，然后移动滑块。当滑块移动时，矩形将使用一个缩放系数重新调整大小，如图 3-7 所示。 图 3-7帮助：此练习结束时，使用 EX03_StarterBeginRibbonAppRibbonApp.sln 生成的应用程序应该与使用 EX03_StarterEndRibbonAppRibbonApp.sln 生成的应用程序一样。 总结我们已经成功完成了 MFC 功能区的介绍教程。我们了解新的 MFC 功能区框架如何帮助您快速、轻松地使用 MFC 向导和 Ribbon Designer 创建功能区应用程序。