C# ScrollBar in TableLayoutPanel with FlowLayouts

Question

I have TableLayoutPanel with one row and six columns. I'm adding for each column one FlowLayoutPanel. In FlowLayoutPanels I'm adding dynamically controls.
I can't add controls directly to TableLayoutPanel becouse adding and deleting is too slow for many rows (removing controls from row and then moving controls from rows below one row up).
But when I'm adding controls to FlowLayoutPanel, TableLayoutPanel doesn't show ScrollBar.

What I have is:
TableLayoutPanel: 1 row, 6 cols, DockStyle:Fill, AutoScroll:True
FlowLayoutPanel: DockStyle:Fill, FlowDirection:TopDown, WrapContents:False

ScrollBar must show in TableLayoutPanel.

Sample code (I don't think that it helps, rest is set in visual mode):

// create controls
CheckBox control1 = new CheckBox();
ComboBox control2 = new ComboBox();
ComboBox control3 = new ComboBox();
ComboBox control4 = new ComboBox();
ComboBox control5 = new ComboBox();
CheckBox control6 = new CheckBox();

control1.AutoSize   = false;
control1.CheckAlign = System.Drawing.ContentAlignment.MiddleCenter;

control3.DropDownStyle = ComboBoxStyle.DropDownList;
control3.Enabled       = false;

control4.DropDownStyle = ComboBoxStyle.DropDownList;
control4.Enabled       = false;

control5.DropDownStyle = ComboBoxStyle.DropDownList;
control5.Enabled       = false;

control6.AutoSize   = false;
control6.CheckAlign = System.Drawing.ContentAlignment.MiddleCenter;
control6.Enabled    = false;

// add to float layout panels
this.flayControl1.Controls.Add( control1 );
this.flayControl2.Controls.Add( control2 );
this.flayControl3.Controls.Add( control3 );
this.flayControl4.Controls.Add( control4 );
this.flayControl5.Controls.Add( control5 );
this.flayControl6.Controls.Add( control6 );

And image, as you see, no scrollbar on left, but controls are hiding at the end (TableLayoutPanel is control with borders):

It's better to share a simple code to reproduce the problem. — Reza Aghaei
What's the role of TableLayoutPanel? Why not simply use a Panel? — Reza Aghaei
Because of columns, I'm passing percentage values, each control is in separate column. — Popiel
So it seems you need DataGridView. Hope you find this answer helpful. Let me know if you have any question about the answer. — Reza Aghaei

Popiel Popiel · Accepted Answer · 2015-11-23T21:18:08

Thanks to Reza Aghaei, I solved it by this way:

I created FlowLayoutPanel and then, I created TableLayoutPanel for each row in FlowLayoutPanel.

int pad1, pad2, height = 28;

FlowLayoutPanel panel = new FlowLayoutPanel();
panel.AutoScroll = true;
panel.FlowDirection = FlowDirection.TopDown;
panel.WrapContents = false;

for( int x = 0; x < 10; ++x )
{
    TableLayoutPanel table = new TableLayoutPanel();
    table.Width = panel.Width;

    // controls
    CheckBox control1 = new CheckBox();
    ComboBox control2 = new ComboBox();
    ComboBox control3 = new ComboBox();
    TextBox  control4 = new TextBox();
    TextBox  control5 = new TextBox();
    CheckBox control6 = new CheckBox();

    // columns and rows number
    table.ColumnCount = 6;
    table.RowCount    = 1;

    // row height
    table.RowStyles.Add( new RowStyle(SizeType.Absolute, height) );

    // widths of columns
    table.ColumnStyles.Add( new ColumnStyle(SizeType.Percent, 5.0f ) );
    table.ColumnStyles.Add( new ColumnStyle(SizeType.Percent, 24.0f) );
    table.ColumnStyles.Add( new ColumnStyle(SizeType.Percent, 20.0f) );
    table.ColumnStyles.Add( new ColumnStyle(SizeType.Percent, 22.0f) );
    table.ColumnStyles.Add( new ColumnStyle(SizeType.Percent, 24.0f) );
    table.ColumnStyles.Add( new ColumnStyle(SizeType.Percent, 5.0f ) );

    // fill
    control1.Dock = control2.Dock = control3.Dock = control4.Dock =
    control5.Dock = control6.Dock = DockStyle.Fill;

    // margin
    pad1 = (height - control2.Height) / 2;
    pad2 = height - control2.Height - pad1;

    control2.Margin = control3.Margin = new Padding( 2, pad1, 2, pad2 );

    // textboxes margin
    pad1 = (height - control4.Height) / 2;
    pad2 = height - control4.Height - pad1;

    control4.Margin = control5.Margin = new Padding( 2, pad1, 2, pad2 );

    // add elements to TableLayoutPanel
    table.Controls.Add( control1, 0, 0 );
    table.Controls.Add( control2, 1, 0 );
    table.Controls.Add( control3, 2, 0 );
    table.Controls.Add( control4, 3, 0 );
    table.Controls.Add( control5, 4, 0 );
    table.Controls.Add( control6, 5, 0 );

    // add table to FlowLayoutPanel
    panel.Controls.Add( table );
}

This code creates 10 rows in FlowLayoutPanel.

C# ScrollBar in TableLayoutPanel with FlowLayouts

1 Answers