C＃Bot Framework沿一行对齐自适应卡中的复选框

Question

我们有一个自适应卡，该卡在获得QnA答复后会显示出来。在卡片中，我们显示了choiceset，以便用户选择感兴趣的类别。单击select时，将显示第二级选项。但是，我们计划在第一级将子选项放在同一张卡中。自适应卡中是否可以并排放置复选框？

代码：

    public List<Attachment> EmbedAdaptiveCategoryOptions()
    {
        #region populate choiceLists

        List<AdaptiveChoice> OGChoice = new List<AdaptiveChoice>();
        List<AdaptiveChoice> GeoChoice = new List<AdaptiveChoice>();
        List<AdaptiveChoice> TechChoice = new List<AdaptiveChoice>();
        List<AdaptiveChoice> ThemeChoice = new List<AdaptiveChoice>();
        List<AdaptiveChoice> OKChoice = new List<AdaptiveChoice>();

        List<string> OGids = new List<string>();
        List<string> Geoids = new List<string>();
        List<string> Techids = new List<string>();
        List<string> themeids = new List<string>();
        List<string> feedbackids = new List<string> { "I am good with the link already shared with me above!" };

        List<CardAction> OGButtons = CreateOGButtons(out OGids);

        foreach (var item in OGButtons)
        {
            OGChoice.Add(new AdaptiveChoice() { Title = item.Title, Value = item.Value.ToString() });
        }
        List<CardAction> GeoButtons = CreateGeoButtons(out Geoids);

        foreach (var item in GeoButtons)
        {
            GeoChoice.Add(new AdaptiveChoice() { Title = item.Title, Value = item.Value.ToString() });
        }
        List<CardAction> techcardButtons = CreateTechButtons(out Techids);

        foreach (var item in techcardButtons)
        {
            TechChoice.Add(new AdaptiveChoice() { Title = item.Title, Value = item.Value.ToString() });
        }
        List<CardAction> themecardButtons = CreateThemeButtons(out themeids);

        foreach (var item in themecardButtons)
        {
            ThemeChoice.Add(new AdaptiveChoice() { Title = item.Title, Value = item.Value.ToString() });
        }            

        List<CardAction> feedbackcardButtons = new List<CardAction>();

        CardAction feedbackButton = new CardAction()
        {
            Value = "feedback",
            Type = "imBack",
            Title = "I am good with the link already shared with me above!"
        };

        feedbackcardButtons.Add(feedbackButton);

        foreach (var item in feedbackcardButtons)
        {
            OKChoice.Add(new AdaptiveChoice() { Title = item.Title, Value = item.Value.ToString() });
        }

        #endregion

        AdaptiveCard card = new AdaptiveCard();
        List<Attachment> attachments = new List<Attachment>();


            AdaptiveColumnSet Title = new AdaptiveColumnSet();
            AdaptiveColumn titletext = new AdaptiveColumn();
            titletext.Width = AdaptiveColumnWidth.Auto;

            titletext.Items.Add(new AdaptiveTextBlock()
            {
                Weight = AdaptiveTextWeight.Bolder,
                Wrap = true,
                Text = "Are you interested in searching through the file? Please select the Category you would like to refine Credentials for:",
                Size = AdaptiveTextSize.Medium
            });
            Title.Columns.Add(titletext);
            card.Body.Add(Title);

                    AdaptiveColumnSet abc = new AdaptiveColumnSet();
                    AdaptiveColumn col1 = new AdaptiveColumn();
                    col1.Width = AdaptiveColumnWidth.Auto;
                    col1.Type = "TextBlock";
                    col1.Items.Add(new AdaptiveChoiceSetInput()
                    {
                        Choices = OGChoice,
                        Separator = true,
                        IsMultiSelect = true,
                        Type = "Input.ChoiceSet"                           
                    });
                    AdaptiveColumn col2 = new AdaptiveColumn();
                    col2.Width = AdaptiveColumnWidth.Auto;
                    col2.Type = "TextBlock";
                    //col2.Type = AdaptiveTextBlock.TYPE;
                    col2.Items.Add(new AdaptiveChoiceSetInput()
                    {
                        Choices = GeoChoice,
                        Separator = true,
                        IsMultiSelect = true,
                        Type = "Input.ChoiceSet"
                    });
                    AdaptiveColumn col3 = new AdaptiveColumn();
                    col3.Width = AdaptiveColumnWidth.Auto;
                    col3.Type = "TextBlock";
                    //col2.Type = AdaptiveTextBlock.TYPE;
                    col3.Items.Add(new AdaptiveChoiceSetInput()
                    {
                        Choices = TechChoice,
                        Separator = true,
                        IsMultiSelect = true,
                        Type = "Input.ChoiceSet"
                    });
                    AdaptiveColumn col4 = new AdaptiveColumn();
                    col4.Width = AdaptiveColumnWidth.Auto;
                    col4.Type = "TextBlock";
                    //col2.Type = AdaptiveTextBlock.TYPE;
                    col4.Items.Add(new AdaptiveChoiceSetInput()
                    {
                        Choices = ThemeChoice,
                        Separator = true,
                        IsMultiSelect = true,
                        Type = "Input.ChoiceSet"
                    });
                    AdaptiveColumn col5 = new AdaptiveColumn();
                    col5.Width = AdaptiveColumnWidth.Auto;
                    col5.Type = "TextBlock";
                    //col2.Type = AdaptiveTextBlock.TYPE;
                    col5.Items.Add(new AdaptiveChoiceSetInput()
                    {
                        Choices = OKChoice,
                        Separator = true,
                        IsMultiSelect = true,
                        Type = "Input.ChoiceSet"
                    });
                    abc.Columns.Add(col1);
                    abc.Columns.Add(col2);
                    abc.Columns.Add(col3);
                    abc.Columns.Add(col4);
                    abc.Columns.Add(col5);
                    card.Body.Add(abc);

            List<AdaptiveAction> Actions = new List<AdaptiveAction>()
            {
                new AdaptiveSubmitAction()
                {
                    Id = "selectBtn",
                    Title = "Select",
                    Speak = "<s>Search</s>",
                    DataJson = "{ \"Type\": \"SubmitQuestion\" }"
                }
            };
        card.Actions.Add(Actions[0]);
                    Attachment attachment = new Attachment()
                    {
                        ContentType = AdaptiveCard.ContentType,
                        Content = card
                    };
                    attachments.Add(attachment);

        return attachments;

    }

Answer 1

可以将AdaptiveCard中的复选框并排放置在列中。看看columns 上的AdaptiveCards文档，并查看下面的示例。

屏幕截图

AdaptiveCard JSON

{
    "type": "AdaptiveCard",
    "body": [
        {
            "type": "TextBlock",
            "horizontalAlignment": "Center",
            "size": "Medium",
            "text": "Horizontal Checkboxes",
            "maxLines": 3
        },
        {
            "type": "ColumnSet",
            "separator": true,
            "columns": [
                {
                    "type": "Column",
                    "items": [
                        {
                            "type": "Input.Toggle",
                            "id": "option1",
                            "title": "Option 1",
                            "value": "true"
                        }
                    ],
                    "width": "auto"
                },
                {
                    "type": "Column",
                    "items": [
                        {
                            "type": "Input.Toggle",
                            "id": "option2",
                            "title": "Option 2",
                            "value": "false"
                        }
                    ],
                    "width": "auto"
                },
                {
                    "type": "Column",
                    "items": [
                        {
                            "type": "Input.Toggle",
                            "id": "option3",
                            "title": "Option 3",
                            "value": "true"
                        }
                    ],
                    "width": "auto"
                },
                {
                    "type": "Column",
                    "items": [
                        {
                            "type": "Input.Toggle",
                            "id": "option4",
                            "title": "Option 4",
                            "value": "false"
                        }
                    ],
                    "width": "auto"
                }
            ]
        }
    ],
    "actions": [
        {
            "type": "Action.Submit",
            "title": "Submit"
        }
    ],
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "version": "1.0"
}

此外，我建议您使用AdaptiveCard Designer来帮助格式化和创建卡。

希望这会有所帮助！