Search code examples
c#winformstablelayoutpanel

TableLayoutPanel isn't showing padding on bottom when scrollbar is visible


I'm trying to build "dashboard" like layout for my WinForms application. I was able to build simple concept using TableLayoutPanel. I'm able to add columns, rows and controls to tlp (TableLayoutPanel), but I get unwanted behaviour: enter image description here

I have padding set to 5 on tlp, but after adding two rows that padding disappears - I can scroll to bottom, but I'd like that padding to be visible when scrollbar is at bottom.

I'm adding new row with this code:

private void newButton_Click(object sender, EventArgs e)
{
    var x = tableLayoutPanel1.RowStyles.Count - 1;
    tableLayoutPanel1.RowStyles.Insert(x,new RowStyle(SizeType.Absolute,100));
    var b = new Button
    {
        Dock = DockStyle.Fill,
        Text = "New"+x.ToString(),
        UseVisualStyleBackColor = true
    };
    tableLayoutPanel1.RowCount++;
    x = tableLayoutPanel1.RowStyles.Count - 2;
    tableLayoutPanel1.Controls.Add(b,0,x);
}

Is this behaviour by design or can I change it? Basically I'd like that bottom padding to be visible when I scroll to bottom on tlp.

As requested this is my tlp design code:

private void InitializeComponent()
{
    this.tableLayoutPanel1 = new System.Windows.Forms.TableLayoutPanel();
    this.button1 = new System.Windows.Forms.Button();
    this.button2 = new System.Windows.Forms.Button();
    this.button5 = new System.Windows.Forms.Button();
    this.tableLayoutPanel1.SuspendLayout();
    this.SuspendLayout();
    // 
    // tableLayoutPanel1
    // 
    this.tableLayoutPanel1.AutoScroll = true;
    this.tableLayoutPanel1.AutoScrollMargin = new System.Drawing.Size(10, 10);
    this.tableLayoutPanel1.BackColor = System.Drawing.SystemColors.ActiveCaption;
    this.tableLayoutPanel1.ColumnCount = 2;
    this.tableLayoutPanel1.ColumnStyles.Add(new System.Windows.Forms.ColumnStyle(System.Windows.Forms.SizeType.Percent, 50F));
    this.tableLayoutPanel1.ColumnStyles.Add(new System.Windows.Forms.ColumnStyle(System.Windows.Forms.SizeType.Percent, 50F));
    this.tableLayoutPanel1.Controls.Add(this.button1, 0, 0);
    this.tableLayoutPanel1.Controls.Add(this.button2, 1, 0);
    this.tableLayoutPanel1.Cursor = System.Windows.Forms.Cursors.Default;
    this.tableLayoutPanel1.Location = new System.Drawing.Point(12, 12);
    this.tableLayoutPanel1.Name = "tableLayoutPanel1";
    this.tableLayoutPanel1.Padding = new System.Windows.Forms.Padding(5);
    this.tableLayoutPanel1.RowCount = 2;
    this.tableLayoutPanel1.RowStyles.Add(new System.Windows.Forms.RowStyle(System.Windows.Forms.SizeType.Absolute, 100F));
    this.tableLayoutPanel1.RowStyles.Add(new System.Windows.Forms.RowStyle());
    this.tableLayoutPanel1.Size = new System.Drawing.Size(459, 221);
    this.tableLayoutPanel1.TabIndex = 0;
    // 
    // button1 - button in top left cell in tlp
    // 
    this.button1.Dock = System.Windows.Forms.DockStyle.Fill;
    this.button1.Location = new System.Drawing.Point(8, 8);
    this.button1.Name = "button1";
    this.button1.Size = new System.Drawing.Size(218, 94);
    this.button1.TabIndex = 0;
    this.button1.Text = "button1";
    this.button1.UseVisualStyleBackColor = true;
    // 
    // button2 - button in top right cell in tlp
    // 
    this.button2.Dock = System.Windows.Forms.DockStyle.Fill;
    this.button2.Location = new System.Drawing.Point(232, 8);
    this.button2.Name = "button2";
    this.button2.Size = new System.Drawing.Size(219, 94);
    this.button2.TabIndex = 1;
    this.button2.Text = "button2";
    this.button2.UseVisualStyleBackColor = true;
    // 
    // button5 - "Test" button
    // 
    this.button5.Anchor = ((System.Windows.Forms.AnchorStyles)((System.Windows.Forms.AnchorStyles.Bottom | System.Windows.Forms.AnchorStyles.Left)));
    this.button5.Location = new System.Drawing.Point(12, 427);
    this.button5.Name = "button5";
    this.button5.Size = new System.Drawing.Size(75, 23);
    this.button5.TabIndex = 1;
    this.button5.Text = "Test";
    this.button5.UseVisualStyleBackColor = true;
    this.button5.Click += new System.EventHandler(this.button5_Click);
    // 
    // Form2
    // 
    this.AutoScaleDimensions = new System.Drawing.SizeF(6F, 13F);
    this.AutoScaleMode = System.Windows.Forms.AutoScaleMode.Font;
    this.ClientSize = new System.Drawing.Size(755, 462);
    this.Controls.Add(this.tableLayoutPanel1);
    this.Controls.Add(this.button5);
    this.Name = "Form2";
    this.Text = "Form2";
    this.Load += new System.EventHandler(this.Form2_Load);
    this.tableLayoutPanel1.ResumeLayout(false);
    this.ResumeLayout(false);
}

At first I have 2 rows, first set to 100 pixels absolute size, second to autofill, when I click "Test" button I'm inserting row that has same properties as first (absolute size, 100 px height)


Solution

  • Thanks to @Sinatr and @TaW I've solved my problem.

    enter image description here
    As You may see after adding more rows and scrolling to bottom padding is still visible (desirable effect).

    The key was to put TableLayoutPanel inside UserControl.

    Here are properties that must be set:

    TableLayoutPanel (inside UserControl):

    • Dock:Top
    • AutoSize:True
    • AutoScroll:False

    UserControl:

    • AutoScroll:True

    Below is designer code from my UserControl:

    private void InitializeComponent()
    {
        this.tableLayoutPanel1 = new System.Windows.Forms.TableLayoutPanel();
        this.SuspendLayout();
        // 
        // tableLayoutPanel1
        // 
        this.tableLayoutPanel1.AutoSize = true;
        this.tableLayoutPanel1.BackColor = System.Drawing.SystemColors.ActiveCaption;
        this.tableLayoutPanel1.ColumnCount = 3;
        this.tableLayoutPanel1.ColumnStyles.Add(new System.Windows.Forms.ColumnStyle(System.Windows.Forms.SizeType.Percent, 33.33F));
        this.tableLayoutPanel1.ColumnStyles.Add(new System.Windows.Forms.ColumnStyle(System.Windows.Forms.SizeType.Percent, 33.34F));
        this.tableLayoutPanel1.ColumnStyles.Add(new System.Windows.Forms.ColumnStyle(System.Windows.Forms.SizeType.Percent, 33.33F));
        this.tableLayoutPanel1.Cursor = System.Windows.Forms.Cursors.Default;
        this.tableLayoutPanel1.Dock = System.Windows.Forms.DockStyle.Top;
        this.tableLayoutPanel1.Location = new System.Drawing.Point(0, 0);
        this.tableLayoutPanel1.Name = "tableLayoutPanel1";
        this.tableLayoutPanel1.Padding = new System.Windows.Forms.Padding(5);
        this.tableLayoutPanel1.RowCount = 1;
        this.tableLayoutPanel1.RowStyles.Add(new System.Windows.Forms.RowStyle());
        this.tableLayoutPanel1.Size = new System.Drawing.Size(443, 10);
        this.tableLayoutPanel1.TabIndex = 1;
        // 
        // Dashboard
        // 
        this.AutoScaleDimensions = new System.Drawing.SizeF(6F, 13F);
        this.AutoScaleMode = System.Windows.Forms.AutoScaleMode.Font;
        this.AutoScroll = true;
        this.BackColor = System.Drawing.Color.Transparent;
        this.Controls.Add(this.tableLayoutPanel1);
        this.Name = "Dashboard";
        this.Size = new System.Drawing.Size(443, 208);
        this.Load += new System.EventHandler(this.Dashboard_Load);
        this.MouseEnter += new System.EventHandler(this.Dashboard_MouseEnter);
        this.ResumeLayout(false);
        this.PerformLayout();
    }
    

    I hope this help anyone having same problem.