使用 TableLayoutPanel 的复杂 table 设计

Question

我想知道我可以在 TableLayoutPanel 中进行如下 table 设计吗？

Answer 1

显然 2 并不像我想的那么容易。使用 3 会更容易。

设计师代码（我添加了所有这些面板以显示每个单元格的不同颜色）：

    private void InitializeComponent()
    {
        this.tableLayoutPanel1 = new System.Windows.Forms.TableLayoutPanel();
        this.tableLayoutPanel2 = new System.Windows.Forms.TableLayoutPanel();
        this.panel1 = new System.Windows.Forms.Panel();
        this.panel2 = new System.Windows.Forms.Panel();
        this.panel3 = new System.Windows.Forms.Panel();
        this.panel4 = new System.Windows.Forms.Panel();
        this.panel5 = new System.Windows.Forms.Panel();
        this.panel6 = new System.Windows.Forms.Panel();
        this.panel7 = new System.Windows.Forms.Panel();
        this.panel8 = new System.Windows.Forms.Panel();
        this.tableLayoutPanel3 = new System.Windows.Forms.TableLayoutPanel();
        this.tableLayoutPanel1.SuspendLayout();
        this.tableLayoutPanel2.SuspendLayout();
        this.panel8.SuspendLayout();
        this.tableLayoutPanel3.SuspendLayout();
        this.SuspendLayout();
        // 
        // tableLayoutPanel1
        // 
        this.tableLayoutPanel1.ColumnCount = 3;
        this.tableLayoutPanel1.ColumnStyles.Add(new System.Windows.Forms.ColumnStyle(System.Windows.Forms.SizeType.Percent, 33.34334F));
        this.tableLayoutPanel1.ColumnStyles.Add(new System.Windows.Forms.ColumnStyle(System.Windows.Forms.SizeType.Percent, 33.34334F));
        this.tableLayoutPanel1.ColumnStyles.Add(new System.Windows.Forms.ColumnStyle(System.Windows.Forms.SizeType.Percent, 33.31332F));
        this.tableLayoutPanel1.Controls.Add(this.panel2, 2, 0);
        this.tableLayoutPanel1.Controls.Add(this.panel8, 0, 0);
        this.tableLayoutPanel1.Controls.Add(this.tableLayoutPanel3, 1, 0);
        this.tableLayoutPanel1.Location = new System.Drawing.Point(83, 112);
        this.tableLayoutPanel1.Name = "tableLayoutPanel1";
        this.tableLayoutPanel1.RowCount = 1;
        this.tableLayoutPanel1.RowStyles.Add(new System.Windows.Forms.RowStyle(System.Windows.Forms.SizeType.Percent, 33.33333F));
        this.tableLayoutPanel1.Size = new System.Drawing.Size(487, 238);
        this.tableLayoutPanel1.TabIndex = 0;
        // 
        // tableLayoutPanel2
        // 
        this.tableLayoutPanel2.BackColor = System.Drawing.SystemColors.Control;
        this.tableLayoutPanel2.ColumnCount = 2;
        this.tableLayoutPanel2.ColumnStyles.Add(new System.Windows.Forms.ColumnStyle(System.Windows.Forms.SizeType.Percent, 50F));
        this.tableLayoutPanel2.ColumnStyles.Add(new System.Windows.Forms.ColumnStyle(System.Windows.Forms.SizeType.Percent, 50F));
        this.tableLayoutPanel2.Controls.Add(this.panel1, 0, 0);
        this.tableLayoutPanel2.Controls.Add(this.panel3, 0, 1);
        this.tableLayoutPanel2.Controls.Add(this.panel4, 1, 1);
        this.tableLayoutPanel2.Dock = System.Windows.Forms.DockStyle.Fill;
        this.tableLayoutPanel2.Location = new System.Drawing.Point(0, 0);
        this.tableLayoutPanel2.Name = "tableLayoutPanel2";
        this.tableLayoutPanel2.RowCount = 2;
        this.tableLayoutPanel2.RowStyles.Add(new System.Windows.Forms.RowStyle(System.Windows.Forms.SizeType.Percent, 50F));
        this.tableLayoutPanel2.RowStyles.Add(new System.Windows.Forms.RowStyle(System.Windows.Forms.SizeType.Percent, 50F));
        this.tableLayoutPanel2.Size = new System.Drawing.Size(156, 232);
        this.tableLayoutPanel2.TabIndex = 0;
        // 
        // panel1
        // 
        this.panel1.BackColor = System.Drawing.Color.LawnGreen;
        this.panel1.Dock = System.Windows.Forms.DockStyle.Fill;
        this.panel1.Location = new System.Drawing.Point(3, 3);
        this.panel1.Name = "panel1";
        this.panel1.Size = new System.Drawing.Size(72, 110);
        this.panel1.TabIndex = 0;
        // 
        // panel2
        // 
        this.panel2.BackColor = System.Drawing.Color.LimeGreen;
        this.panel2.Dock = System.Windows.Forms.DockStyle.Fill;
        this.panel2.Location = new System.Drawing.Point(327, 3);
        this.panel2.Name = "panel2";
        this.panel2.Size = new System.Drawing.Size(157, 232);
        this.panel2.TabIndex = 1;
        // 
        // panel3
        // 
        this.panel3.BackColor = System.Drawing.Color.Tomato;
        this.panel3.Dock = System.Windows.Forms.DockStyle.Fill;
        this.panel3.Location = new System.Drawing.Point(3, 119);
        this.panel3.Name = "panel3";
        this.panel3.Size = new System.Drawing.Size(72, 110);
        this.panel3.TabIndex = 1;
        // 
        // panel4
        // 
        this.panel4.BackColor = System.Drawing.Color.Gold;
        this.panel4.Dock = System.Windows.Forms.DockStyle.Fill;
        this.panel4.Location = new System.Drawing.Point(81, 119);
        this.panel4.Name = "panel4";
        this.panel4.Size = new System.Drawing.Size(72, 110);
        this.panel4.TabIndex = 2;
        // 
        // panel5
        // 
        this.panel5.BackColor = System.Drawing.Color.CornflowerBlue;
        this.panel5.Dock = System.Windows.Forms.DockStyle.Fill;
        this.panel5.Location = new System.Drawing.Point(3, 3);
        this.panel5.Name = "panel5";
        this.panel5.Size = new System.Drawing.Size(150, 71);
        this.panel5.TabIndex = 2;
        // 
        // panel6
        // 
        this.panel6.BackColor = System.Drawing.Color.Magenta;
        this.panel6.Dock = System.Windows.Forms.DockStyle.Fill;
        this.panel6.Location = new System.Drawing.Point(3, 80);
        this.panel6.Name = "panel6";
        this.panel6.Size = new System.Drawing.Size(150, 71);
        this.panel6.TabIndex = 3;
        // 
        // panel7
        // 
        this.panel7.BackColor = System.Drawing.Color.Cyan;
        this.panel7.Dock = System.Windows.Forms.DockStyle.Fill;
        this.panel7.Location = new System.Drawing.Point(3, 157);
        this.panel7.Name = "panel7";
        this.panel7.Size = new System.Drawing.Size(150, 72);
        this.panel7.TabIndex = 4;
        // 
        // panel8
        // 
        this.panel8.BackColor = System.Drawing.Color.DarkSlateBlue;
        this.panel8.Controls.Add(this.tableLayoutPanel2);
        this.panel8.Dock = System.Windows.Forms.DockStyle.Fill;
        this.panel8.Location = new System.Drawing.Point(3, 3);
        this.panel8.Name = "panel8";
        this.panel8.Size = new System.Drawing.Size(156, 232);
        this.panel8.TabIndex = 5;
        // 
        // tableLayoutPanel3
        // 
        this.tableLayoutPanel3.ColumnCount = 1;
        this.tableLayoutPanel3.ColumnStyles.Add(new System.Windows.Forms.ColumnStyle(System.Windows.Forms.SizeType.Percent, 100F));
        this.tableLayoutPanel3.Controls.Add(this.panel5, 0, 0);
        this.tableLayoutPanel3.Controls.Add(this.panel7, 0, 2);
        this.tableLayoutPanel3.Controls.Add(this.panel6, 0, 1);
        this.tableLayoutPanel3.Dock = System.Windows.Forms.DockStyle.Fill;
        this.tableLayoutPanel3.Location = new System.Drawing.Point(165, 3);
        this.tableLayoutPanel3.Name = "tableLayoutPanel3";
        this.tableLayoutPanel3.RowCount = 3;
        this.tableLayoutPanel3.RowStyles.Add(new System.Windows.Forms.RowStyle(System.Windows.Forms.SizeType.Percent, 33.33333F));
        this.tableLayoutPanel3.RowStyles.Add(new System.Windows.Forms.RowStyle(System.Windows.Forms.SizeType.Percent, 33.33333F));
        this.tableLayoutPanel3.RowStyles.Add(new System.Windows.Forms.RowStyle(System.Windows.Forms.SizeType.Percent, 33.33333F));
        this.tableLayoutPanel3.Size = new System.Drawing.Size(156, 232);
        this.tableLayoutPanel3.TabIndex = 6;
        // 
        // Form2
        // 
        this.AutoScaleDimensions = new System.Drawing.SizeF(6F, 13F);
        this.AutoScaleMode = System.Windows.Forms.AutoScaleMode.Font;
        this.ClientSize = new System.Drawing.Size(650, 646);
        this.Controls.Add(this.tableLayoutPanel1);
        this.Name = "Form2";
        this.Text = "Form2";
        this.tableLayoutPanel1.ResumeLayout(false);
        this.tableLayoutPanel2.ResumeLayout(false);
        this.panel8.ResumeLayout(false);
        this.tableLayoutPanel3.ResumeLayout(false);
        this.ResumeLayout(false);

    }

列跨度的额外代码：

this.tableLayoutPanel2.SetColumnSpan(this.panel1, 2);

我在输出打印屏幕上的每个 table 布局面板周围添加了一个黑色矩形：

使用 TableLayoutPanel 的复杂 table 设计

Complex table design with TableLayoutPanel

c#

tablelayoutpanel