Visual Studio 系列之 创建华丽Ribbon界面.docx
- 文档编号:8184323
- 上传时间:2023-01-29
- 格式:DOCX
- 页数:20
- 大小:616.66KB
Visual Studio 系列之 创建华丽Ribbon界面.docx
《Visual Studio 系列之 创建华丽Ribbon界面.docx》由会员分享,可在线阅读,更多相关《Visual Studio 系列之 创建华丽Ribbon界面.docx(20页珍藏版)》请在冰豆网上搜索。
VisualStudio系列之创建华丽Ribbon界面
VisualStudio2010系列之创建华丽Ribbon界面(上)
随着Office2007的发布,它改变了以往传统的下拉式菜单用户界面,取而代之的是全新的被称之为“Ribbon”的固定式工具栏界面。
微软声称这种新的用户界面能够使用户更容易地使用软件的各项常用功能,例如Word2007中的保存,设置格式,插入图片等常用功能,都可以从Ribbon界面快速地访问到,从而提高用户的生产效率。
虽然很多用户还在抱怨“不习惯Ribbon界面”、“很多功能找不到位置”等等,但是,随着微软的“强制”推行,Ribbon界面也在越来越被人们所接受,很多应用软件也开始采用Ribbon界面。
更重要的是,在即将到来的Windows7中,操作系统本身更是大量地应用了Ribbon界面。
不管我们愿意或者不愿意,Ribbon界面开始大张旗鼓地攻占我们的软件界面,成为继下拉式菜单后新的标准用户界面。
作为用户,我们需要逐渐熟悉这种新的软件用户界面;而作为开发者,更是需要了解和认识这种新的软件用户界面,新的交互方式,从而利于这种新界面的优势,为用户提供更加优秀的软件。
“Ribbon来了!
”
Windows平台的进化,往往都伴随着系统图形界面的重新设计。
从WindowsXP到WindowsVista,最大的革新就是WindowsAero的引入。
而在微软的下一代Windows平台Windows7中,虽然Aero被保留下来,但是Windows7的图形用户界面更多的是朝着Office2007相同的方向前进,无论是系统自带的工具软件,例如画图、写字板等,还是上层的第三方应用软件,例如Office2007、AutoCAD、SnagIt等等,都全面应用了Ribbon界面。
图1Windows7中随处可见的Ribbon界面
在传统的软件界面设计中,我们都是采用“文件”、“编辑”、“视图”的菜单模式,这俨然成为软件界面设计的标准。
但是现实的情况是,随着软件的功能越来越强大,下拉菜单也随之变得越来越长,用户根本不清楚菜单深处到底隐藏着什么重要的功能。
这往往意味着用户要求软件实现的功能,其实软件早已经具有了,只是在菜单中隐藏得比较深,用户没有找到而已。
越来越长的菜单的另外一个弊端是,很多常用的功能被埋没在众多的菜单项中,使得用户在使用常用的功能时,还需要进行多次菜单选择,这无疑降低了工作效率。
为了改变这种现状,微软进行了大量的研究,在广泛听取用户意见的基础上,同时经过了严格的可用性测试,终于在Office2007中推出了革命性的Ribbon界面。
跟传统的菜单式用户界面相比较,Ribbon界面的优势主要体现在如下几个方面:
•所有功能有组织地集中存放,不再需要查找级联菜单、工具栏等等
•更好地在每个应用程序中组织命令
•提供足够显示更多命令的空间
•丰富的命令布局可以帮助用户更容易地找到重要的,常用的功能
•可以显示图示,对命令的效果进行预览,例如改变文本的格式等
•更加适合触摸屏操作
虽然从菜单式界面到Ribbon界面有一个漫长的熟悉的过程,但是一个不争的事实是,Ribbon界面正在被越来越多的人接受,相应的,越来越多的软件开发商开始抛弃传统的菜单式界面,转而采用Ribbon界面。
VisualStudio2010作为面向下一代Windows平台的开发工具,自然是对Ribbon界面全面支持。
下面我们就来看看如何利于VisualStudio2010开发面向Windows7的Ribbon界面。
创建MFC应用程序项目
实际上,Ribbon界面(Office2007风格的界面)的开发早在2008年就随着VisualC++FeaturePack被引入到VisualStudio2008中。
在即将到来的VisualStudio2010中,Ribbon界面的开发更是得到了原生的支持,使得Ribbon界面的开发更加简便高效。
首先,我们启动VisualStudio2010,创建一个基于MFC的应用程序,项目模板我们选择“MFCApplication”:
图2创建MFC应用程序
在接下来的“MFC应用程序向导”中,我们就可以对项目的可视化风格进行选择和配置。
VisualStudio2010支持MFC风格、标准的Windows风格,VisualStudio2005风格和Office2007风格。
而这里的Office2007风格,就是我们要创建的Ribbon界面:
图3设置Ribbon界面风格
在接下来的向导页中,我们可以选择命令栏(工具栏。
菜单栏)的样式,这里我们当然选择“Usearibbon”了。
当然,为了跟旧有的系统保持兼容,VisualStudio2010也支持传统的命令式界面,如果你的用户比较保守,想继续使用传统的菜单式界面,我们可以选择“Useamenubarandtoolbar”:
图4选择命令栏的风格
为了支持丰富的Office2007界面风格,MFC默认情况下为MFC文档应用程序添加了类似Outlook风格的导航面板(Navigationpane)和标题条(Captionbar)。
这两者并不是我们关注的重点,为了更好的展示Ribbon界面,我们这里就去掉这两个多余的面板:
图5去掉多余的界面元素
到这里,针对新项目的设置就完成了,点击“Finish”按钮关闭应用程序向导,VisualStudio2010就会按照我们的设置创建相应的MFC应用程序解决方案。
编译运行这个解决方案,我们就得到了第一个具有Ribbon界面的应用程序。
图6第一个Ribbon界面应用程序
Ribbon界面的构成
为了支持新的界面风格的开发,MFC提供了很多新的、经过扩展过后的应用程序类,界面类等。
例如在我们的实例程序中用到的CRibbonApp,CMainFrame就是分别从CWinAppEx,CMDIFrameWndEx派生的。
而CWinAppEx和CMDIFrameWndEx又是从传统的CWinApp和CMDIFrameWnd派生,在原有类的基础上,添加了对新的界面风格的支持。
图7支持新的界面风格的框架类
熟悉MFC界面开发的朋友都知道,应用程序的CMainFrame类负责整个主框架界面的创建和管理,在传统的菜单式界面下,它负责创建和管理菜单栏,状态栏,工具栏等。
同样的,在Ribbon界面下,它同样负责Ribbon界面的创建和管理。
classCMainFrame:
publicCMDIFrameWndEx
{
DECLARE_DYNAMIC(CMainFrame)public:
CMainFrame();//Attributespublic:
//Operationspublic:
//Overridespublic:
virtualBOOLPreCreateWindow(CREATESTRUCT&cs);//Implementationpublic:
virtual~CMainFrame();
#ifdef_DEBUGvirtualvoidAssertValid()const;virtualvoidDump(CDumpContext&dc)const;#endifprotected:
//controlbarembeddedmembersCMFCRibbonBarm_wndRibbonBar;
CMFCRibbonApplicationButtonm_MainButton;
CMFCToolBarImagesm_PanelImages;
CMFCRibbonStatusBarm_wndStatusBar;//Generatedmessagemapfunctionsprotected:
afx_msgintOnCreate(LPCREATESTRUCTlpCreateStruct);
afx_msgvoidOnWindowManager();
afx_msgvoidOnApplicationLook(UINTid);
afx_msgvoidOnUpdateApplicationLook(CCmdUI*pCmdUI);
DECLARE_MESSAGE_MAP()voidInitializeRibbon();
};
从上面的代码中我们可以看到,在Ribbon界面下,CMainFrame类包含了三个成员变量:
m_wndRibbonBar、m_MainButton、m_wndStatusBar,分别用于控制Ribbon界面的命令面板,应用程序按钮和状态栏。
清楚了各个变量对应的Ribbon界面元素后,我们就可以操作相应的成员变量,在Ribbon界面上添加我们需要的内容。
图8Ribbon界面的构成
处理菜单资源和消息响应函数
Ribbon界面相对于传统的菜单式界面,最大的差别就是用新的RibbonBar代替了传统的菜单栏。
我们可以看到,在默认情况下,RibbonBar已经拥有了一个名为“Home”的命令分组(Category),其中又包含了多个面板(Panel),每个面板中有一个或者多个命令按钮(RibbonButton)。
下面我们就来看看如何在RibbonBar上添加一个新的命令分组,然后在其中添加新的命令按钮以执行相应的功能。
按照传统的菜单式界面的开发流程,我们总是先编辑菜单资源,然后再创建相应的菜单命令消息响应函数,最后再实现这个消息响应函数,完成相应的任务。
在新的Ribbon界面中,我们还是先要按照这样的流程,完成菜单资源的编辑,实现消息响应函数等。
所以,我们先打开VisualStudio2010的资源编辑器,在IDR_RibbonUITYPE菜单资源中添加两个新的菜单项。
图9编辑菜单资源
然后,我们分别为这两个菜单项添加相应的消息响应函数:
图10添加消息响应函数
这里,我们只是演示Ribbon界面的创建,所以我们将这两个消息响应函数简单地实现如下:
//CRibbonUIViewmessagehandlersvoidCRibbonUIView:
:
OnEditSayhello()
{//TODO:
AddyourcommandhandlercodehereAfxMessageBox(_T("HelloRibbonUI!
"));
}voidCRibbonUIView:
:
OnEditSaygoodbye()
{//TODO:
AddyourcommandhandlercodehereAfxMessageBox(_T("GoodbyeRibbonUI!
"));
}
添加Ribbon按钮到现在为止,我们已经按照菜单式界面的开发流程,完成了资源的编辑和消息函数的实现。
如果这时我们编译运行解决方案,我们在程序界面上看不到任何变化,因为我们还没有把这些命令绑定到RibbonBar的命令按钮上。
在CMainFrame类中,它提供了一个专门的函数CMainFrame:
:
InitializeRibbon()来完成Ribbon界面的初始化工作,所以,我们在这个函数中添加如下代码,创建新的命令分组,然后将命令按钮映射到我们刚刚创建的菜单项。
voidCMainFrame:
:
InitializeRibbon()
{
BOOLbNameValid;
///…
////////////////////////////////////////////////////////////////添加一个命令分组(Category)“RibbonUICategory”CMFCRibbonCategory*pRibbonUICategory=
m_wndRibbonBar.AddCategory(_T("RibbonUICategory"),
IDB_WRITESMALL,IDB_WRITELARGE);
//添加一个面板(Panel)CMFCRibbonPanel*pTestPanel=pRibbonUICategory->AddPanel(_T("RibbonUIPanel"),m_PanelImages.ExtractIcon
(1));
//在面板上添加Ribbon命令按钮(CMFCRibbonButton)pTestPanel->Add(newCMFCRibbonButton(ID_EDIT_SAYHELLO,_T("SayHello"),0,0));
pTestPanel->Add(newCMFCRibbonButton(ID_EDIT_SAYHELLO,_T("SayHello"),1));
pTestPanel->Add(newCMFCRibbonButton(ID_EDIT_SAYGOODBYE,_T("SayGoodbye"),2));
/////////////////////////////////////////////////////////////////…}
在这段代码中,我们首先利用RibbonBar的AddCategory()函数,添加了一个新的命令分组(Category),也就是RibbonBar上的一个新的标签页。
然后,我们在这个新创建的标签页中,添加了一个新的面板(Panel)。
最后,我们创建了三个Ribbon命令按钮(CMFCRibbonButton),并将它们放置到面板中。
通过指定跟菜单资源中的菜单项相同的资源ID,我们将这些Ribbon命令按钮跟我们之前创建的菜单项一一对应起来。
当我们点击某个Ribbon命令按钮时,就会执行相应的菜单命令响应函数。
这样,我们就实现了菜单命令在RibbonBar的绑定,同时在界面上也能看到我们刚刚添加的命令按钮了。
图11新创建的命令按钮
在这里,我们只是简单地向大家介绍了Ribbon界面的基本概念和大致的开发流程,要想开发跟Office2007一样专业的Ribbon界面,我们还有很长的一段路要走,敬请关注本系列文章,创建面向Windows7的用户界面。
VisualStudio2010系列之创建华丽Ribbon界面(下)
上回我们介绍了Windows7中对Ribbon界面的广泛应用,随着今天Windows7Beta1的公开测试,我们也逐渐感觉到Ribbon界面离我们越来越近了。
作为程序员,我们做好了迎接Ribbon界面的准备了吗?
在上回中,我们简单地介绍了开发Ribbon界面的一般流程,同时演示了如何创建包含命令按钮(CMFCRibbonButton)的简单Ribbon界面,相信很多朋友都跃跃欲试,想为自己的软件创建专业的Ribbon界面。
但是,仅仅使用命令按钮是远远不能满足软件界面的交互需求的,同时也没有完全发挥Ribbon界面的强大威力。
为了支持Ribbon界面,VisualStudio2010为我们提供了很多控件,除了我们上回介绍的命令按钮(CMFCRibbonButton)之外,还有工具廊(CMFCRibbonGallery),颜色按钮(CMFCRibbonColorButton),编辑框(CMFCRibbonEdit),进度条(CMFCRibbonProgressBar)等等。
合理地使用这些控件,我们可以创建丰富的Ribbon界面,增强软件的可用性。
在这回中,我们就介绍一下如何使用这些控件,创建更加复杂的Ribbon界面,完成更加复杂的交互任务。
为了更好地理解和创建Ribbon界面,在开始具体地介绍各种控件之前,我们先来了解一下Ribbon界面的结构层次。
在上一回中,我们介绍了Ribbon界面主要由Ribbon面板(CMFCRibbonBar)构成,而Ribbon面板主要的主要分为三个层次:
•分类(CMFCRibbonCategory)
图1分类
很明显,“分类”就是作用相近的一类命令的组合。
例如在Word2007的Ribbon界面中,微软将跟插入元素相关的命令都放在“Insert”这个页面中,当用户想在Word文档中插入其他元素时,只要切换到这一页就可以找到他需要的命令。
在形式上,“分类”表现为Ribbon面板上的一个Tab页面。
我们可以使用函数AddCategory()在Ribbon面板上添加一个新的“分类”:
//添加一个命令分组(Category)“RibbonUICategory”CMFCRibbonCategory*pRibbonUICategory=
m_wndRibbonBar.AddCategory(_T("RibbonUICategory"),
IDB_WRITESMALL,IDB_WRITELARGE);
•面板(CMFCRibbonPanel)
图2面板
“面板”是“分类”的下一个层次。
它是联系更加紧密的一组命令的组合。
面板总是被放置在某个“分类”中,被“分类”所包含。
同时,“面板”又是一个容器,它包含着它的下一个层次“元素”。
我们可以通过AddPanel()函数在“分类”中添加新的“面板”:
//添加一个面板(Panel)CMFCRibbonPanel*pTestPanel=pRibbonUICategory->AddPanel(_T("RibbonUIPanel"),
m_PanelImages.ExtractIcon
(1));
•元素(CMFCRibbonBaseElement)
图3元素
“元素”就是我们通常意义上的控件、这些控件根据各自的功能,被分组放置在各个“面板”上,负责完成具体的交互任务。
VisualStudio2010提供的Ribbon界面“元素”主要包括命令按钮(CMFCRibbonButton)。
工具廊(CMFCRibbonGallery)、颜色按钮(CMFCRibbonColorButton)、编辑框(CMFCRibbonEdit)、进度条(CMFCRibbonProgressBar)等等。
这些类都派生自CMFCRibbonBaseElement。
图4丰富的Ribbon控件
下面我们就来详细介绍各种Ribbon控件的使用。
命令按钮
命令按钮可以说是我们最常用的Ribbon控件了,我们通常都是通过命令按钮来发送某个命令,执行某个动作。
它代替了过去的菜单命令,成为使用最频繁的Ribbon控件。
在Ribbon界面中,主要有三种形式的命令按钮:
大图标按钮,小图标按钮以及表示选择的复选按钮(CheckBox)。
图5命令按钮
按照上回我们介绍的Ribbon界面开发流程,我们需要先准备菜单资源,图标资源,实现消息响应函数等,这里我们就不再赘述这一过程,而把重点放在如何创建Ribbon界面。
下面的代码分别演示了这三种按钮的创建过程:
//创建一个新的面板,用于放置大图标按钮CMFCRibbonPanel*pPanel1=pCategory->AddPanel(_T("LargeButtons"));//创建按钮CMFCRibbonButton*pBtn1=newCMFCRibbonButton(ID_RIBBON_BTN_1,_T("Button"),0,0);//指定使用大图标pBtn1->SetAlwaysLargeImage();//将按钮添加到面板中pPanel1->Add(pBtn1);
CMFCRibbonButton*pBtn2=newCMFCRibbonButton(ID_RIBBON_BTN_2,_T("MenuButton"),1,1);//可以通过SetMenu()函数为按钮设置一个子菜单pBtn2->SetMenu(IDR_RIBBON_MENU_1);
pBtn2->SetAlwaysLargeImage();
pPanel1->Add(pBtn2);
CMFCRibbonButton*pBtn3=newCMFCRibbonButton(ID_RIBBON_BTN_3,_T("SplitButton"),2,2);
pBtn3->SetMenu(IDR_RIBBON_MENU_1,TRUE);
pBtn3->SetAlwaysLargeImage();//可以通过RemoveSubItem()和AddSubItem()动态地改变按钮的子项目pBtn3->RemoveSubItem(0);
pBtn3->AddSubItem(newCMFCRibbonButton(ID_RIBBON_MBTN_1,_T("Item1"),2),0);
pPanel1->Add(pBtn3);//创建新的面板,用于放置小图标按钮CMFCRibbonPanel*pPanel2=pCategory->AddPanel(_T("Small"));//创建小图标按钮CMFCRibbonButton*pBtn4=newCMFCRibbonButton(ID_RIBBON_BTN_4,_T("Button"),3);
pPanel2->Add(pBtn4);
CMFCRibbonButton*pBtn5=newCMFCRibbonButton(ID_RIBBON_BTN_5,_T("MenuButton"),4);
pBtn5->SetMenu(IDR_RIBBON_MENU_1);
pPanel2->Add(pBtn5);
CMFCRibbonButton*pBtn6=newCMFCRibbonButton(ID_RIBBON_BTN_6,_T("SplitButton"),5);
pBtn6->SetMenu(IDR_RIBBON_MENU_1,TRUE);
pBtn6->SetAlwaysLargeImage();
pBtn6->RemoveSubItem
(1);
pBtn6->AddSubItem(newCMFCRibbonButton(ID_RIBBON_MBTN_2,_T("Item2"),5),1);
pPanel2->Add(pBtn6);//创建新的面板,用于放置复选按钮CMFCRibbonPanel*pPanel3=pCategory->AddPanel(_T("CheckBoxes"));
pPanel3->Add(newCMFCRibbonCheckBox(ID_RIBBON_BTN_7,_T("CheckBox1")));
pPanel3->Add(newCMFCRibbonCheckBox(ID_RIBBON_BTN_8,_T("CheckBox2")));
pPanel3->Add(newCMFCRibbonCheckBox(ID_RIBBON_BTN_9,_T("CheckBox3")));
工具廊
Ribbon界面的一个重要革新,就是可以通过工具廊(CMFCRibbonGallery)控件,对命令的执行效果进行直观地预览。
例如Word2007的段落格式设置,就是通过工具廊直观地展示了格式的样子,这很大程度上减少了用户通过不断尝试各种参数找到合适格式的过程。
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- Visual Studio 系列之 创建华丽Ribbon界面 系列 创建 华丽 Ribbon 界面