How to programmatically organize button controls into a grid?

Question

I have a bunch of serialized object files that contain information related to a network of sensors we have.

I am trying to load each of those files and have a variable contained within the file (an abbreviation for the sensor name) load up and show on a button.

Then I need users to be able to click on that button and edit the properties of that object. I am pretty sure this latter part I can get easily done.

What I'm struggling to do is to figure out how build a grid of these buttons with proper spacing in between each button.

Here is what I have so far

private Dictionary<string, Point> buttonGrid = new Dictionary<string, Point>();

public void LoadNLDNSensors() 
{
    DirectoryInfo d = new DirectoryInfo(filepath);
    string[] files = Directory.GetFiles(filepath);
    if (files.Length == 0)
    {
        MessageBox.Show("Couldn't find sensor files!", "Failure", 
            MessageBoxButtons.OK, MessageBoxIcon.Error);
        return;
    }

    foreach (var file in d.GetFiles("*.sensor"))
    {
        IFormatter formatter = new BinaryFormatter();
        NLDNSensor newSensor = new NLDNSensor();
        newSensor = newSensor.LoadSensorFromFile(file);
        string _brief = newSensor.Brief;
        Button bu = new Button();
        this.Controls.Add(bu);
        bu.Size = new Size(30, 40);
        bu.Location = new Point(1,1);
        int x, y;
        x = 1;
        y = 1;
        // I think my logic needs to go here just not
        // sure how or what type of algorithm I need
        buttonGrid.Add(_brief, new Point(x,y));
        bu.Text = _brief;
        bu.BackColor = Color.Aqua;
        bu.Visible = true;
    }
    return;
}

This will show the WinForm I am trying to get the buttons to display on: https://i.sstatic.net/qNEpo.jpg

I want to separate each one by at least 2 pixels so I imagine that we are going to be incrementing the x, Point value by 2 for each next file in order. The problem is I'm not sure how to get it to start on the next line when we reach the width of the window.

Answer 1

So thank you for the suggestion of using FLP. It is doing what I need. My next task will be to add event triggers for these buttons but this got me over the hump. I ended up resorting to storing the buttons in a sorted dictionary and then just adding them from that dictionary to the FLP.

public void LoadNLDNSensors()
    {
        DirectoryInfo d = new DirectoryInfo(filepath);

        string[] files = Directory.GetFiles(filepath);

        if (files.Length == 0)
        {
            MessageBox.Show("Couldn't find sensor files!", "Failure",  MessageBoxButtons.OK, MessageBoxIcon.Error);
            return;
        }

        foreach(var file in d.GetFiles("*.sensor"))
        {
            IFormatter formatter = new BinaryFormatter();

            NLDNSensor __newSensor = new NLDNSensor();

            __newSensor = __newSensor.LoadSensorFromFile(file);

            buttons.Add(__newSensor.Brief, __newSensor);

            //flowLayoutPanelSensors.Controls.Add(bu);
        }

        foreach (string str in buttons.Keys)
        {
            Button b = new Button();

            b.BackColor = Color.Pink;

            switch (buttons[str].SensorState)
            {
                case -1:
                    b.BackColor = Color.Red;
                    break;
                case 0:
                    b.BackColor = Color.Aqua;
                    break;
                case 1:
                    b.BackColor = Color.Yellow;
                    break;

                default:
                    b.BackColor = Color.White;
                    break;
            }

            b.Height = 40;
            b.Width = 40;

            b.Text = buttons[str].Brief;
            b.Visible = true;

            flowLayoutPanelSensors.Controls.Add(b);
        }
        return;
    }

Here is an image of what the end result has become :)

Thank you so much for your help.

https://i.sstatic.net/ln1Vg.jpg