关于用户界面的种种(上)一文介绍了VS中的工具窗口。关于用户界面还有更多的内容,比如选项页(Options Page)、菜单图标,具体来说,本文介绍的内容将包括:
1)创建自定义的选项页;
2)设置菜单项的图标;
创建自定义的选项页
在安装了DPack后,可以在VS的选项页(Tools->Options)中看到新添加的一项:
这看起来很专业。很多时候我们开发的Add-In需要进行一定的配置,选项页是最佳选择:VS的用户一般习惯于在此处进行各种配置,所以把配置界面放在其它地方就显得突兀了。
对Add-In来说,我们需要实现IDTExtensibility2接口,这样可以将其交由VS来管理,选项页的实现与此类似,不过这里的接口是IDTToolsOptionsPage(从Add-In和选项页的开发过程中,我们也可以考虑如何开发自己的“插件式”应用程序)。具体来说,分为两步:
1)创建用户控件(User Control)来实现IDTToolsOptionsPage
该接口有5个方法,具体可以参看这里。其中最重要的是OnAfterCreated()和OnOK(),前者在VS呈现选项页时执行,后者在用户点击OK时执行。
2)在.Addin文件中添加新选项页的配置
此时需要节点
下面通过一个简单的例子来介绍具体的实现过程。
搜索编辑器中的选中文本
我们在编写代码的时候,经常需要搜索一些相关的内容,比如某个类型的信息,这时就复制类的名称,打开浏览器,打开Google,搜索那个类,有时可能会在其它搜索引擎或MSDN搜索。如果能把搜索的过程集成到VS中,是不是就方便了呢?
实现这个功能很简单。只要获取当前选中的文本,然后通过默认浏览器打开相应的URL就可以了:
![](http://img.e-com-net.com/image/info8/ffdcf21b5f0a4c8eac90d35bbbcd3545.gif)
可以在代码里面把URL作为常量来写,不过做成可配置的要好一些,这样修改时无须编译,而且可以添加新的搜索引擎,现在通过选项页来实现。首先得创建一个用户控件SearchTextOptionsPage,大体思路是在OnAfterCreated方法中根据xml中的配置动态生成控件供用户设置,并在OnOK方法中保存用户所做的设置:
![](http://img.e-com-net.com/image/info8/33f39c8bb37e46c7a58b67c845bbc57f.gif)
public void OnAfterCreated(DTE DTEObject)
{
List<SearchEngine> engines = SearchEngineConfigManager.Instance.GetSearchEngines();
for (int i = 0; i < engines.Count; i++)
{
this.Controls.Add(CreateSearchEngineLabel(engines[i], i));
this.Controls.Add(CreateSearchEngineTextBox(engines[i], i));
}
}
public void OnOK()
{
List<SearchEngine> engines = new List<SearchEngine>();
foreach (Control ctrl in Controls)
{
if (ctrl is TextBox)
{
TextBox txt = ctrl as TextBox;
int leftIndex = 3;
int rightIndex = txt.Name.IndexOf("Url");
string engineName = txt.Name.Substring(leftIndex, rightIndex - leftIndex);
string description = txt.Tag as string;
engines.Add(new SearchEngine()
{
Name = engineName,
Url = txt.Text.Trim(),
Description = description
});
}
}
SearchEngineConfigManager.Instance.Save(engines);
}
SearchEngineConfigManager是对xml文件进行操作的类。接下来要把选项页注册一下,在.Addin文件的根节点下添加如下内容:
![](http://img.e-com-net.com/image/info8/33f39c8bb37e46c7a58b67c845bbc57f.gif)
<ToolsOptionsPage>
<Category Name="NEnhancer">
<SubCategory Name="SearchTextInWeb">
<Assembly>NEnhancer.dllAssembly>
<FullClassName>NEnhancer.UserControls.SearchTextOptionsPageFullClassName>
SubCategory>
Category>
ToolsOptionsPage>
现在选项页看起来是这样的:
设置菜单项的图标
在VS的内置的菜单项中,相当一部分拥有自己的图标,这些图标使得所对应的命令更为直观,现在来看看如何添加这样的图标。
在此之前,我们曾经使用过两种方法添加菜单项,一是AddNamedCommand2方法,它的两个参数MSOButton、Bitmap共同指定了是否使用Office位图以及使用哪一个位图,如果使用Office位图的话,就将MSOButton设置为true,并通过Bitmap指定所使用位图的索引,如果是59,那就是经典的笑脸了。
第二种方法是通过CommandBarButton控件添加,比如:
![](http://img.e-com-net.com/image/info8/33f39c8bb37e46c7a58b67c845bbc57f.gif)
CommandBarButton searchCmd = helper.AddButtonToPopup(searchThisPopup, searchThisPopup.Controls.Count + 1,
e.Name, "Search in " + e.Name);
对于CommandBarButton来说,它的FaceId属性可用来指定Office位图,其取值跟上面的Bitmap参数是一样的,这样我们可以在添加CommandBarButton时设定图标了。如果要了解所有的位图索引信息,可以参考这个页面Office CommandBarButton FaceId。
最后,我们还可以使用自己创建的图标,具体过程可以参考Displaying custom bitmap for VS add-in,或者《Working with Microsoft Visual Studio 2005》一书的148页,此处不再赘述。
可以从这里下载代码,也可以在这里下载可运行的Add-In(解压缩后将文件放在[My Documents Path]\Visual Studio 2008\Addins下)。
我们身在何处?
本文着重介绍了如何为Add-In添加选项页(Options Page),这样可以为用户提供较为专业的配置界面,然后简单介绍了如何设置菜单项的图标。这一次的例子是SearchTextInWeb,可以直接打开浏览器搜索VS的选中文本,相信会你带来一些方便。
感谢:文中带有文本标注的截图来自于一个好玩的工具PrtScr,那些没有标注的截图则来自于PicPick。
参考
《Professional Visual Studio® 2008 Extensibility》
《Working with Microsoft Visual Studio® 2005》
Displaying custom bitmap for VS add-in
Office CommandBarButton FaceId