首页 > 解决方案 > 自适应卡片列样式在 Adaptive Designer 中有效,但在 WebChat 中无效

问题描述

我正在使用 Adaptive Card 1.2 版,我正在尝试为 Adaptive Column 添加样式。这种风格在 Adaptive Designer(网络聊天)中得到体现。但是,如果我尝试签入托管的网络聊天样式也不会得到反映。另外我想提一下,我正在使用 C# 创建自适应卡。

要求的结果

但它看起来像这样
当前结果

我将其用于网络聊天(https://cdn.botframework.com/botframework-webchat/latest/webchat.js

这是我的 C# 代码

AdaptiveCard card = new AdaptiveCard(new AdaptiveSchemaVersion(1, 0));
card.Body.Add(new AdaptiveTextBlock()
{
    Text = $"Hello User",
    HorizontalAlignment = AdaptiveHorizontalAlignment.Center
});
card.Body.Add(new AdaptiveTextBlock()
{
    FontType = AdaptiveFontType.Monospace,
    Text = "Would you like to rate us",
    Color = AdaptiveTextColor.Good,
    Weight = AdaptiveTextWeight.Bolder,
    HorizontalAlignment = AdaptiveHorizontalAlignment.Center,
    Separator = true
}); 
card.Body.Add(new AdaptiveColumnSet()
{
    Separator = true,
    Columns = new List<AdaptiveColumn>()
        {
            new AdaptiveColumn()
            {
            Bleed = true,
            Width = AdaptiveColumnWidth.Stretch,
            Style = AdaptiveContainerStyle.Emphasis,
             SelectAction = new AdaptiveSubmitAction()
            {
                Title = "1",
                DataJson = "{ \"Type\": \"1\" }"
            },
            Items = new List<AdaptiveElement>()
            {
                new AdaptiveTextBlock()
                {
                    Text = "1",
                }
            }
        },
            new AdaptiveColumn()
        {
            Bleed = true,
            Width = AdaptiveColumnWidth.Stretch,
            Style = AdaptiveContainerStyle.Accent,
             SelectAction = new AdaptiveSubmitAction()
            {
                Title = "2",
                DataJson = "{ \"Type\": \"2\" }"
            },
            Items = new List<AdaptiveElement>()
            {
                new AdaptiveTextBlock()
                {
                    Text = $"2"
                }
            }
        },
            new AdaptiveColumn()
        {
            Bleed = true,
            Width = AdaptiveColumnWidth.Stretch,
            Style = AdaptiveContainerStyle.Good,
            SelectAction = new AdaptiveSubmitAction()
            {
                Title = "3",
                DataJson = "{ \"Type\": \"3\" }"
            },
            Items = new List<AdaptiveElement>()
            {
                new AdaptiveTextBlock()
                {
                    Text = $"3"
                }
            }
        },
            new AdaptiveColumn()
            {
            Bleed = true,
            Width = AdaptiveColumnWidth.Stretch,
            Style = AdaptiveContainerStyle.Attention,
            SelectAction = new AdaptiveSubmitAction()
            {
                Title = "4",
                DataJson = "{ \"Type\": \"4\" }"
            },
            Items = new List<AdaptiveElement>()
            {
                new AdaptiveTextBlock()
                {
                    Text = $"4"
                }
            }
        }
    }
});  

请帮助我

标签: botframeworkadaptive-cards

解决方案


推荐阅读