如何在特定宽度的任务模块中修复自适应卡的渲染?

时间:2019-04-04 05:54:42

标签: c# botframework microsoft-teams adaptive-cards

我要在带有任务模块的团队中渲染自适应卡。这里的问题是我将列宽度设置为可拉伸,但是当我看到JSON时,其宽度已更改为自动。

我也尝试以像素为单位给出宽度;那也不起作用。我将此附件返回到任务模块,该模块将以模式形式显示。在这里,我已将列的宽度指定为Stretch,但是宽度已设置为auto,这会导致对齐问题。有什么解决办法吗?

C#:

Attachment attachment;
AdaptiveCard card = new AdaptiveCard("1.0");
var body = new List<AdaptiveElement>();
var mainContainer = new AdaptiveContainer();
var container2 = new AdaptiveContainer();
for (int j = 0; j < details.SelectedProjects.Count; j++) {
    var columnSetWbse = new AdaptiveColumnSet();
    var columnWbse = new AdaptiveColumn();
    columnWbse.Width = AdaptiveColumnWidth.Stretch;
    columnWbse.Spacing = AdaptiveSpacing.Default;
    if (j == 0) {
        AdaptiveTextBlock txtBlkWbseHeader = new AdaptiveTextBlock {
            Weight = AdaptiveTextWeight.Default,
            Text = Helper.Constants.WBSE,
            HorizontalAlignment = AdaptiveHorizontalAlignment.Left,
            Wrap = true,
            Spacing = AdaptiveSpacing.Default,
        };
        columnWbse.Items.Add(txtBlkWbseHeader);
    }
    AdaptiveTextBlock txtBlkWbse = new AdaptiveTextBlock {
        Weight = AdaptiveTextWeight.Default,
        Text = details.SelectedProjects[j].Description,
        HorizontalAlignment = AdaptiveHorizontalAlignment.Left,
        Wrap = true,
        Spacing = AdaptiveSpacing.Default,
    };
    columnWbse.Items.Add(txtBlkWbse);
    columnSetWbse.Columns.Add(columnWbse);

    //Loop for no. of days
    for (int i = 0; i < loop; i++) {
        var columnWbseinput = new AdaptiveColumn();
        columnWbseinput.Spacing = AdaptiveSpacing.Default;
        columnWbseinput.Width = AdaptiveColumnWidth.Stretch;
        if (j == 0) {
            AdaptiveTextBlock txtBlkDte = new AdaptiveTextBlock {
                Weight = AdaptiveTextWeight.Default,
                Text = details.PeriodEnd.AddDays( - loop + i + 1).ToString("ddd") + " " + details.PeriodEnd.AddDays( - loop + i + 1).ToString("MM/dd", CultureInfo.GetCultureInfo("en-US")),
                HorizontalAlignment = AdaptiveHorizontalAlignment.Left,
                Wrap = true,
                Size = AdaptiveTextSize.Default,
                Spacing = AdaptiveSpacing.Default,
            };
            columnWbseinput.Items.Add(txtBlkDte);
        }
        AdaptiveNumberInput wbseInput = new AdaptiveNumberInput() {
            Id = "txtHrs" + "-" + details.PeriodEnd.AddDays( - loop + i + 1).ToString("MM/dd/yyyy", CultureInfo.GetCultureInfo("en-US")) + "-" + details.SelectedProjects[j].Code,
            Min = 0,
            Max = 2,
            Value = (details.PeriodEnd.AddDays( - loop + i + 1).ToString("ddd") == "Sat" || details.PeriodEnd.AddDays( - loop + i + 1).ToString("ddd") == "Sun") ? 0 : 8,
            Spacing = AdaptiveSpacing.Default,
        };
        columnWbseinput.Items.Add(wbseInput);
        columnSetWbse.Columns.Add(columnWbseinput);
    }
    container2.Items.Add(columnSetWbse);
}
mainContainer.Items.Add(container2);
body.Add(mainContainer);
card.Body = body;

card.Actions = new List<AdaptiveAction>() {
    new AdaptiveSubmitAction() {
        Data = details,
        Title = "Save and exit",
    }
};

attachment = new Attachment() {
    ContentType = AdaptiveCard.ContentType,
    Content = card
};
return attachment;

1 个答案:

答案 0 :(得分:0)

这是列集的问题,所以我只用了1个列集,而不是循环创建并定义宽度。