Question

How do I add padding, or some space between the textboxes when using dockstyle.top property?

for(int i =0; i< 10; i++) {
    textboxes[i] = new TextBox();
    textboxes[i].Dock = DockStyle.Top;
    mypanel.Controls.Add(textboxes[i]); 
}

The code above puts textboxes right beneath each other. Can’t figure this out without using mass panels or fixed positioning. How to do the following?

1) I would like to add around 10-20pixels between boxes.

2) How to change size (height,width) of the textboxes, since when using dockstyle.top it ignores the size commands ?

Answer 1

With DockStype.Top you can’t change the width of your TextBoxes, cause they are docked. You can only change the height. But to change the height of a TextBox you have to set the Multiline = true beforehand.

To get the space between the different boxes you have to put each TextBox within a panel, set the TextBox.Dock = Fill, the Panel.Dock = Top and the Panel.Padding = 10. Now you have some space between each TextBox.

Sample Code

for (int i = 0; i < 10; i++)
{
    var panelTextBox = CreateBorderedTextBox();

    this.Controls.Add(panelTextBox);
}

private Panel CreateBorderedTextBox()
{
    var panel = CreatePanel();
    var textBox = CreateTextBox();

    panel.Controls.Add(textBox);
    return panel;
}

private Panel CreatePanel()
{
    var panel = new Panel();
    panel.Dock = DockStyle.Top;
    panel.Padding = new Padding(5);

    return panel;
}

private TextBox CreateTextBox()
{
    var textBox = new TextBox();
    textBox.Multiline = true;
    textBox.Dock = DockStyle.Fill;

    return textBox;
}

What i forgot, you can also give a try to the FlowLayoutPanel. Just remove the DockStyle.Top from the panels and put them into the FlowLayoutPanel. Also you should set the FlowDirection to TopDown. Maybe this can also help you to solve your problem, too.