演练：更新 MFC Scribble 应用程序（第 1 部分）

2025-06-21

本演练演示如何修改现有 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 应用程序中的基类

在scribble.cpp中，验证是否 CScribbleApp::InitInstance 包含对 AfxOleInit 的调用。
将以下代码添加到 pch.h 文件（Visual Studio 2017 及更早版本中的 stdafx.h ）：
```
#include <afxcontrolbars.h>
```
在 scribble.h 中，修改类的定义 CScribbleApp ，使其派生自 CWinAppEx 类。
```
class CScribbleApp: public CWinAppEx
```
Windows 应用程序使用初始化（.ini）文件保存用户首选项数据时，编写了 Scribble 1.0。修改 Scribble 以在注册表中存储用户首选项，而不是初始化文件。若要设置注册表项和基项，请在语句后面LoadStdProfileSettings()键入以下代码CScribbleApp::InitInstance。
```
SetRegistryKey(_T("MFCNext\\Samples\\Scribble2"));
SetRegistryBase(_T("Settings"));
```
多个文档界面（MDI）应用程序的主框架不再派生自该 CMDIFrameWnd 类。而是派生自 CMDIFrameWndEx 类。

在 mainfrm.h 和 mainfrm.cpp 文件中，将所有引用 CMDIFrameWnd 替换为 CMDIFrameWndEx。
在 childfrm.h 和 childfrm.cpp 文件中，替换为 CMDIChildWndCMDIChildWndEx。

在子文件夹中。 h 文件，替换为 CSplitterWndCSplitterWndEx.
修改工具栏和状态栏以使用新的 MFC 类。

在 mainfrm.h 文件中：
1. 将 CToolBar 替换为 CMFCToolBar。
2. 将 CStatusBar 替换为 CMFCStatusBar。
在mainfrm.cpp文件中：
1. 将 m_wndToolBar.SetBarStyle 替换为 m_wndToolBar.SetPaneStyle
2. 将 m_wndToolBar.GetBarStyle 替换为 m_wndToolBar.GetPaneStyle
3. 将 DockControlBar(&m_wndToolBar) 替换为 DockPane(&m_wndToolBar)

在ipframe.cpp文件中，注释掉以下三行代码。

m_wndToolBar.EnableDocking(CBRS_ALIGN_ANY);
pWndFrame->EnableDocking(CBRS_ALIGN_ANY);
pWndFrame->DockPane(&m_wndToolBar);

保存更改，然后生成并运行应用程序。

向项目添加位图

本演练的后续四个步骤需要位图资源。可以通过多种方式获取相应的位图：

使用资源编辑器发明自己的位图。或使用资源编辑器从 Visual Studio 附带的可移植网络图形（.png）图像中组装位图，可以从 Visual Studio 图像库下载。

但是， 功能区 用户界面要求某些位图支持透明图像。透明位图使用 32 位像素，其中 24 位指定颜色的红色、绿色和蓝色分量，8 位定义指定颜色透明度的 alpha 通道 。当前资源编辑器可以查看，但不能使用 32 位像素修改位图。因此，使用外部图像编辑器而不是资源编辑器来作透明位图。
将相应的资源文件从另一个应用程序复制到项目，然后从该文件导入位图。

本演练从演练中创建的示例复制资源文件：使用 MFC 创建功能区应用程序。

向项目添加位图

使用文件资源管理器将以下 .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 项目。
导入 MFC 应用程序的位图。在 资源视图中，双击 scribble.rc 节点，双击位图节点，然后单击“ 添加资源”。在出现的对话框中，单击“ 导入”。浏览到 res 目录，选择 main.bmp 文件，然后单击“ 打开”。

main.bmp 位图包含 26x26 图像。将位图的 ID 更改为 IDB_RIBBON_MAIN。
导入附加到 “应用程序 ”按钮的文件菜单的位图。
1. 导入 filesmall.bmp 文件，其中包含 11 个 16x16 （16x176）图像。将位图的 ID 更改为 IDB_RIBBON_FILESMALL。
注释

因为我们只需要前八张 16x16 图像（16x128），因此可以选择将此位图的右侧宽度从 176 裁剪为 128。
1. 导入 filelarge.bmp，其中包含 9 个 32x32 （32x288）图像。将位图的 ID 更改为 IDB_RIBBON_FILELARGE。
导入功能区类别和面板的位图。功能区栏上的每个选项卡都是一个类别，由文本标签和可选图像组成。
1. 导入 homesmall.bmp 位图，其中包含小按钮位图的 116x16 图像。将位图的 ID 更改为 IDB_RIBBON_HOMESMALL。
2. 导入 homelarge.bmp 位图，其中包含大型按钮位图的 9 个 32x32 图像。将位图的 ID 更改为 IDB_RIBBON_HOMELARGE。
为调整大小的功能区面板导入位图。如果功能区太小而无法显示整个面板，则这些位图或面板图标在调整大小作后使用。
1. 导入包含 8 个 16x16 图像的 panelicons.bmp 位图。在位图编辑器的“属性”窗口中，将位图的宽度调整为 64（16x64）。将位图的 ID 更改为 IDB_PANEL_ICONS。
注释

由于我们只需要前四张 16x16 图像（16x64），因此可以选择将此位图的右侧宽度从 128 裁剪为 64。

向项目添加功能区资源

将使用菜单的应用程序转换为使用功能区的应用程序时，无需删除或禁用现有菜单。只需创建功能区资源，添加功能区按钮，然后将新按钮与现有菜单项相关联。尽管菜单不再可见，但功能区栏中的消息通过菜单路由，菜单快捷方式将继续工作。

功能区由 应用程序 按钮组成，它是功能区左上角的大按钮，以及一个或多个类别选项卡。每个类别选项卡都包含一个或多个面板，这些面板充当功能区按钮和控件的容器。以下过程演示如何创建功能区资源，然后自定义 “应用程序 ”按钮。

向项目添加功能区资源

在 解决方案资源管理器中选择“Scribble 项目”后，在 “项目 ”菜单中，单击“ 添加资源”。
在“ 添加资源 ”对话框中，选择 功能区 ，然后单击“ 新建”。

Visual Studio 将创建功能区资源，并在设计视图中打开它。功能区资源 ID 显示在IDR_RIBBON1资源视图中。功能区包含一个类别和一个面板。
可以通过修改应用程序属性来自定义 应用程序 按钮。此代码中使用的消息 ID 已在 Scribble 1.0 菜单中定义。
在设计视图中，单击 “应用程序 ”按钮以显示其属性。更改属性值，如下所示：图像更改为IDB_RIBBON_MAIN、提示、File键到f、大图像到IDB_RIBBON_FILELARGE和小图像。IDB_RIBBON_FILESMALL
以下修改将创建当用户单击 “应用程序 ”按钮时出现的菜单。单击“主项”旁边的省略号（...），打开“项编辑器”。
1. 选中“ 项类型 按钮” 后，单击“ 添加 ”以添加按钮。将标题更改为 &New， ID 更改为 ID_FILE_NEW，图像更改为 0， 图像大 到 0。
2. 单击“ 添加” 以添加按钮。将标题更改为&Save、ID 更改为ID_FILE_SAVE、图像到2“大”和“大图像”。2
3. 单击“ 添加” 以添加按钮。将标题更改为Save &As、ID 更改为ID_FILE_SAVE_AS、图像到3“大”和“大图像”。3
4. 单击“ 添加” 以添加按钮。将标题更改为&Print、ID 更改为ID_FILE_PRINT、图像到4“大”和“大图像”。4
5. 将项类型更改为 “分隔符 ”，然后单击“ 添加”。
6. 将 “项类型”更改为 “按钮”。单击“ 添加” 以添加第五个按钮。将标题更改为&Close、ID 更改为ID_FILE_CLOSE、图像到5“大”和“大图像”。5
以下修改将在上一步中创建的 “打印 ”按钮下创建子菜单。
1. 单击“ 打印 ”按钮，将项目类型更改为 “标签”，然后单击“ 插入”。将标题更改为 Preview and print the document.
2. 单击“ 打印 ”按钮，将 “项目 类型”更改为 “按钮”，然后单击“ 插入”。将标题更改为&Print、ID 更改为ID_FILE_PRINT、图像到4“大”和“大图像”。4
3. 单击“ 打印 ”按钮，然后单击“ 插入 ”添加按钮。将标题更改为&Quick Print、ID 更改为ID_FILE_PRINT_DIRECT、图像到7“大”和“大图像”。7
4. 单击“ 打印 ”按钮，然后单击“ 插入 ”以添加另一个按钮。将标题更改为Print Pre&view、ID 更改为ID_FILE_PRINT_PREVIEW、图像到6“大”和“大图像”。6
5. 现已修改主项。单击“ 关闭 ”退出 “项编辑器。
以下修改将创建显示在 “应用程序 ”按钮菜单底部的退出按钮。
1. 在解决方案资源管理器中选择“资源视图”选项卡。
2. 在“属性”窗口中，单击按钮旁边的省略号（...）以打开“项编辑器”。
3. 选中“ 项类型 按钮” 后，单击“ 添加 ”以添加按钮。将标题更改为 E&xit， ID 更改为 ID_APP_EXIT，图像更改为 8。
4. 已修改按钮。单击“ 关闭 ”退出 “项编辑器。

创建功能区栏的实例

以下步骤演示如何在应用程序启动时创建功能区栏的实例。若要向应用程序添加功能区栏，请在 mainfrm.h 文件中声明功能区栏。然后，在mainfrm.cpp文件中，编写代码以加载功能区资源。

创建功能区栏的实例

在 mainfrm.h 文件中，向主帧的 CMainFrame类定义的受保护部分添加数据成员。此成员适用于功能区栏。
```
// Ribbon bar for the application
CMFCRibbonBar m_wndRibbonBar;
```

在mainfrm.cpp文件中，在函数末尾CMainFrame::OnCreate的最后return一条语句之前添加以下代码。它创建功能区栏的实例。

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

自定义功能区资源

创建 应用程序 按钮后，即可将元素添加到功能区。

注释

本演练对所有面板使用相同的面板图标。但是，可以使用其他图像列表索引来显示其他图标。

添加“开始”类别和“编辑”面板

Scribble 程序只需要一个类别。在设计视图中的 工具箱中，双击 “类别 ”以添加一个并显示其属性。更改属性值，如下所示：标题为&Home、大型图像更改为IDB_RIBBON_HOMELARGE、小图像。IDB_RIBBON_HOMESMALL
每个功能区类别都组织成命名面板。每个面板都包含一组完成相关作的控件。此类别有一个面板。单击“面板”，然后将“标题Edit”更改为。
在 “编辑 ”面板中，添加一个负责清除文档内容的按钮。此按钮的消息 ID 已在菜单资源中 IDR_SCRIBBTYPE 定义。指定 Clear All 为用于修饰按钮的位图文本和索引。打开工具箱，然后将按钮拖到“编辑”面板。单击该按钮，然后将 Caption 更改为 Clear All， ID 更改为 ID_EDIT_CLEAR_ALL， 图像索引 为 0， 大型图像索引 更改为 0。
保存更改，然后生成并运行应用程序。应显示 Scribble 应用程序，它应具有窗口顶部的功能区栏，而不是菜单栏。功能区栏应具有一个类别， “开始”和 “主页 ”应具有一个面板“ 编辑”。添加的功能区按钮应与现有事件处理程序相关联， “打开”、“ 关闭”、“ 保存”、“ 打印”和 “清除所有 ”按钮应按预期工作。

设置应用程序的外观

视觉对象管理器是一个全局对象，用于控制应用程序的所有绘图。由于原始 Scribble 应用程序使用 Office 2000 用户界面（UI）样式，因此应用程序看起来可能老式。可以重置应用程序以使用 Office 2007 视觉对象管理器，使其类似于 Office 2007 应用程序。

设置应用程序的外观

在函数中 CMainFrame::OnCreate ，在语句前 return 0; 键入以下代码以更改默认视觉对象管理器和样式。

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

保存更改，然后生成并运行应用程序。应用程序 UI 应类似于 Office 2007 UI。

后续步骤

你修改了经典 Scribble 1.0 MFC 示例以使用 功能区设计器。现在转到第 2 部分。

另请参阅

演练
 演练：更新 MFC Scribble 应用程序（第 2 部分）

通过

演练：更新 MFC Scribble 应用程序（第 1 部分）

先决条件

章节

替换基类

替换 Scribble 应用程序中的基类

向项目添加位图

向项目添加位图

向项目添加功能区资源

向项目添加功能区资源

创建功能区栏的实例

创建功能区栏的实例

自定义功能区资源

添加“开始”类别和“编辑”面板

设置应用程序的外观

设置应用程序的外观

后续步骤

另请参阅

反馈

其他资源