Как сделать все ячейки равных размеров в tableLayoutPanel WinForms?

Question

[LNK]

Как можно сделать все ячейки одного размера в tableLayoutPanel, чтобы даже при добавлении/удалении столбца или строки они все меняли размер и оставались одинаковыми? То есть они должны быть равными между собой по ширине и высоте. AutoSize=true пробовал, но при добавлении или удалении столбца всё становится не равным. Как это можно осуществить?

Answer 1

[Алексей Немиро]

Указать размер в процентах, если размер должен изменяться в зависимости от размера формы.
Либо указать точный размер в пикселях.

Если требуются разные размеры для разных колонок/строк, то этого можно достичь с использованием вложенных TableLayoutPanel.

Для выравнивания можно использовать колонки/строки с размером 100%. Примерно как в HTML.

Вот пример формы для программного генерирования TableLayoutPanel с добавлением колонок и строк одинакового размера (этот код можно просто вставить в 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);
  }


}

Comments

[LNK]

а как я могу кодом указать размер в процентах? Собственно цель: во время выполнения программы пользователь вводит количество строк и столбцов, у меня создается соответствующий tableLayout, с полностью одинаковыми по размеру ячейками.

[LNK]

если вы про выравнивание на форме, то с ним проблем нет, там я просто задаю параметр Dock. У меня проблема с тем, чтобы все ячейки одинаковые по размеру были.

[Алексей Немиро]

NikHaker: Программно создать TableLayoutPanel можно также, как это делается в конструктора форм (см. файлы *.Designer.cs):

var tableLayoutPanel = new TableLayoutPanel();
tableLayoutPanel.ColumnCount = 3;
tableLayoutPanel.ColumnStyles.Add(new System.Windows.Forms.ColumnStyle(System.Windows.Forms.SizeType.Percent, 20F));
tableLayoutPanel.ColumnStyles.Add(new System.Windows.Forms.ColumnStyle(System.Windows.Forms.SizeType.Percent, 70F));
tableLayoutPanel.ColumnStyles.Add(new System.Windows.Forms.ColumnStyle(System.Windows.Forms.SizeType.Percent, 10F));
tableLayoutPanel.Dock = System.Windows.Forms.DockStyle.Fill;
tableLayoutPanel.Location = new System.Drawing.Point(0, 0);
tableLayoutPanel.RowCount = 3;
tableLayoutPanel.RowStyles.Add(new System.Windows.Forms.RowStyle(System.Windows.Forms.SizeType.Percent, 50F));
tableLayoutPanel.RowStyles.Add(new System.Windows.Forms.RowStyle(System.Windows.Forms.SizeType.Percent, 50F));
tableLayoutPanel.RowStyles.Add(new System.Windows.Forms.RowStyle(System.Windows.Forms.SizeType.Percent, 50F));
tableLayoutPanel.Visible = true;

var rnd = new Random(DateTime.Now.Millisecond);

for (int col = 0; col < tableLayoutPanel.ColumnCount; col++)
{
  for (int row = 0; row < tableLayoutPanel.RowCount; row++)
  {
    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);
  }
}

this.Controls.Add(tableLayoutPanel);<ph index="1"></ph>

[LNK]

Алексей Немиро: то есть вы предлагаете задать им одинаковые проценты, чтобы они были одинаковые по размеру?

[Алексей Немиро]

NikHaker: если вам нужен одинаковый размер ячеек, в зависимости от размере контейнера, то да, только использование процентов решит данную проблему. Если вам нужен фиксированный размер, то просто укажите его, используйте SizeType.Absolute вместо SizeType.Percent.

[LNK]

Алексей Немиро: Благодарю, мне нужно как раз то, что вы показали в анимации.

[LNK]

Алексей Немиро: а еще маленький вопрос, как мы можем вручную задать какой-либо обьект в конкретную ячейку? т.е. обратиться как-то так: таблица[столбец][строка] = кнопка/панель?

[Алексей Немиро]

NikHaker: GetControlFromPosition:

// индексация с нуля
// 0 - первая колонка, 0 - первая строка
var control = tableLayoutPanel.GetControlFromPosition(0, 0);

[Алексей Немиро]

Дополню:

// получаем элемент из ячейки
var control = tableLayoutPanel.GetControlFromPosition(0, 0);
// удаляем, т.к. больше одного элемента нельзя размещать
tableLayoutPanel.Controls.Remove(control);
// добавляем новый элемент в ячейку
tableLayoutPanel.Controls.Add(new Label { Text = "это новый элемент" }, 0, 0);

[LNK]

Алексей Немиро: Спасибо огромное! Извините, последний момент, сейчас вспомнил. Буду реализовывать такой макет: Встал вопрос, как сделать квадрат? то есть чтобы всё растягивалось, но квадрат оставался квадратом. Не могли бы вы подать идею, как сделать ширину и длину определенной ячейки равными?

[Алексей Немиро]

NikHaker: можно сделать размер в пикселях, чтобы квадрат оставался квадратом. Либо рассчитать размер в процентах для каждой строки и колонки в зависимости размера элемента.

А если нужна просто сетка, то проще её нарисовать.

[LNK]

Алексей Немиро: в пикселях оно не адаптивно будет же.. Тут разве проценты подойдут? Допустим, мы растягиваем окно по горизонтали, тогда размеры квадрата неизменны, а пространство по бокам от него увеличивается. Аналогично если по вертикали. То есть тут процентные соотношения меняются. А вот если растягивать по диагонали, то квадрат изменяет свои размеры... Сложность в том, что проценты тут тоже меняются.

[Алексей Немиро]

NikHaker: проценты подойдут, но придется проводить расчеты. Есть размер в пикселях - 100%, а дальше дело математики, узнать сколько процентов будет занимать квадрат и полосы по бокам.

Примерно так (не проверял):

По малой стороне таблицы: Math.Min(tableLayoutPanel.Width, tableLayoutPanel.Height)
(если по большой, то на выходе может не получиться квадрат)

Размер таблицы: 500x300px
Малая сторона: 300px

Необходимый размер квадрата: 75%

Получаем размер квадрата в пикселях:
300px - 100%
x - 75%

x = (300px * 75%) / 100% = 225px размер квадрата

Расчет ширины:
500px - 100%
225px - x%

x = (225px * 100%) / 500px = 45% ширина квадрата
100% - 45% = 55% общая ширина колонок по бокам
55% / 2 колонки = 27.5% ширина одной колонки

Расчет высоты:
300px - 100%
225px - x%

x = (225px * 100%) / 300px = 75% высота квадрата
100% - 75% = 25% общая высота строк по бокам
25% / 2 строки = 12.5% высота одной строки

Поймать изменение размера можно в событии Resize, либо у формы, либо у самого TableLayoutPanel.