代码改变世界

Visual Studio 2008 可扩展性开发(八):关于用户界面的种种(下)

2009-05-24 16:39 by Anders Cui, ... 阅读, ... 评论, 收藏, 编辑

关于用户界面的种种(上)一文介绍了VS中的工具窗口。关于用户界面还有更多的内容,比如选项页(Options Page)、菜单图标,具体来说,本文介绍的内容将包括:

1)创建自定义的选项页;

2)设置菜单项的图标;

创建自定义的选项页

在安装了DPack后,可以在VS的选项页(Tools->Options)中看到新添加的一项:

dpack-options-page

这看起来很专业。很多时候我们开发的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中,是不是就方便了呢?

search-selected-text

实现这个功能很简单。只要获取当前选中的文本,然后通过默认浏览器打开相应的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;
            
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>

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

options-page

设置菜单项的图标

在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

set-office-bitmap

最后,我们还可以使用自己创建的图标,具体过程可以参考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