Visual Studio 2008 可扩展性开发（八）：关于用户界面的种种（下）

关于用户界面的种种（上）一文介绍了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文件中添加新选项页的配置

此时需要节点<ToolsOptionsPage>，VS将根据该节点加载选项页。

下面通过一个简单的例子来介绍具体的实现过程。

搜索编辑器中的选中文本

我们在编写代码的时候，经常需要搜索一些相关的内容，比如某个类型的信息，这时就复制类的名称，打开浏览器，打开Google，搜索那个类，有时可能会在其它搜索引擎或MSDN搜索。如果能把搜索的过程集成到VS中，是不是就方便了呢？





实现这个功能很简单。只要获取当前选中的文本，然后通过默认浏览器打开相应的URL就可以了：


C#
Code - Search Text(version 1)
可以在代码里面把URL作为常量来写，不过做成可配置的要好一些，这样修改时无须编译，而且可以添加新的搜索引擎，现在通过选项页来实现。首先得创建一个用户控件SearchTextOptionsPage，大体思路是在OnAfterCreated方法中根据xml中的配置动态生成控件供用户设置，并在OnOK方法中保存用户所做的设置：


C# Code -
实现IDTToolsOptionsPage接口
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
4000
;

            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文件的根节点下添加如下内容：


XML Code
- 注册Options Page
<ToolsOptionsPage>

    <Category Name="NEnhancer">

        <SubCategory Name="SearchTextInWeb">

            <Assembly>NEnhancer.dll</Assembly>

            <FullClassName>NEnhancer.UserControls.SearchTextOptionsPage</FullClassName>

        </SubCategory>

    </Category>
</ToolsOptionsPage>

现在选项页看起来是这样的：





设置菜单项的图标

在VS的内置的菜单项中，相当一部分拥有自己的图标，这些图标使得所对应的命令更为直观，现在来看看如何添加这样的图标。

在此之前，我们曾经使用过两种方法添加菜单项，一是AddNamedCommand2方法，它的两个参数MSOButton、Bitmap共同指定了是否使用Office位图以及使用哪一个位图，如果使用Office位图的话，就将MSOButton设置为true，并通过Bitmap指定所使用位图的索引，如果是59，那就是经典的笑脸了。

第二种方法是通过CommandBarButton控件添加，比如：


C#
Code
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》 

转自：http://www.cnblogs.com/anderslly/archive/2009/05/24/vs-addin-options-page.html