visual studio ribbon界面设计入门

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