Microsoft BOT 框架是否允许开发交互式 UI？答案

【问题标题】：Does Microsoft BOT Framework allows to develop interactive UIs?Microsoft BOT 框架是否允许开发交互式 UI？
【发布时间】：2026-02-13 16:30:01
【问题描述】：

我需要使用 Microsoft Bot Framework for Cortana Channel 实现一些交互式 UI，但我还没有找到任何方法来实现它。我想在按钮上应用样式，重要的是在 Cortana 上使用图形和图表（如 Web 仪表板）。

【问题讨论】：

How to create Charts using c# Bot Framework?的可能重复

标签： c# botframework cortana

【解决方案1】：

我想在按钮上应用样式，重要的是在 Cortana 上使用图形和图表（如 Web 仪表板）。

bot 是一种在服务器端工作的 Web 应用程序服务，BotFramework 提供了连接 bot 和本地应用程序（例如 Skype 和 Cortana）之间的通道。 UI 部分在每个本机应用程序中呈现，我找不到自定义 Cortana 应用程序样式的方法。不过AdaptiveCards提供了几个简单的样式属性，更多信息可以参考官方示例：cards-AdaptiveCards。

对于交互式图形和图表的问题，AFAIK 目前不支持。我们现在可以做的，是将图表渲染成图像，并在HeroCard 或AdaptiveCard 中显示此图像，但是这种解决方法会使图表失去交互性。大家可以参考我在线程How to create Charts using c# Bot Framework?的最后一个回答

【讨论】：

感谢@Grace Feng，我们可能会使用 HeroCard 在 Cortana 上显示图像，因为 Cortana 不支持 AdaptiveCards。从以下链接检查：docs.botframework.com/en-us/channel-inspector/channels/…

【解决方案2】：

确实，你可以使用Hero card, adaptive cards, thumbnail cards, receipt cards etc。

以下是供您参考的示例。

公共任务 StartAsync(IDialogContext 上下文) { context.Wait(MessageReceivedAsync);

        return Task.CompletedTask;
    }
    public virtual async Task MessageReceivedAsync(IDialogContext context, IAwaitable<IMessageActivity> result)
    {
        var reply = context.MakeMessage();

        reply.AttachmentLayout = AttachmentLayoutTypes.Carousel;
        reply.Attachments = GetCardsAttachments();

        await context.PostAsync(reply);

        context.Wait(this.MessageReceivedAsync);
    }

    private static IList<Attachment> GetCardsAttachments()
    {
        return new List<Attachment>()
        {
            GetHeroCard(
                "Add a webpage",
                "",
                "",
                new CardImage(url: "https://cdn.dribbble.com/users/22691/screenshots/1958250/attachments/340010/Button_800x600.gif?sz=328"),
                new CardAction(ActionTypes.ImBack, "Add a webpage", value: "Add a webpage")),
            GetHeroCard(
                "delete a webpage",
                "",
                "",
                new CardImage(url: "https://cdn.dribbble.com/users/22691/screenshots/1958250/attachments/340010/Button_800x600.gif?sz=328"),
                new CardAction(ActionTypes.ImBack, "delete a webpage", value: "delete a webpage")),
            GetHeroCard(
                "Display help",
                "",
                "",
                new CardImage(url: "https://cdn.dribbble.com/users/22691/screenshots/1958250/attachments/340010/Button_800x600.gif?sz=328"),
                new CardAction(ActionTypes.ImBack, "Display help", value: "Display help")),
            GetHeroCard(
                "etc",
                "",
                "",
                new CardImage(url: "https://cdn.dribbble.com/users/22691/screenshots/1958250/attachments/340010/Button_800x600.gif?sz=328"),
                new CardAction(ActionTypes.ImBack, "etc", value: "etc")),

        };
    }

    private static Attachment GetHeroCard(string title, string subtitle, string text, CardImage cardImage, CardAction cardAction)
    {
        var heroCard = new HeroCard
        {
            Title = title,
            Subtitle = subtitle,
            Text = text,
            Images = new List<CardImage>() { cardImage },
            Buttons = new List<CardAction>() { cardAction },
        };

        return heroCard.ToAttachment();
    }

截图供参考

【讨论】：

感谢@Manoj，目前 Cortana 频道不允许使用自适应卡。是的，我可以使用不足以满足我的要求的英雄卡，因为我想展示交互式图表和 UI。

【解决方案3】：

您可以按照this guideline 自定义网络聊天本身。就图表而言，自适应卡片将是您的最佳选择，但如上所述，它目前不受支持。

【讨论】：