如何在Bot Framework（C#）中添加消息扩展多标签（如微软文档示例）

要实现类似你提到的多标签效果，核心是通过**自适应卡片（Adaptive Cards）**构造带标签的布局，再将其作为消息扩展的返回内容。以下是具体实现步骤和代码示例：

1. 定义自适应卡片的标签布局 #

使用自适应卡片的ColumnSet组件横向排列多个标签，每个标签用TextBlock并设置样式（如圆角、背景色、内边距）来模拟标签效果。

示例卡片JSON结构（可直接在代码中构造）：

{
  "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
  "type": "AdaptiveCard",
  "version": "1.4",
  "body": [
    {
      "type": "TextBlock",
      "text": "搜索结果",
      "size": "Large",
      "weight": "Bolder"
    },
    {
      "type": "ColumnSet",
      "spacing": "Small",
      "columns": [
        {
          "type": "Column",
          "width": "auto",
          "items": [
            {
              "type": "TextBlock",
              "text": "标签1",
              "backgroundColor": "#E1F5FE",
              "color": "#01579B",
              "padding": "5px 10px",
              "borderRadius": "15px",
              "size": "Small"
            }
          ]
        },
        {
          "type": "Column",
          "width": "auto",
          "items": [
            {
              "type": "TextBlock",
              "text": "标签2",
              "backgroundColor": "#F3E5F5",
              "color": "#4A148C",
              "padding": "5px 10px",
              "borderRadius": "15px",
              "size": "Small"
            }
          ]
        },
        {
          "type": "Column",
          "width": "auto",
          "items": [
            {
              "type": "TextBlock",
              "text": "标签3",
              "backgroundColor": "#E8F5E9",
              "color": "#2E7D32",
              "padding": "5px 10px",
              "borderRadius": "15px",
              "size": "Small"
            }
          ]
        }
      ]
    }
  ]
}

2. 在C#消息扩展中构造并返回卡片 #

假设你使用的是搜索型消息扩展，在SearchAsync方法中构造自适应卡片，并将其包装为消息扩展结果返回：

using Microsoft.Bot.Builder;
using Microsoft.Bot.Builder.Teams;
using Microsoft.Bot.Schema;
using Microsoft.Bot.Schema.Teams;
using AdaptiveCards;

public async Task<MessagingExtensionResponse> SearchAsync(ITurnContext<IInvokeActivity> turnContext, MessagingExtensionQuery query, CancellationToken cancellationToken)
{
    // 1. 创建自适应卡片实例
    var adaptiveCard = new AdaptiveCard(new AdaptiveSchemaVersion(1, 4))
    {
        Body = new List<AdaptiveElement>
        {
            new AdaptiveTextBlock
            {
                Text = "搜索结果",
                Size = AdaptiveTextSize.Large,
                Weight = AdaptiveTextWeight.Bolder
            },
            new AdaptiveColumnSet
            {
                Spacing = AdaptiveSpacing.Small,
                Columns = new List<AdaptiveColumn>
                {
                    CreateTagColumn("标签1", "#E1F5FE", "#01579B"),
                    CreateTagColumn("标签2", "#F3E5F5", "#4A148C"),
                    CreateTagColumn("标签3", "#E8F5E9", "#2E7D32")
                }
            }
        }
    };

    // 2. 将卡片转换为附件
    var cardAttachment = new Attachment
    {
        ContentType = AdaptiveCard.ContentType,
        Content = adaptiveCard
    };

    // 3. 构造消息扩展结果
    var result = new MessagingExtensionResult
    {
        Type = "result",
        AttachmentLayout = "list",
        Attachments = new List<Attachment> { cardAttachment }
    };

    return new MessagingExtensionResponse { ComposeExtension = result };
}

// 辅助方法：创建带标签的列
private AdaptiveColumn CreateTagColumn(string tagText, string bgColor, string textColor)
{
    return new AdaptiveColumn
    {
        Width = "auto",
        Items = new List<AdaptiveElement>
        {
            new AdaptiveTextBlock
            {
                Text = tagText,
                BackgroundColor = bgColor,
                Color = AdaptiveTextColor.Default,
                Padding = new AdaptiveSpacing(5, 10, 5, 10),
                BorderRadius = new AdaptiveCornerRadius(15),
                Size = AdaptiveTextSize.Small
            }
        }
    };
}

3. 关键注意事项 #

• 自适应卡片版本：确保使用1.4及以上版本，因为backgroundColor、borderRadius等样式属性在高版本才支持。
• Teams兼容性：如果是在Teams中使用消息扩展，需确保卡片样式符合Teams的自适应卡片规范，避免样式不兼容。
• 动态生成标签：如果标签是动态数据（如从数据库获取），可通过循环遍历数据列表，调用CreateTagColumn方法动态生成标签列。

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