【问题标题】:C# bot framework Align checkboxes in adaptive card along a rowC# bot 框架在自适应卡片中沿行对齐复选框
【发布时间】:2019-07-23 04:09:51
【问题描述】:

我们有一张自适应卡片,在得到 QnA 的回答后显示。在卡片中,我们显示了选择集,让用户选择他感兴趣的类别。单击选择后,将给出第二级选项。但是,我们计划在第一级将子选项放在同一张卡片中。自适应卡片中是否可以并排放置复选框?

代码:

    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;

    }

【问题讨论】:

    标签: c# botframework adaptive-cards


    【解决方案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 来帮助格式化和创建您的卡片。

    希望这会有所帮助!

    【讨论】:

    • 1)我需要上面的C#代码,可以分享一下吗? 2)我想要4行这样的复选框,左侧有相应的标题名称。
    • 我已经用我能够实现的代码更新了我的问题,现在的问题是我以垂直方式而不是水平方式获得选项。
    猜你喜欢
    • 2020-05-30
    • 2020-03-21
    • 1970-01-01
    • 1970-01-01
    • 2019-03-31
    • 1970-01-01
    • 2019-06-29
    • 2018-10-31
    • 1970-01-01
    相关资源
    最近更新 更多