如何以编程方式使列和行填充整个 TableLayoutPanel

Question

您好！

我需要将按钮添加到 TableLayoutPanel，我希望这些按钮能够调整大小并彼此相邻对齐且没有填充。为了做到这一点，我正在考虑让 TableLayoutPanel 具有自动调整大小的列，并在运行时简单地设置大小和宽度。

但是，当我在运行时添加这些按钮时，我得到了奇怪的意外结果。我得到的结果如下：

但是我希望得到的结果是这样的：

可视化中的表单添加了一个简单的 TableLayoutPanel，其中列和行设置为自动大小。其余的通过此代码完成：

public partial class Editor : Form
{
    int gridWidth = 16;
    int gridHeight = 8;

    public Editor(int[] size)
    {
        gridWidth = size[0];
        gridHeight = size[1];
        InitializeComponent();
    }

    private void Editor_Load(object sender, EventArgs e)
    {
        CreateButtonArray();
        tableLayoutPanel1.ColumnCount = gridWidth;
        tableLayoutPanel1.RowCount = gridHeight;
    }

    private void CreateButtonArray()
    {
        for (int i = 0; i < gridHeight; i++)
        {
            for (int j = 0; j < gridWidth; j++)
            {
                Button b = new Button();
                //b.Size = new Size(50, 50);
                b.Text = $"{j},{i}";
                b.Click += b_Click;
                tableLayoutPanel1.Controls.Add(b, j, i);
                b.Anchor = (AnchorStyles.Left | AnchorStyles.Right | AnchorStyles.Top | AnchorStyles.Bottom);
                b.Dock = DockStyle.Fill;
            }
        }
    }
}

Answer 1

首先，您的面板必须填写父表单。为此，您应该将 Dock 属性设置为 fill.

tableLayoutPanel1.Dock = DockStyle.Fill;

那么你必须在列之间平均分配宽度。

var width = 100f / tableLayoutPanel1.ColumnCount;
foreach (ColumnStyle columnStyle in tableLayoutPanel1.ColumnStyles)
{
    columnStyle.SizeType = SizeType.Percent;
    columnStyle.Width = Width;
}

最后你必须在行之间平均分配高度

var height = 100f / tableLayoutPanel1.RowCount;
foreach (RowStyle rowStyle in tableLayoutPanel1.RowStyles)
{
    rowStyle.SizeType = SizeType.Percent;
    rowStyle.Height = height;
}

在这些之后创建您的按钮并将它们的 Dock 属性设置为 DockStyle.Fill。

为避免显示的图像失真，您必须清除面板并重新添加列和行。这是一个例子

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

tableLayoutPanel1.ColumnCount = gridWidth;
var width = 100f / gridWidth;
for (int j = 0; j < gridWidth; j++)
{
    tableLayoutPanel1.ColumnStyles.Add(new ColumnStyle(SizeType.Percent, width));
}

tableLayoutPanel1.RowCount = gridHeight;
var height = 100f / gridHeight;
for (int i = 0; i < gridHeight; i++)
{
    tableLayoutPanel1.RowStyles.Add(new RowStyle(SizeType.Percent, height));
}

for (int i = 0; i < gridHeight; i++)
{
    for (int j = 0; j < gridWidth; j++)
    {
        Button b = new Button()
        {
            Text = $"{j},{i}"
        };
        b.Click += b_Click;
        tableLayoutPanel1.Controls.Add(b, j, i);
        b.Dock = DockStyle.Fill;
    }
}

或者您的方法 Editor_Load 应该是

private void Editor_Load(object sender, EventArgs e)
{
    tableLayoutPanel1.Controls.Clear();
    tableLayoutPanel1.ColumnStyles.Clear();
    tableLayoutPanel1.RowStyles.Clear();

    tableLayoutPanel1.ColumnCount = gridWidth;
    var width = 100f / gridWidth;
    for (int j = 0; j < gridWidth; j++)
    {
        tableLayoutPanel1.ColumnStyles.Add(new ColumnStyle(SizeType.Percent, width));
    }

    tableLayoutPanel1.RowCount = gridHeight;
    var height = 100f / gridHeight;
    for (int i = 0; i < gridHeight; i++)
    {
        tableLayoutPanel1.RowStyles.Add(new RowStyle(SizeType.Percent, height));
    }

    CreateButtonArray();
}

如何以编程方式使列和行填充整个 TableLayoutPanel

How to programmatically make columns and rows fill an entire TableLayoutPanel

c#

datatable

controls

tablelayoutpanel

winforms