Ribbon风格的界面

实现一个Ribbon界面的步骤:

1.新建一个单文档Office类型的项目

2.然后一直下一步直到(用户界面功能)这个面板,选择使用功能区(即Ribbon界面)

3.继续下一步,一直到高级选项卡中,因为我们关注的重点是Ribbon,故去掉导航窗格和标题栏这两项,单击完成即可

编译运行的效果如下:

4.打开工程项目的资源视图中的Ribbon这一项

5.删除掉自带的Ribbon控件,方法:单击选中某个Ribbon按钮,然后单击Delete键就可以删除了,删除干净的效果如下:

6.打开工具箱,向Ribbon框架中添加Ribbon控件,工具栏中的Ribbon控件预览

7.向Ribbon框架中拖拽Ribbon控件,首先向框架中拖拽类别,然后类别中拖拽面板,然后向面板中拖拽控件

效果如下:

8.给按钮添加位图

在easyicon.net网站上寻找自己喜欢的图标,这里我找的是3张英雄联盟的图标,图标规格32*32

接下来使用IconWorkshop工具制作位图图像带

制作完成的图像带的效果如下:

9.将图像带添加到视图资源中

10.给Ribbon中的类别添加图像带,方法:选中类别,单击鼠标右键选择属性弹出属性窗口,找到大图标这一项,通过下拉列表选择刚刚添加的图像带的资源ID

11.给Ribbon按钮添加位图

依次选中Ribbon按钮,单击鼠标右键选择属性,修改大图标索引0,1,2... 我们刚刚添加的图像带中一共有三个图标,索引是由0开始的

效果如下:

12.给Ribbon按钮添加消息响应

方法:在Ribbon按钮上面单击鼠标右键选择添加时间处理程序

这里我简单的弹出了一个消息框

void CMainFrame::OnButton2()
{
    AfxMessageBox(_T("单击了Ribbon按钮1"));
}


void CMainFrame::OnButton3()
{
    AfxMessageBox(_T("单击了Ribbon按钮2"));
}


void CMainFrame::OnButton4()
{
    AfxMessageBox(_T("单击了Ribbon按钮3"));
}

最终效果如下:

其他Ribbon控件的用法类似