VSTO之旅系列(三):自定义Excel UI

时间:2021-10-20 20:24:57

本专题概要

  • 引言
  • 自定义任务窗体(Task Pane)
  • 自定义选项卡,即Ribbon
  • 自定义上下文菜单
  • 小结

 

引言

在上一个专题中为大家介绍如何创建Excel的解决方案,相信大家通过从上面一个专题之后了解了Excel的对象模型,以及Office两种解决方案的,看完上一个专题之后,肯定很多朋友想为Excel自定义属于自己的UI界面,例如,有这样的一些疑问——是否可以使用VSTO来自定义选项卡呢? 是否可以自定义上下文菜单的呢?如果你也有这些疑问的话,相信通过本专题你将会得到答案的,下面就开始我们本专题的介绍。

二、自定义任务窗体

  在使用Word2010的时候我们可以通过左边的导航来看了解文档的结构,同时我们也可以在输入框的地方输入文字来进行搜索,然而这个左边的导航就是一个任务窗体,相信通过下面的图大家可以理解Word中那部分是一个任务窗体:

VSTO之旅系列(三):自定义Excel UI

但是我们在使用Excel中却没有找到类似的任务窗体,这时候大家肯定会有这样一个疑问——如果我想在Excel也想实现一个自定义任务窗体该怎么办呢?用VSTO可以帮我们办到吗?答案是肯定的。首先先模拟一个需求的,相信大家都知道使用F1是打开一个帮助文档,但是弹出的帮助文档是与Excel在不同界面的,所以很多朋友在查阅帮助的文档的时候都需要缩小Excel文档来查阅,这样就显得有些不方便了,我在使用的时候就想,能不能把帮助文档继承在Excel的右边呢?这样我们查阅Excel帮助文档就方便多了,就不要缩小Excel文档,或在Excel和帮助文档之间左右切换了。既然有这种需求,我们就有实现它的必要性,下面就具体说说如何实现的:

首先在看具体代码之前,我向大家分析下实现一个任务窗体的思路:

  • 首先,任务窗体是一个窗体,当然就需要在创建的Excel解决方案中创建一个窗体的了,这里我们创建了一个用户控件
  • 创建和设计完用户控件的界面之后,我们就需要把这个用户控件添加到Excel中去了,然而我们在以前的接触的开发中,添加控件都是把控件添加到某个几个中去的,例如WinForm中要向窗体添加一个button按钮,就需要把这个button添加进Controls集合中,同样VSTO也提供这样一个把任务面板添加进去的集合—— Microsoft.Office.Tools.CustomTaskPaneCollection,我们可以通过 Globals.ThisAddIn.CustomTaskPanes这行代码来获得这个集合,然后调用Add方法就可以把我们自定义的任务面板添加进Excel中了。
  • 添加进去之后,我们还需要使任务面板显示出来,这样就涉及了Visible属性了,确实 Microsoft.Office.Tools.CustomTaskPane 也有Visible属性

有了上面的分析过程之后,相信大家看下面的代码会比较容易理解,另外注意的一点是,因为我们要实现的帮助文档的任务窗体,由于帮助文档是在浏览器中显示的,这样我们就需要集成一个浏览器到我们的创建的用户控件中的,大家看到浏览器这个词可千万不要觉得有所畏惧,因为微软提供了WebBrowser控件来帮助我们实现,对于浏览器的更多内容可以参看我的这篇博客:自定义Web浏览器, 自定义任务窗体的代码如下:

 public partial class ThisAddIn
{
// 定义一个任务窗体
internal Microsoft.Office.Tools.CustomTaskPane helpTaskPane;

private void ThisAddIn_Startup(object sender, System.EventArgs e)
{
// 把自定义窗体添加到CustomTaskPanes集合中
// ExcelHelp 是一个自定义控件类
helpTaskPane = Globals.ThisAddIn.CustomTaskPanes.Add(new ExcelHelp(""), "Excel Help");

// 使任务窗体可见
helpTaskPane.Visible = true;
// 通过DockPosition属性来控制任务窗体的停靠位置,
// 设置为 MsoCTPDockPosition.msoCTPDockPositionRight这个代表停靠到右边,这个值也是默认值
//helpTaskPane.DockPosition = MsoCTPDockPosition.msoCTPDockPositionRight;
}

private void ThisAddIn_Shutdown(object sender, System.EventArgs e)
{
}
}

三、自定义选项卡,即Ribbon

 上面实现的任务窗体在Excel一打开的时候就会显示停靠在Excel的右边,如下图所示:

VSTO之旅系列(三):自定义Excel UI

然而当我们点击任务窗体中的"X"按钮就是关闭任务窗体,关闭之后就有一个问题,如果我们又想把帮助任务窗体显示出来怎么办呢?因为在Word中的导航窗体也不是一开始就显示的(有些朋友可能打开的Word文档没有导航窗体),此时我们通过勾选视图选项卡中 “导航窗格”或点击开始选项卡中的查找按钮来显示导航窗体:

VSTO之旅系列(三):自定义Excel UI

此时,我们就想在Excel中是否可以自定义一个选项卡,通过选项卡中按钮来显示/隐藏 Excel的帮助任务窗体呢?下面就具体介绍如何创建一个自定义选项卡:

  1. 右键你的Excel项目,添加—>新建项,在弹出的添加新项窗口中选择 "功能区(可视化设计器)" 
  2. 输入名称之后单击添加按钮
  3. 设计选项卡UI界面,本例子中添加了一个toggleButton.

通过上面的步骤就可以创建一个自定义选项卡,这种方式创建的选项卡在Excel项目(针对的是外接Excel项目类型)启动的时候就会被加载。

下面具体介绍了如何设计选项卡(即Ribbon):

  1. 设计RibbonTab,首先把ControlIdType属性设置为Custom,不然我们设计的RibbonGroup部分将会在加载项选项卡下,然后设置Name为HelpTab,这样我们创建的选项卡才会成为一个新的选项卡,如果我们想把ToggleButton放在Home选项卡下显示,此时我们只需要把ControlIdType设置为Office,然后把OfficeId设置为TabHome, 具体情况大家可以测试看看的,关于Office 中内置的Control ID 列表,大家可以从下面这个链接下载:  

    2007 Office System Document: Lists of Control IDs 

VSTO之旅系列(三):自定义Excel UI

2. 从工具箱中拖出一个ToggleButton,把Label属性设置为Help,并把ControlSize属性设置为RibbonControlSizeLarge:

VSTO之旅系列(三):自定义Excel UI

 

3. 双击 Help ToggleButton按钮,实现它的单击事件:

  // 帮助选项卡中toggleButton的单击事件        private void toggleHelpBtn_Click(object sender, RibbonControlEventArgs e)        {            // 通过toggleHelpButton的选中状态来控制帮助任务栏的显示和隐藏            Globals.ThisAddIn.helpTaskPane.Visible = toggleHelpBtn.Checked;        }

通过上面的三步也就完成了一个Ribbon的创建了,当我们创建好一个Ribbon之后,我们可以通过我们自定义的Ribbon下的按钮来显示/隐藏我们的任务窗体,但是到这里,Ribbon的开发并没有结束,此时还有一个问题就是——当我们点击 “Excel help”右上角的X按钮关闭时,我们Ribbon下的按钮状态也要跟着更变(大家可以测试,当我们关闭Word中的导航任务窗体时,试图下的"导航窗格"复选框“也会跟着改变),此时我们就需要实现:点击关闭按钮与Help按钮状态同步的功能的,此时我们只需要对TaskPane的VisibleChanged事件进行处理就可以(因为关闭任务窗体就会触发该事件,所以只需要把同步状态的代码放在该事件就可以了),具体代码如下:

// 定义一个任务窗体        internal Microsoft.Office.Tools.CustomTaskPane helpTaskPane;        private void ThisAddIn_Startup(object sender, System.EventArgs e)        {            // 把自定义窗体添加到CustomTaskPanes集合中            // ExcelHelp 是一个自定义控件类            helpTaskPane = Globals.ThisAddIn.CustomTaskPanes.Add(new ExcelHelp(""), "Excel Help");                      // 使任务窗体可见            //helpTaskPane.Visible = true;            // 通过DockPosition属性来控制任务窗体的停靠位置,            // 设置为 MsoCTPDockPosition.msoCTPDockPositionRight这个代表停靠到右边,这个值也是默认值            //helpTaskPane.DockPosition = MsoCTPDockPosition.msoCTPDockPositionRight;                        // 当用户点击 “Excel help”右上角的X按钮关闭时,我们需要同步选项卡上button的状态             helpTaskPane.VisibleChanged += new EventHandler(helpTaskPane_VisibleChanged);            // 添加上下文菜单            //AddToCellMenu();        }        private void ThisAddIn_Shutdown(object sender, System.EventArgs e)        {        }               // 用户点击 "Excel Help" 侧边栏右上角的X按钮关闭它时 // 我们需要正确同步 “帮助”按钮的状态 // 我们可以通过处理 “Excel Help”侧边栏的VisualChanged 事件完成        private void helpTaskPane_VisibleChanged(object sender, EventArgs e) { // 获得Help Ribbon 对象            Help helpRibbon = Globals.Ribbons.GetRibbon<Help>(); // 同步Help Ribbon下的"帮助"按钮的状态            helpRibbon.toggleHelpBtn.Checked = Globals.ThisAddIn.helpTaskPane.Visible; }

运行效果图为:

VSTO之旅系列(三):自定义Excel UI      VSTO之旅系列(三):自定义Excel UI

四、自定义上下文菜单

 看完上面两部分的实现之后,我在学习的过程中又想——能不能通过右键菜单来显示/隐藏任务窗体呢? 对于这点VSTO也是可以做到的,我们只需要添加CommandBarButton对象(当我们右键一个单元格(即为Cell)的时候,我们可以看到一上下文菜单,菜单内所有控件(不管是按钮还是排序这样的菜单控件)),然后设置该对象的属性和添加一个Click事件,主要代码如下:

 // 添加一个自定义按钮到单元格上下文菜单中            contextMenu =Application.CommandBars["Cell"];            CommandBarButton commandBarbtn = (CommandBarButton)contextMenu.Controls.Add(MsoControlType.msoControlButton, Before: 1);            commandBarbtn.Tag = "Help_Tag";            commandBarbtn.Caption = "查看帮助";            commandBarbtn.FaceId = 49;            commandBarbtn.Click+=new _CommandBarButtonEvents_ClickEventHandler(commandBarbtn_Click);  

运行效果为(这样我们右键Cell的时候就会多出一个我们自己定义的 ”查看帮助“按钮):

VSTO之旅系列(三):自定义Excel UI

五、小结

到这里本专题的内容就介绍完了,本专题主要介绍如何为Excel创建一个自定义的任务窗体、Ribbon和上下文菜单,对于Word和Outlook这部分的内容我就不重复介绍,创建方式和Excel的创建方式很类似。在下一个专题中我将给大家介绍下如何创建Word解决方案。

本专题所有源码:http://files.cnblogs.com/zhili/ExcelHelpTaskPane.zip 

 


<script type="text/javascript"><!--google_ad_client = "ca-pub-1944176156128447";/* cnblogs 首页横幅 */google_ad_slot = "5419468456";google_ad_width = 728;google_ad_height = 90;//--></script><script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>