c# - 在复选框输入类型机器人框架c#中添加带有图像和文本块的列

Question

我正在使用 c# 在 bot 框架 v3 中开发自适应卡。我想要输入选择字段，每个选择选项都有一个图像和一个文本框。那么是否有可能实现它，如果可以，我们如何实现它，如下所示

试过的代码：

var choiceinput = new AdaptiveChoiceSetInput(); 
var Choices = new List<AdaptiveChoice>(); 
card.Body.Add(choiceinput); 
Choices.Add();

标签： c#botframeworkadaptive-cards

Answer 1

仅使用 ChoiceSets 无法实现您想要实现的目标。ChoiceSets 几乎是键值对。

但是，您可以使用 input.toggle 和 ColumnSets 的组合，如下所示：

{
"type": "AdaptiveCard",
"body": [
    {
        "type": "ColumnSet",
        "columns": [
            {
                "width": "10px",
                "type": "Column",
                "items": [
                    {
                        "type": "Input.Toggle"
                    }
                ],
                "verticalContentAlignment": "Center"
            },
            {
                "width": "45px",
                "type": "Column",
                "items": [
                    {
                        "type": "Image",
                        "style": "Person",
                        "url": "https://graph.facebook.com/1989019881113809/picture?type=large",
                        "width": "45px"
                    }
                ]
            },
            {
                "width": "stretch",
                "type": "Column",
                "items": [
                    {
                        "text": "Jack Maa",
                        "type": "TextBlock",
                        "weight": "Bolder"
                    },
                    {
                        "text": "Advisor - Scale Prediction & Control",
                        "type": "TextBlock"
                    }
                ]
            }
        ]
    },
    {
        "type": "ColumnSet",
        "columns": [
            {
                "width": "10px",
                "type": "Column",
                "items": [
                    {
                        "type": "Input.Toggle"
                    }
                ],
                "verticalContentAlignment": "Center"
            },
            {
                "width": "45px",
                "type": "Column",
                "items": [
                    {
                        "type": "Image",
                        "style": "Person",
                        "url": "https://graph.facebook.com/1989019881113809/picture?type=large",
                        "width": "45px"
                    }
                ]
            },
            {
                "width": "stretch",
                "type": "Column",
                "items": [
                    {
                        "text": "Mayuresh Jaiswal",
                        "type": "TextBlock",
                        "weight": "Bolder"
                    },
                    {
                        "text": "Water Treatment Advisor",
                        "type": "TextBlock"
                    }
                ]
            }
        ]
    }
],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1000.0"

}

最后一张卡片看起来像这样：

不过，我真的建议您看一下模板。直接在 C# 中构建复杂的卡片确实不是很好，而在这样的场景中，模板让你的事情变得更容易。

https://docs.microsoft.com/en-us/adaptive-cards/template/