關於用戶界面的種種（上）一文介紹了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)
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方法中保存用戶所做的設置：
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</FullClas sName>
</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。
出處：http://anderslly.cnblogs.com
