Multi-Row Autosize Scrollable FlowLayoutPanel

Question

I have 50 images. I need to add these images in FlowLayoutPanel, 30 images for 1st row after that wrap row and 20 images in second row. So I also need to show scrollbars on control.

I am dividing video into frames(images) and shown in FlowLayoutPanel. When I upload first video below are the code to set image :

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

After that when I upload second image I want to show images like in first row we have first video images after break I need to show second video upload images. If anybody knows how it can possible.

Answer 1

To get the result like you see in screenshot:

• Put your FlowLayoutPanel in a Panel with AutoScroll property set to true
• Set AutoSize property of your FlowLayoutPanel to true
• Set WrapContent property of your FlowLayoutPanel to true (Default)
• Set AutoScroll property of your FlowLayoutPanel to false (Default)
• When adding controls you can use SetFlowBreak to break the flow of controls for those one you need.

Screenshot

Code

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);
    }
}

Here I am breaking the flow, at 5 and 15.