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就可以了：

private static readonly string MSDN_URL_FORMAT =
            "http://social.msdn.microsoft.com/Search/en-AU/?query={0}&ac=8";
        private static readonly string GOOGLE_URL_FORMAT =
            "http://www.google.cn/search?source=igchina&hl=zh-CN&q={0}&btnG=Google+%E6%90%9C%E7%B4%A2&aq=f";

private void LaunchUrlInDefaultBrowser(string url)
{
    System.Diagnostics.Process.Start(url);
}

private void SearchInMsdnCmdEvent_Click(object CommandBarControl, ref bool Handled, ref bool CancelDefault)
{
    string url = string.Format(MSDN_URL_FORMAT, helper.GetSelectedText());
    LaunchUrlInDefaultBrowser(url);
}

private void SearchInGoogleCmdEvent_Click(object CommandBarControl, ref bool Handled, ref bool CancelDefault)
{
    string url = string.Format(GOOGLE_URL_FORMAT, helper.GetSelectedText());
    LaunchUrlInDefaultBrowser(url);
}

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

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

<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控件添加，比如：

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