How to make all cells equal sizes in WinForms tableLayoutPanel?

Question

C++ / C#

How can I make all cells of the same size in the tableLayoutPanel, so that even when adding / deleting a column or row, they all change size and remain the same? That is, they must be equal in width and height. I tried AutoSize=true, but when adding or removing a column, everything becomes unequal. How can this be done?

Answer 1

Specify the size as a percentage if the size should change depending on the size of the form.
Or specify the exact size in pixels.
If different sizes are required for different columns/rows, then this can be achieved using nested TableLayoutPanel s .
For alignment, you can use columns / rows with a size of 100%. Much like in HTML .
Here is an example of a form to programmatically generate a TableLayoutPanel with columns and rows of the same size added (this code can simply be pasted into Form1 ):

public partial class Form1 : Form
{

  private Panel TableContainer = new Panel();
  private NumericUpDown Columns = new NumericUpDown();
  private NumericUpDown Rows = new NumericUpDown();

  public Form1()
  {
    InitializeComponent();

    this.Width = 420;
      
    var flowLayoutPanel = new FlowLayoutPanel();
    var LabelColumns = new Label();
    var LabelRows = new Label();
    var Create = new Button();

    // панель для редактора таблицы
    flowLayoutPanel.SuspendLayout();
    flowLayoutPanel.AutoSize = true;
    flowLayoutPanel.Controls.Add(LabelColumns);
    flowLayoutPanel.Controls.Add(Columns);
    flowLayoutPanel.Controls.Add(LabelRows);
    flowLayoutPanel.Controls.Add(Rows);
    flowLayoutPanel.Controls.Add(Create);
    flowLayoutPanel.Dock = DockStyle.Top;
    flowLayoutPanel.Location = new Point(0, 0);

    LabelColumns.AutoSize = true;
    LabelColumns.Dock = DockStyle.Fill;
    LabelColumns.ImageAlign = ContentAlignment.MiddleLeft;
    LabelColumns.Location = new Point(3, 0);
    LabelColumns.Size = new System.Drawing.Size(53, 29);
    LabelColumns.Text = "Колонок:";
    LabelColumns.TextAlign = ContentAlignment.MiddleLeft;

    LabelRows.AutoSize = true;
    LabelRows.Dock = DockStyle.Fill;
    LabelRows.Location = new Point(117, 0);
    LabelRows.Size = new Size(40, 29);
    LabelRows.Text = "Строк:";
    LabelRows.TextAlign = ContentAlignment.MiddleLeft;

    Columns.Dock = DockStyle.Fill;
    Columns.Location = new Point(62, 3);
    Columns.Minimum = 1;
    Columns.Size = new System.Drawing.Size(49, 20);
    Columns.Value = 3;

    Rows.Dock = DockStyle.Fill;
    Rows.Location = new Point(163, 3);
    Rows.Minimum = 1;
    Rows.Size = new Size(49, 20);
    Rows.Value = 2;

    Create.AutoSize = true;
    Create.Dock = DockStyle.Left;
    Create.Location = new Point(218, 3);
    Create.Size = new Size(75, 23);
    Create.Text = "Создать";
    Create.UseVisualStyleBackColor = true;
    Create.Click += new System.EventHandler(CreateTable);

    // контейнер для вывода готовой таблицы
    TableContainer.Dock = DockStyle.Fill;
      
    // добавляем необходимые элементы на форму
    this.Controls.Add(flowLayoutPanel);
    this.Controls.Add(TableContainer);

    this.Controls.SetChildIndex(flowLayoutPanel, 1);
    this.Controls.SetChildIndex(TableContainer, 0);
  }

  private void CreateTable(object sender, EventArgs e)
  {
    // удаляем предыдущую таблицу
    TableContainer.Controls.Clear();

    // создаем новую
    var tableLayoutPanel = new TableLayoutPanel();
    tableLayoutPanel.Dock = System.Windows.Forms.DockStyle.Fill;
    tableLayoutPanel.Location = new System.Drawing.Point(0, 0);
    tableLayoutPanel.Visible = true;

    tableLayoutPanel.ColumnCount = Convert.ToInt32(Columns.Value);
    tableLayoutPanel.RowCount = Convert.ToInt32(Rows.Value);

    // генератор случайных чисел для раскраски панелей (чтобы было видно)
    var rnd = new Random(DateTime.Now.Millisecond);

    // определяем размер одной колонки и строки, в процентах
    int width = 100 / tableLayoutPanel.ColumnCount;
    int height = 100 / tableLayoutPanel.RowCount;

    this.Text = String.Format("{0}x{1}", width, height);

    // добавляем колонки и строки
    for (int col = 0; col < tableLayoutPanel.ColumnCount; col++)
    {
      // добавляем колонку
      tableLayoutPanel.ColumnStyles.Add(new ColumnStyle(SizeType.Percent, width));

      for (int row = 0; row < tableLayoutPanel.RowCount; row++)
      {
        // добавляем строку
        if (col == 0) 
        {
          tableLayoutPanel.RowStyles.Add(new RowStyle(SizeType.Percent, height));
        }

        // добавляем цветную панель, чтобы было видно ячейку в таблице
        var panel = new Panel();
        panel.BackColor = Color.FromArgb(rnd.Next(0, 255), rnd.Next(0, 255), rnd.Next(0, 255));
        panel.Dock = DockStyle.Fill;
        tableLayoutPanel.Controls.Add(panel, col, row);
      }
    }

    // добавляем таблицу в контейнер
    TableContainer.Controls.Add(tableLayoutPanel);
  }


}