Dynamic button creation & placing them in a predefined order using c#

Question

NET 4.5 C# to create a windows form. I want to dynamically create & add buttons & also assign them click events but want them to be dynamically placed in a particular fashion just like the image.

My question is how do I place the buttons dynamically in the above fashion i.e. 4x4 format (4 buttons in a row, 4 columns but unlimited rows). Is it possible to do so in win forms?

Presently I'm trying the below mentioned code but have no clear idea as to how I can place the buttons as shown above.

        public Form1()
    {
        InitializeComponent();

        for (int i = 0; i < 5; i++)
        {
            Button button = new Button();
            button.Location = new Point(160, 30 * i + 10);
            button.Click += new EventHandler(ButtonClickCommonEvent);
            button.Tag = i;
            this.Controls.Add(button);
        }
    }

void ButtonClickCommonEvent(object sender, EventArgs e)
  {
     Button button = sender as Button;
     if (button != null)
     {       
        switch ((int)button.Tag)
        {
           case 0:
              // First Button Clicked
              break;
           case 1:
              // Second Button Clicked
              break;
           // ...
        }
     }
  }

Please advise solution with codes.

Answer 1

You can use a TableLayoutPanel and create your buttons dynamically and add them to the panel.

For example:

private void Form1_Load(object sender, EventArgs e)
{
    var rowCount = 3;
    var columnCount = 4;

    this.tableLayoutPanel1.ColumnCount = columnCount;
    this.tableLayoutPanel1.RowCount = rowCount;

    this.tableLayoutPanel1.ColumnStyles.Clear();
    this.tableLayoutPanel1.RowStyles.Clear();

    for (int i = 0; i < columnCount; i++)
    {
        this.tableLayoutPanel1.ColumnStyles.Add(new System.Windows.Forms.ColumnStyle(System.Windows.Forms.SizeType.Percent, 100 / columnCount));
    }
    for (int i = 0; i < rowCount; i++)
    {
        this.tableLayoutPanel1.RowStyles.Add(new System.Windows.Forms.RowStyle(System.Windows.Forms.SizeType.Percent, 100 / rowCount));
    }

    for (int i = 0; i < rowCount* columnCount; i++)
    {
        var b = new Button();
        b.Text = (i+1).ToString();
        b.Name = string.Format("b_{0}", i + 1);
        b.Click += b_Click;
        b.Dock = DockStyle.Fill;
        this.tableLayoutPanel1.Controls.Add(b);
    }
}

void b_Click(object sender, EventArgs e)
{
    var b = sender as Button;
    if (b != null)
        MessageBox.Show(string.Format("{0} Clicked", b.Text));
}

Note:

• Using TableLayoutPanel.Controls.Add(control) we can add controls sequentially to the panel.
• Using TableLayoutPanel.Controls.Add(control, columnIndex, rowIndex) we can add controls at specific cells.