在Outlook Add-in中创建自定义功能区选项卡

一、先理清两种Outlook插件类型 #

你遇到的困惑核心是混淆了Web Add-in（Yeoman生成的）和VSTO Add-in（Visual Studio桌面端插件）：

• Yeoman生成的是Web Add-in，基于Web技术（HTML/JS/CSS），支持Windows/Mac/Web版Outlook，功能区配置靠manifest.xml。
• Visual Studio里的是VSTO Add-in，仅支持Windows版Outlook，用.NET语言（C#/VB）开发，功能区可选可视化设计或XML配置。

二、Yeoman生成的Web Add-in 自定义功能区（跨平台） #

所有配置都在项目根目录的manifest.xml文件中，以下是创建新选项卡、按钮、下拉菜单的步骤：

1. 定位并修改manifest.xml #

找到<VersionOverrides xmlns="http://schemas.microsoft.com/office/mailappversionoverrides/1.1">节点，在其内部添加自定义功能区配置。

2. 添加自定义选项卡+按钮示例 #

在<VersionOverrides>下的<Hosts><Host xsi:type="MailHost">里，插入以下代码：

<DesktopFormFactor>
  <FunctionFile resid="Commands.Url" />
  <ExtensionPoint xsi:type="MessageReadCommandSurface">
    <!-- 自定义选项卡 -->
    <CustomTab id="MyCustomTab">
      <Group id="MyCustomGroup">
        <Label resid="CustomGroupLabel" />
        <!-- 自定义按钮 -->
        <Control xsi:type="Button" id="MyCustomButton">
          <Label resid="CustomButtonLabel" />
          <Supertip>
            <Title resid="CustomButtonTitle" />
            <Description resid="CustomButtonDesc" />
          </Supertip>
          <Icon>
            <bt:Image size="16" resid="Icon.16x16" />
            <bt:Image size="32" resid="Icon.32x32" />
            <bt:Image size="80" resid="Icon.80x80" />
          </Icon>
          <!-- 绑定按钮点击事件 -->
          <Action xsi:type="ExecuteFunction">
            <FunctionName>handleCustomButtonClick</FunctionName>
          </Action>
        </Control>
      </Group>
      <Label resid="CustomTabLabel" />
    </CustomTab>
  </ExtensionPoint>
</DesktopFormFactor>

3. 添加下拉菜单示例 #

在上面的<Group>节点内，添加菜单控件：

<!-- 自定义下拉菜单 -->
<Control xsi:type="Menu" id="MyCustomMenu">
  <Label resid="CustomMenuLabel" />
  <Supertip>
    <Title resid="CustomMenuTitle" />
    <Description resid="CustomMenuDesc" />
  </Supertip>
  <Icon>
    <bt:Image size="16" resid="Icon.16x16" />
    <bt:Image size="32" resid="Icon.32x32" />
    <bt:Image size="80" resid="Icon.80x80" />
  </Icon>
  <Items>
    <Item id="MenuOption1">
      <Label resid="MenuOption1Label" />
      <Action xsi:type="ExecuteFunction">
        <FunctionName>handleMenuOption1</FunctionName>
      </Action>
    </Item>
    <Item id="MenuOption2">
      <Label resid="MenuOption2Label" />
      <Action xsi:type="ExecuteFunction">
        <FunctionName>handleMenuOption2</FunctionName>
      </Action>
    </Item>
  </Items>
</Control>

4. 补充资源字符串 #

在<Resources>节点下，添加对应文本和图标引用：

<bt:Images>
  <bt:Image id="Icon.16x16" DefaultValue="https://your-domain.com/icon-16.png" />
  <bt:Image id="Icon.32x32" DefaultValue="https://your-domain.com/icon-32.png" />
  <bt:Image id="Icon.80x80" DefaultValue="https://your-domain.com/icon-80.png" />
</bt:Images>
<bt:ShortStrings>
  <bt:String id="CustomTabLabel" DefaultValue="我的自定义选项卡" />
  <bt:String id="CustomGroupLabel" DefaultValue="我的工具组" />
  <bt:String id="CustomButtonLabel" DefaultValue="执行操作" />
  <bt:String id="CustomButtonTitle" DefaultValue="执行自定义操作" />
  <bt:String id="CustomMenuLabel" DefaultValue="更多选项" />
  <bt:String id="CustomMenuTitle" DefaultValue="选择子操作" />
  <bt:String id="MenuOption1Label" DefaultValue="选项一" />
  <bt:String id="MenuOption2Label" DefaultValue="选项二" />
</bt:ShortStrings>
<bt:LongStrings>
  <bt:String id="CustomButtonDesc" DefaultValue="点击执行我的自定义逻辑" />
  <bt:String id="CustomMenuDesc" DefaultValue="选择需要执行的子操作" />
</bt:LongStrings>

5. 实现按钮/菜单的JS逻辑 #

在commands.js文件中，添加对应的函数：

function handleCustomButtonClick(event) {
  // 这里写按钮点击后的逻辑，比如获取邮件内容
  Office.context.mailbox.item.body.getAsync("html", function(result) {
    if (result.status === Office.AsyncResultStatus.Succeeded) {
      console.log("邮件内容：", result.value);
    }
  });
  event.completed();
}

function handleMenuOption1(event) {
  console.log("菜单选项一被点击");
  event.completed();
}

function handleMenuOption2(event) {
  console.log("菜单选项二被点击");
  event.completed();
}

6. 测试插件 #

用Yeoman生成的测试命令（比如npm start）启动插件，在Outlook中加载，即可看到自定义选项卡。

三、Visual Studio中VSTO Add-in 自定义功能区（仅Windows） #

1. 选择正确的项目类型 #

打开Visual Studio，创建新项目时搜索**"Outlook 外接程序"，选择"Visual Studio Tools for Office (VSTO)"**对应的项目模板（比如"Outlook 2019 外接程序"），这就是桌面端的VSTO插件项目。

2. 理解"Ribbon (Visual Designer)" #

这是Visual Studio提供的可视化拖拽工具：

• 无需手写XML，直接拖拽按钮、菜单、文本框等控件到设计界面。
• 适合快速构建功能区，属性面板可直接设置控件的名称、文本、图标等。

另一种选项是**"Ribbon (XML)"**，需要手写XML配置功能区，适合更复杂、灵活的场景。

3. 用Visual Designer创建自定义选项卡 #

• 右键项目 -> 添加 -> 新建项 -> 选择**"Ribbon (Visual Designer)"**，命名后打开设计界面。
• 在设计界面的"属性"面板中，找到Ribbon的Tabs集合，点击添加新选项卡（Tab）。
• 设置新选项卡的Label为自定义名称（比如"我的工具"），然后在选项卡下添加Group，设置Label。
• 从工具箱拖拽Button或Menu到Group中，设置控件的Label和Image。
• 双击按钮，编写C#逻辑：

private void MyCustomButton_Click(object sender, RibbonControlEventArgs e)
{
    // 获取当前选中的邮件
    Outlook.MailItem mailItem = Globals.ThisAddIn.Application.ActiveExplorer().Selection[1] as Outlook.MailItem;
    if (mailItem != null)
    {
        MessageBox.Show($"当前邮件主题：{mailItem.Subject}");
    }
}

4. 用XML方式创建自定义选项卡 #

• 添加**"Ribbon (XML)"**项后，打开Ribbon1.xml，编写配置：

<customUI xmlns="http://schemas.microsoft.com/office/2006/01/customui">
  <ribbon>
    <tabs>
      <tab id="MyCustomTab" label="我的自定义选项卡">
        <group id="MyCustomGroup" label="我的工具组">
          <button id="MyCustomButton" label="执行操作" size="large"
                  imageMso="HappyFace" onAction="MyCustomButton_Click" />
          <menu id="MyCustomMenu" label="更多选项" imageMso="FileMenu">
            <button id="MenuOption1" label="选项一" onAction="MenuOption1_Click" />
            <button id="MenuOption2" label="选项二" onAction="MenuOption2_Click" />
          </menu>
        </group>
      </tab>
    </tabs>
  </ribbon>
</customUI>

• 在Ribbon1.cs中实现IRibbonExtensibility接口的方法，并编写事件逻辑：

public void MyCustomButton_Click(Office.IRibbonControl control)
{
    Outlook.MailItem mailItem = Globals.ThisAddIn.Application.ActiveExplorer().Selection[1] as Outlook.MailItem;
    if (mailItem != null)
    {
        MessageBox.Show($"邮件主题：{mailItem.Subject}");
    }
}

public void MenuOption1_Click(Office.IRibbonControl control)
{
    MessageBox.Show("选项一被点击");
}

内容的提问来源于stack exchange，提问作者micex