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.

@RezaAghaei like I have 50 images in ImagePanel I need to add these images in flowlayooutpanel 30 images for 1st row after that wrap row and 20 images in second row. — vishu minhas
@RezaAghaei I have used this but no success could you please refer me demo link so I can review the demo. — vishu minhas

Reza Aghaei Reza Aghaei · Accepted Answer · 2015-09-14T12:22:45

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.

Multi-Row Autosize Scrollable FlowLayoutPanel

1 Answers