Controls comes outside the flowLayoutPanel1 when adding controls dynamically in C#

Question

I am adding 8 panels to a "flowLayoutPanel1". It works fine.

The problem is that it comes 4 panels on the first"row" and then 4 panels on next "row". The thing is that I have made the size of the "flowLayoutPanel1" to visually show 3 panels on each "row", - so in this case, half of the 4th panel on each row are not seen.

But if I add them in the designer manually, it do come 3 panels on each "row" which I want.

I wonder why this is happening when I add them dynamically with this code?

            flowLayoutPanel1.Controls.Clear(); int count = 0;
                        for (int n = 0; n < 4; n++)
                        {
                            for (int i = 0; i < latestImageLIST.Count; i++)
                            {
                                //Now add all images as panels
                                String imagefile = latestImageLIST[i];
                                if (File.Exists(imagefile))
                                {
                                    Panel panel = new Panel(); count++;
                                    panel.Name = "thepanel" + count;
                                    panel.Size = new Size(284, 160);
                                    panel.Margin = new Padding(3);
                                    Image image = Image.FromFile(imagefile);
                                    panel.BackgroundImage = image;
                                    panel.BackgroundImageLayout = ImageLayout.Stretch;
                                    panel.Tag = "thepanel" + count;
                                    panel.Click += new System.EventHandler(this.panel216_Click);
                                    flowLayoutPanel1.Controls.Add(panel);
                                }
                            }
                        }

Answer 1

I recommend using TableLayoutPanel, which is an alternative to FlowLayoutPanel. You can first determine the row and column based on the number of images you need to load, then dynamically create a Panel through a loop and add it to the specified row and column.

        public void AddImages(int row, int col)
        {
            TableLayoutPanel tlp = new TableLayoutPanel();
            int prow = 100 / row, pcol = 100 / col;
            for(var i=0;i<row;i++)
            {
                tlp.RowStyles.Add(new RowStyle(SizeType.Percent, prow));
            }
            for(var i=0;i<col;i++)
            {
                tlp.ColumnStyles.Add(new ColumnStyle(SizeType.Percent, pcol));
            }
            //modify the add logic according to your requirement.
            tlp.Controls.Add(new Panel() { Dock = DockStyle.Fill }, 1, 1);  
            //todo...
            this.Controls.Add(tlp);         
        }