Visual Studio 2008 擴展性開發（八）：打造專屬選項頁與選單圖示

上一篇介紹了 VS 中的工具視窗操作。本文繼續深入使用者介面主題，著重於兩項實用技巧：

1. 建立自訂選項頁
2. 設定選單項目圖示

建立自訂選項頁

安裝 DPack 後，在 工具 → 選項 中會出現新增的分類，這樣的整合顯得非常專業。對於需要配置的 Add-In，選項頁是最佳選擇——VS 使用者習慣在此集中設定，將配置介面放在其他位置反而顯得突兀。

實作步驟

Add-In 實作 IDTExtensibility2 讓 VS 管理生命週期；選項頁類似，需實作 IDTToolsOptionsPage 介面。具體分兩步：

1. 建立使用者控制項實作 IDTToolsOptionsPage
2. 在 .Addin 檔案中註冊

該介面有五個方法，核心是 OnAfterCreated()（VS 呈現選項頁時觸發）與 OnOK()（使用者按下確定時觸發）。註冊時需在 .Addin 根節點下加入 <ToolsOptionsPage> 區塊，VS 依此載入。

實戰範例：整合網頁搜尋到編輯器

寫代碼時常需搜尋類型資訊：複製名稱 → 開啟瀏覽器 → 打開 Google/MSDN → 貼上搜尋。若能整合到 VS 內部，效率將大幅提升。

核心邏輯極簡單：取得選取文字，透過預設瀏覽器開啟對應 URL。

private static readonly string MSDN_URL_FORMAT =
  "https://social.msdn.microsoft.com/Search/en-AU/?query={0}&ac=8";
private static readonly string GOOGLE_URL_FORMAT =
  "https://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(...) {
  string url = string.Format(MSDN_URL_FORMAT, helper.GetSelectedText());
  LaunchUrlInDefaultBrowser(url);
}

private void SearchInGoogleCmdEvent_Click(...) {
  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 內建選單項多有專屬圖示，讓命令更直觀。先前介紹過兩種新增選單的方式：

1. AddNamedCommand2：透過 MSOButton、Bitmap 參數指定 Office 內建圖示索引（如 59 為經典笑臉）
2. CommandBarButton 控制項：設定 FaceId 屬性指定 Office 圖示，索引同上

所有 Office 圖示索引可參考 Office CommandBarButton FaceId 頁面。若需使用自訂圖示，可參考 Displaying custom bitmap for VS add-in 或《Working with Microsoft Visual Studio 2005》第 148 頁。