Remove Row inside TableLayoutPanel makes a layout problem

问题

I have a WinForms application that has a TableLayoutPanel; this is the definition code:

tableLayoutPanel1 = new TableLayoutPanel();
tableLayoutPanel1.Dock = DockStyle.Fill;
tableLayoutPanel1.AutoScroll = true;

tableLayoutPanel1.RowCount = users.Count + 1;
tableLayoutPanel1.ColumnCount = 1;
tableLayoutPanel1.GrowStyle = TableLayoutPanelGrowStyle.FixedSize;
tableLayoutPanel1.ColumnStyles.Add(new ColumnStyle(SizeType.Percent, 100F));

foreach (String user in users)
{
    tableLayoutPanel1.RowStyles.Add(new RowStyle(SizeType.Absolute, 600F));
}
tableLayoutPanel1.RowStyles.Add(new RowStyle(SizeType.Absolute, 600F));

int index = 0;
foreach (String user in users)
{
    AddDockedControl(index, user);
    index++;
}
AddDockedControl(index, null);

panel1.Controls.Add(tableLayoutPanel1);

private void AddDockedControl(int row, String userName)
{
    AccountRowUC newUser = new AccountRowUC(this, userName, row);
    newUser.BorderStyle = BorderStyle.FixedSingle;
    newUser.Dock = DockStyle.Top;
    tableLayoutPanel1.Controls.Add(newUser, 0, row);
}

Now, when I want to remove one of the rows, I'm using this code:

public void RemoveRowAtIndex(int index)
{
    if (index >= tableLayoutPanel1.RowCount)
        return;

    // delete all controls of row that we want to delete
    for (int i = 0; i < tableLayoutPanel1.ColumnCount; i++)
    {
        var control = tableLayoutPanel1.GetControlFromPosition(i, index);
        tableLayoutPanel1.Controls.Remove(control);
    }

    // move up row controls that comes after row we want to remove
    for (int i = index + 1; i < tableLayoutPanel1.RowCount; i++)
    {
        for (int j = 0; j < tableLayoutPanel1.ColumnCount; j++)
        {
            var control = tableLayoutPanel1.GetControlFromPosition(j, i);
            if (control != null)
                tableLayoutPanel1.SetRow(control, i - 1);
        }
    }

    // remove last row

    tableLayoutPanel1.RowStyles.RemoveAt(tableLayoutPanel1.RowCount - 1);
    //tableLayoutPanel1.RowStyles.RemoveAt(index);
    tableLayoutPanel1.RowCount--;
}

The problem is that when I remove a Row, a big space is left at the bottom of the table: the TableLayoutPanel won't reclaim the size of panel1.

回答1:

A solution base on the layout described in the comments and this answer, previously posted:
Center multiple rows of controls in a FlowLayoutPanel

Description:
(Full code of a test Form provided at bottom of this post)

Create a new Form (here, named frmTLPTest1)
Add two Panels. One is used to host some buttons, the other one will be the Container of a TableLayoutPanel.
Set the Container panel to AutoScroll = true, AutoSizeMode = AutoSizeMode.GrowAndShrink, set all the Anchors (Left, Top, Right, Bottom)
Inside the Container panel, drop a new TableLayoutPanel: set it to AutoSize = true, AutoSizeMode = AutoSizeMode.GrowAndShrink, Dock = DockStyle.Top
Remove all Rows and Columns from the TableLayoutPanel except one of each (you cannot remove all). Set the dimensions of both to AutoSize.

Important note (also reported in the linked answer):

In the Form constructor, one of the RowStyles is removed. This is important: the TLP will keep 2 RowStyles. One is applied to the existing Row; the second style will be applied to the first Row you add: to the first one only, not the others. If this style is not removed, it will compromise the layout.

The core methods used to Add Rows to/Remove Rows from the TableLayoutPanel, make use of a FlowLayoutPanel as the TLP Row content and can also be used as Container of other controls, eventually.

TlpAddRow(TableLayoutPanel tlp, bool addRowCount) method:
Adds a new FlowLayoutPanel to the Cell of the TableLayoutPanel specified and adds a new Row if requested.
Since the Designer won't allow to remove all the Rows, the First Row (FlowLayoutPanel) must not increment the Rows count: the addRowCount argument will be set to false.

private Control TlpAddRow(TableLayoutPanel tlp, bool addRowCount)
{
    var flp = new FlowLayoutPanel() {
        Anchor = AnchorStyles.Top | AnchorStyles.Bottom,
        AutoSize = true,
        AutoSizeMode = AutoSizeMode.GrowAndShrink,
    };

    tlp.SuspendLayout();
    if (addRowCount) tlp.RowCount += 1;
    tlp.Controls.Add(flp, 0, tlp.RowCount - 1);
    tlp.ResumeLayout(true);
    return flp;
}

TLPRemoveRow(TableLayoutPanel tlp, Control control) method (overloaded):

Allows to remove a Row from the specified TableLayoutPanel. The Row to be removed can be derived from the Control that is used as the Row Container (a FlowLayoutPanel, here, but it could be a Panel, another TableLayoutPanel, or some other type of Container control).
The Row can also be removed by directly specifying the Row index.

private void TLPRemoveRow(TableLayoutPanel tlp, Control control)
{
    int ctlRow = this.tlp1.GetRow(control);
    TLPRemoveRow(tlp, ctlRow);
}

private void TLPRemoveRow(TableLayoutPanel tlp, int row)
{
    if (row < this.tlp1.RowCount - 1) {
        for (int i = row; i < this.tlp1.RowCount - 1; i++) {
            tlp.SetRow(tlp.GetControlFromPosition(0, i + 1), i);
        }
    }
    tlp.RowCount -= 1;
}

Visual results of this Layout:

Since it's easier to understand how it work by testing rather than explaining, here's the full layout of the Form:

Test Form (frmTLPTest1):

using System.Drawing;
using System.Linq;
using System.Windows.Forms;

public partial class frmTLPTest1 : Form
{
    public frmTLPTest1()
    {
        InitializeComponent();
        this.tlp1.RowStyles.RemoveAt(1);
    }

    private void SOfrmTest1_Load(object sender, EventArgs e)
    {
        TlpAddRow(this.tlp1, false);
    }

    Random rnd = new Random();
    Size[] sizes = new Size[] { new Size(75, 75), new Size(100, 100), new Size(125, 125)};
    Color[] colors = new Color[] { Color.Red, Color.LightGreen, Color.YellowGreen, Color.SteelBlue };
    Control selectedObject = null;
    Control selectedParent = null;

    private void btnAddControl_Click(object sender, EventArgs e)
    {
        Size size = new Size(125, 125);
        if (this.chkRandom.Checked)
            size = sizes[rnd.Next(sizes.Length)];

        PictureBox pBox = new PictureBox()
        {
            Anchor = AnchorStyles.None,
            BackColor = colors[rnd.Next(colors.Length)],
            MinimumSize = size,
            Size = size
        };

        bool drawborder = false;
        pBox.MouseEnter += (s, evt) => { drawborder = true;  pBox.Invalidate(); };
        pBox.MouseLeave += (s, evt) => { drawborder = false; pBox.Invalidate(); };
        pBox.MouseDown += (s, evt) => { selectedParent = pBox.Parent;
                                        selectedObject = pBox;  pBox.Invalidate();
        };
        pBox.Paint += (s, evt) => {
            if (drawborder) {
                ControlPaint.DrawBorder(evt.Graphics, pBox.ClientRectangle, 
                                        Color.White, ButtonBorderStyle.Solid);
            }
        };

        if (this.tlp1.RowCount == 0) TlpAddRow(this.tlp1, true); 

        var ctl = this.tlp1.GetControlFromPosition(0, this.tlp1.RowCount - 1);
        int overallWith = 0;
        if (ctl.Controls?.Count > 0)
            overallWith = ctl.Controls.OfType<Control>().Sum(c => c.Width + c.Margin.Left + c.Margin.Right);
        overallWith += ctl.Margin.Right + ctl.Margin.Left + pBox.Size.Width + pBox.Margin.Left + pBox.Margin.Right;

        if (overallWith >= this.tlp1.Width) {
            ctl = TlpAddRow(this.tlp1, true);
        }
        ctl.Controls.Add(pBox);
    }

    private void btnRemoveRow_Click(object sender, EventArgs e)
    {
        if (selectedParent is null) return;
        if (selectedParent.Controls.Count > 0)
        {
            for (int i = 0; i == selectedParent.Controls.Count - 1; i++) {
                selectedParent.Controls[i].Dispose();
            }
        }
        TLPRemoveRow(this.tlp1, selectedParent);
        selectedParent.Dispose();
    }

    private void btnRemoveControl_Click(object sender, EventArgs e)
    {
        if (selectedObject is null) return;
        Control parent = selectedObject.Parent;
        selectedObject.Dispose();

        if (parent?.Controls.Count == 0) {
            TLPRemoveRow(this.tlp1, parent);
            parent.Dispose();
        }
    }

    private Control TlpAddRow(TableLayoutPanel tlp, bool addRowCount)
    {
        var flp = new FlowLayoutPanel() {
            Anchor = AnchorStyles.Top | AnchorStyles.Bottom,
            AutoSize = true,
            AutoSizeMode = AutoSizeMode.GrowAndShrink,
        };

        tlp.SuspendLayout();
        if (addRowCount) tlp.RowCount += 1;
        tlp.Controls.Add(flp, 0, tlp.RowCount - 1);
        tlp.ResumeLayout(true);
        return flp;
    }

    private void TLPRemoveRow(TableLayoutPanel tlp, Control control)
    {
        int ctlRow = this.tlp1.GetRow(control);
        TLPRemoveRow(tlp, ctlRow);
    }

    private void TLPRemoveRow(TableLayoutPanel tlp, int row)
    {
        if (row < this.tlp1.RowCount - 1) {
            for (int i = row; i < this.tlp1.RowCount - 1; i++) {
                tlp.SetRow(tlp.GetControlFromPosition(0, i + 1), i);
            }
        }
        tlp.RowCount -= 1;
    }
}

Test Form Designer:

partial class frmTLPTest1
{
    private System.ComponentModel.IContainer components = null;
    protected override void Dispose(bool disposing)
    {
        if (disposing && (components != null)) {
            components.Dispose();
        }
        base.Dispose(disposing);
    }

    private void InitializeComponent()
    {
        this.panToolbar = new System.Windows.Forms.Panel();
        this.btnRemoveRow = new System.Windows.Forms.Button();
        this.chkRandom = new System.Windows.Forms.CheckBox();
        this.btnRemoveControl = new System.Windows.Forms.Button();
        this.btnAddControl = new System.Windows.Forms.Button();
        this.panBackground = new System.Windows.Forms.Panel();
        this.tlp1 = new System.Windows.Forms.TableLayoutPanel();
        this.panToolbar.SuspendLayout();
        this.panBackground.SuspendLayout();
        this.SuspendLayout();
        // 
        // panToolbar
        // 
        this.panToolbar.BackColor = System.Drawing.Color.DarkOliveGreen;
        this.panToolbar.Controls.Add(this.btnRemoveRow);
        this.panToolbar.Controls.Add(this.chkRandom);
        this.panToolbar.Controls.Add(this.btnRemoveControl);
        this.panToolbar.Controls.Add(this.btnAddControl);
        this.panToolbar.Dock = System.Windows.Forms.DockStyle.Bottom;
        this.panToolbar.Location = new System.Drawing.Point(0, 359);
        this.panToolbar.Name = "panToolbar";
        this.panToolbar.Size = new System.Drawing.Size(552, 55);
        this.panToolbar.TabIndex = 2;
        // 
        // btnRemoveRow
        // 
        this.btnRemoveRow.BackColor = System.Drawing.Color.FromArgb(((int)(((byte)(32)))), ((int)(((byte)(32)))), ((int)(((byte)(32)))));
        this.btnRemoveRow.FlatAppearance.MouseDownBackColor = System.Drawing.Color.FromArgb(((int)(((byte)(192)))), ((int)(((byte)(64)))), ((int)(((byte)(0)))));
        this.btnRemoveRow.FlatAppearance.MouseOverBackColor = System.Drawing.Color.FromArgb(((int)(((byte)(128)))), ((int)(((byte)(64)))), ((int)(((byte)(0)))));
        this.btnRemoveRow.FlatStyle = System.Windows.Forms.FlatStyle.Flat;
        this.btnRemoveRow.ForeColor = System.Drawing.Color.White;
        this.btnRemoveRow.Location = new System.Drawing.Point(261, 11);
        this.btnRemoveRow.Name = "btnRemoveRow";
        this.btnRemoveRow.Size = new System.Drawing.Size(119, 34);
        this.btnRemoveRow.TabIndex = 4;
        this.btnRemoveRow.Text = "Remove Row";
        this.btnRemoveRow.UseVisualStyleBackColor = false;
        this.btnRemoveRow.Click += new System.EventHandler(this.btnRemoveRow_Click);
        // 
        // chkRandom
        // 
        this.chkRandom.AutoSize = true;
        this.chkRandom.ForeColor = System.Drawing.Color.White;
        this.chkRandom.Location = new System.Drawing.Point(446, 20);
        this.chkRandom.Name = "chkRandom";
        this.chkRandom.Size = new System.Drawing.Size(94, 19);
        this.chkRandom.TabIndex = 3;
        this.chkRandom.Text = "Random Size";
        this.chkRandom.UseVisualStyleBackColor = true;
        // 
        // btnRemoveControl
        // 
        this.btnRemoveControl.BackColor = System.Drawing.Color.FromArgb(((int)(((byte)(32)))), ((int)(((byte)(32)))), ((int)(((byte)(32)))));
        this.btnRemoveControl.FlatAppearance.MouseDownBackColor = System.Drawing.Color.FromArgb(((int)(((byte)(192)))), ((int)(((byte)(64)))), ((int)(((byte)(0)))));
        this.btnRemoveControl.FlatAppearance.MouseOverBackColor = System.Drawing.Color.FromArgb(((int)(((byte)(128)))), ((int)(((byte)(64)))), ((int)(((byte)(0)))));
        this.btnRemoveControl.FlatStyle = System.Windows.Forms.FlatStyle.Flat;
        this.btnRemoveControl.ForeColor = System.Drawing.Color.White;
        this.btnRemoveControl.Location = new System.Drawing.Point(136, 11);
        this.btnRemoveControl.Name = "btnRemoveControl";
        this.btnRemoveControl.Size = new System.Drawing.Size(119, 34);
        this.btnRemoveControl.TabIndex = 2;
        this.btnRemoveControl.Text = "Remove Control";
        this.btnRemoveControl.UseVisualStyleBackColor = false;
        this.btnRemoveControl.Click += new System.EventHandler(this.btnRemoveControl_Click);
        // 
        // btnAddControl
        // 
        this.btnAddControl.BackColor = System.Drawing.Color.FromArgb(((int)(((byte)(32)))), ((int)(((byte)(32)))), ((int)(((byte)(32)))));
        this.btnAddControl.FlatAppearance.MouseDownBackColor = System.Drawing.Color.FromArgb(((int)(((byte)(192)))), ((int)(((byte)(64)))), ((int)(((byte)(0)))));
        this.btnAddControl.FlatAppearance.MouseOverBackColor = System.Drawing.Color.FromArgb(((int)(((byte)(128)))), ((int)(((byte)(64)))), ((int)(((byte)(0)))));
        this.btnAddControl.FlatStyle = System.Windows.Forms.FlatStyle.Flat;
        this.btnAddControl.ForeColor = System.Drawing.Color.White;
        this.btnAddControl.Location = new System.Drawing.Point(11, 11);
        this.btnAddControl.Name = "btnAddControl";
        this.btnAddControl.Size = new System.Drawing.Size(119, 34);
        this.btnAddControl.TabIndex = 0;
        this.btnAddControl.Text = "Add Control";
        this.btnAddControl.UseVisualStyleBackColor = false;
        this.btnAddControl.Click += new System.EventHandler(this.btnAddControl_Click);
        // 
        // panBackground
        // 
        this.panBackground.Anchor = ((System.Windows.Forms.AnchorStyles)((((System.Windows.Forms.AnchorStyles.Top | System.Windows.Forms.AnchorStyles.Bottom) 
        | System.Windows.Forms.AnchorStyles.Left) 
        | System.Windows.Forms.AnchorStyles.Right)));
        this.panBackground.AutoScroll = true;
        this.panBackground.AutoSizeMode = System.Windows.Forms.AutoSizeMode.GrowAndShrink;
        this.panBackground.BackColor = System.Drawing.Color.FromArgb(((int)(((byte)(32)))), ((int)(((byte)(32)))), ((int)(((byte)(32)))));
        this.panBackground.Controls.Add(this.tlp1);
        this.panBackground.Location = new System.Drawing.Point(0, 0);
        this.panBackground.Name = "panBackground";
        this.panBackground.Size = new System.Drawing.Size(552, 360);
        this.panBackground.TabIndex = 3;
        // 
        // tlp1
        // 
        this.tlp1.AutoSize = true;
        this.tlp1.AutoSizeMode = System.Windows.Forms.AutoSizeMode.GrowAndShrink;
        this.tlp1.BackColor = System.Drawing.Color.FromArgb(((int)(((byte)(32)))), ((int)(((byte)(32)))), ((int)(((byte)(32)))));
        this.tlp1.CellBorderStyle = System.Windows.Forms.TableLayoutPanelCellBorderStyle.Single;
        this.tlp1.ColumnCount = 1;
        this.tlp1.ColumnStyles.Add(new System.Windows.Forms.ColumnStyle());
        this.tlp1.ColumnStyles.Add(new System.Windows.Forms.ColumnStyle(System.Windows.Forms.SizeType.Absolute, 20F));
        this.tlp1.Dock = System.Windows.Forms.DockStyle.Top;
        this.tlp1.Location = new System.Drawing.Point(0, 0);
        this.tlp1.Name = "tlp1";
        this.tlp1.RowCount = 1;
        this.tlp1.RowStyles.Add(new System.Windows.Forms.RowStyle());
        this.tlp1.RowStyles.Add(new System.Windows.Forms.RowStyle(System.Windows.Forms.SizeType.Absolute, 1F));
        this.tlp1.Size = new System.Drawing.Size(552, 2);
        this.tlp1.TabIndex = 4;
        // 
        // frmTLPTest1
        // 
        this.AutoScaleDimensions = new System.Drawing.SizeF(96F, 96F);
        this.AutoScaleMode = System.Windows.Forms.AutoScaleMode.Dpi;
        this.ClientSize = new System.Drawing.Size(552, 414);
        this.Controls.Add(this.panBackground);
        this.Controls.Add(this.panToolbar);
        this.Font = new System.Drawing.Font("Segoe UI", 9F, System.Drawing.FontStyle.Regular, System.Drawing.GraphicsUnit.Point, ((byte)(0)));
        this.Name = "frmTLPTest1";
        this.StartPosition = System.Windows.Forms.FormStartPosition.CenterScreen;
        this.Text = "frmTLPTest1";
        this.Load += new System.EventHandler(this.SOfrmTest1_Load);
        this.panToolbar.ResumeLayout(false);
        this.panToolbar.PerformLayout();
        this.panBackground.ResumeLayout(false);
        this.panBackground.PerformLayout();
        this.ResumeLayout(false);

    }

    private System.Windows.Forms.Panel panToolbar;
    private System.Windows.Forms.Button btnAddControl;
    private System.Windows.Forms.Button btnRemoveControl;
    private System.Windows.Forms.CheckBox chkRandom;
    private System.Windows.Forms.Panel panBackground;
    private System.Windows.Forms.TableLayoutPanel tlp1;
    private System.Windows.Forms.Button btnRemoveRow;
}

来源：https://stackoverflow.com/questions/55138144/remove-row-inside-tablelayoutpanel-makes-a-layout-problem

标签

winforms

user-controls

tablelayoutpanel