基于MS Bot Framework开发Telegram Bot：Attachments布局与迭代生成咨询

我正在使用MS Bot Framework开发Telegram机器人，希望通过Attachments收集用户选择的数据，现寻求以下技术帮助：

1. 如何实现Attachments的并排（行列）布局并支持调整大小？请提供代码示例；
2. 是否可编写迭代代码从列表/字典生成对应的行列布局？

我已尝试如下代码：

var _card = new HeroCard
{
    Text = "You can upload an image or select one of the following choices",
    Buttons = new List<CardAction>
    {       
        new CardAction(ActionTypes.ImBack, title: "Part1", value: "1"),
        new CardAction(ActionTypes.ImBack, title: "Part2", value: "2"),

        new CardAction(ActionTypes.ImBack, title: "Part3", value: "3"),
        new CardAction(ActionTypes.ImBack, title: "Part4", value: "4"),         
    },
};
var _reply = MessageFactory.Attachment(_card.ToAttachment());
await turnContext.SendActivityAsync(_reply, cancellationToken);

问题解答 #

1. 实现Attachments的并排行列布局与大小调整 #

HeroCard的按钮布局由Telegram平台默认渲染，无法直接控制行列结构和组件大小。要实现自定义布局，推荐使用Adaptive Card——它支持灵活的行列嵌套、组件宽度调整，且能在Telegram中正常渲染。

以下是C#代码示例，实现2列并排的按钮布局，并支持自定义按钮宽度：

using AdaptiveCards;

// 创建Adaptive Card实例
var adaptiveCard = new AdaptiveCard(new AdaptiveSchemaVersion(1, 3))
{
    Body = new List<AdaptiveElement>
    {
        new AdaptiveTextBlock
        {
            Text = "You can upload an image or select one of the following choices",
            Size = AdaptiveTextSize.Medium
        },
        // 第一行：2列布局
        new AdaptiveColumnSet
        {
            Columns = new List<AdaptiveColumn>
            {
                // 第一列：自动适应内容宽度
                new AdaptiveColumn
                {
                    Width = AdaptiveColumnWidth.Auto,
                    Items = new List<AdaptiveElement>
                    {
                        new AdaptiveActionSet
                        {
                            Actions = new List<AdaptiveAction>
                            {
                                new AdaptiveSubmitAction
                                {
                                    Title = "Part1",
                                    Data = "1",
                                    Style = AdaptiveActionStyle.Positive
                                }
                            }
                        }
                    }
                },
                // 第二列：自动适应内容宽度
                new AdaptiveColumn
                {
                    Width = AdaptiveColumnWidth.Auto,
                    Items = new List<AdaptiveElement>
                    {
                        new AdaptiveActionSet
                        {
                            Actions = new List<AdaptiveAction>
                            {
                                new AdaptiveSubmitAction
                                {
                                    Title = "Part2",
                                    Data = "2"
                                }
                            }
                        }
                    }
                }
            }
        },
        // 第二行：2列布局
        new AdaptiveColumnSet
        {
            Columns = new List<AdaptiveColumn>
            {
                new AdaptiveColumn
                {
                    Width = AdaptiveColumnWidth.Auto,
                    Items = new List<AdaptiveElement>
                    {
                        new AdaptiveActionSet
                        {
                            Actions = new List<AdaptiveAction>
                            {
                                new AdaptiveSubmitAction
                                {
                                    Title = "Part3",
                                    Data = "3"
                                }
                            }
                        }
                    }
                },
                new AdaptiveColumn
                {
                    Width = AdaptiveColumnWidth.Auto,
                    Items = new List<AdaptiveElement>
                    {
                        new AdaptiveActionSet
                        {
                            Actions = new List<AdaptiveAction>
                            {
                                new AdaptiveSubmitAction
                                {
                                    Title = "Part4",
                                    Data = "4"
                                }
                            }
                        }
                    }
                }
            }
        }
    }
};

// 将Adaptive Card转为Attachment并发送
var attachment = new Attachment
{
    ContentType = AdaptiveCard.ContentType,
    Content = adaptiveCard
};
var reply = MessageFactory.Attachment(attachment);
await turnContext.SendActivityAsync(reply, cancellationToken);

如果需要固定列宽，可将AdaptiveColumnWidth.Auto替换为具体数值（如"200px"）或比例（如"1/2"），实现更精准的大小控制。

2. 从列表/字典迭代生成行列布局 #

完全可以通过迭代逻辑，从列表或字典动态生成Adaptive Card的行列布局。以下是示例代码，将字典中的选项按每2个一组自动生成2列布局：

using AdaptiveCards;

// 模拟数据源：字典存储选项标题与对应值
var options = new Dictionary<string, string>
{
    {"Part1", "1"},
    {"Part2", "2"},
    {"Part3", "3"},
    {"Part4", "4"},
    {"Part5", "5"},
    {"Part6", "6"}
};

// 创建Adaptive Card实例
var adaptiveCard = new AdaptiveCard(new AdaptiveSchemaVersion(1, 3))
{
    Body = new List<AdaptiveElement>
    {
        new AdaptiveTextBlock
        {
            Text = "Select an option:",
            Size = AdaptiveTextSize.Medium
        }
    }
};

// 将选项按每2个一组拆分，生成行布局
var optionGroups = options.Select((kv, index) => new { kv, index })
                          .GroupBy(x => x.index / 2)
                          .Select(g => g.Select(x => x.kv).ToList());

foreach (var group in optionGroups)
{
    var columnSet = new AdaptiveColumnSet();
    foreach (var option in group)
    {
        var column = new AdaptiveColumn
        {
            Width = AdaptiveColumnWidth.Auto,
            Items = new List<AdaptiveElement>
            {
                new AdaptiveActionSet
                {
                    Actions = new List<AdaptiveAction>
                    {
                        new AdaptiveSubmitAction
                        {
                            Title = option.Key,
                            Data = option.Value
                        }
                    }
                }
            }
        };
        columnSet.Columns.Add(column);
    }
    adaptiveCard.Body.Add(columnSet);
}

// 发送生成的卡片
var attachment = new Attachment
{
    ContentType = AdaptiveCard.ContentType,
    Content = adaptiveCard
};
var reply = MessageFactory.Attachment(attachment);
await turnContext.SendActivityAsync(reply, cancellationToken);

这段代码会自动将字典中的选项分组，动态生成对应的行列和按钮，无需手动编写每一行的布局代码。

内容的提问来源于stack exchange，提问作者Asrade