多行自动调整大小可滚动的流式布局面板

Question

我有50张图片。我需要将这些图片添加到FlowLayoutPanel中，第一行放30张图片，然后换行，第二行放20张图片。因此，我还需要在控件上显示滚动条。

我正在将视频分成帧（图像），并在FlowLayoutPanel中显示。当我上传第一个视频时，以下是设置图像的代码：

for (i = 1; i < len - 1; i++)
{
    ImagePanel mybt = new ImagePanel(storagePath + words[0] + "_" + 
                                     i + ".jpg", words[0] + "_" + i + ".jpg");
    flowLayoutPanel1.Controls.Add(mybt);
}

之后，当我上传第二张图片时，我想要像第一行一样显示图片，我们在第一行有第一段视频图像，在分割后，我需要展示第二段视频上传的图像。如果有人知道如何实现，请告诉我。

- Vishvadeep singh

---

@RezaAghaei，我有50张图片在ImagePanel中，我需要将这些图片添加到flowlayoutpanel中。前30张图片放在第一行，然后换行，再放20张图片在第二行。 - Vishvadeep singh

你可以使用SetFlowBreak： - Reza Aghaei

@RezaAghaei 我已经尝试过了，但没有成功。您能否提供演示链接，以便我可以查看演示呢？ - Vishvadeep singh

Answer 1

为了获得如屏幕截图所示的结果：

• 将您的 FlowLayoutPanel 放置在一个带有 AutoScroll 属性设置为 true 的 Panel 中
• 将您的 FlowLayoutPanel 的 AutoSize 属性设置为 true
• 将您的 FlowLayoutPanel 的 WrapContent 属性设置为 true（默认值）
• 将您的 FlowLayoutPanel 的 AutoScroll 属性设置为 false（默认值）
• 添加控件时，您可以使用 SetFlowBreak 来打破控件流，以便于您需要的控件。

屏幕截图

代码

private void button1_Click(object sender, EventArgs e)
{
    for (int i = 0; i < 20; i++)
    {
        var btn = new Button() { Text = i.ToString() };
        if (i == 5 || i==15 )
            this.flowLayoutPanel1.SetFlowBreak(btn, true);
        this.flowLayoutPanel1.Controls.Add(btn);
    }
}

在这里我打断了流程，在5和15。

- Reza Aghaei

---

它没有打破流程，我忘了告诉你我的 FlowLayoutPanel 具有自动滚动属性为 false 和包装内容为 false。 - Vishvadeep singh

@vishuminhas 没问题，请检查更新；使用一个其autoscroll属性设置为true的面板，以及您的flowlayoutpanel自动调整大小（wrapcoontent = true和autoscroll = false默认值）。 - Reza Aghaei

谢谢，你知道我们现在怎么为这个添加水平滚动条和垂直滚动条吗？ - Vishvadeep singh

@vishuminhas 不客气 :) 由于承载您的FlowLayoutPanel的Panel是自动调整大小的，因此滚动条将在需要时自动显示。 - Reza Aghaei