How do I resize a UserControl to fit in a container in a windows form?

Question

I am trying to fit a user control into a panel in another form. I have tried docking and auto size but nothing seems to work.

I am trying to fit this into the above panel, but its hiding the buttons. How to resize it so it will scale to the panel size?

Answer 1

Use SplitContainer control instead of panel, it will solve your problem.

Answer 2

You can use the Anchor property of the Panel, set it to "All" or "Bottom, Top, Left, Right". It will keep the same spacing with the container border, ie if you make the container smaller, it will become smaller, and vice versa.

Answer 3

Before docking the user control you need to make sure control's of user control doesn't get messy when resized. And for that you to need set right values to controls of user control anchor properties. after that you can this code below to dock it.

userControlName ctrl = new userControlName();
panel1.Controls.Add(ctrl);
ctrl.Dock = DockStyle.Fill;

or you can do similar in controlAdded event of panel

foreach (Control ctrl in panel1.Controls)
{
ctrl.Dock = DockStyle.Fill;
}

Edit: now i'm able to see pictures. you need to set

textbox to dock left and resize it

button2 anchor to top,right

button1 anchor to bottom,right

Answer 4

A TableLayoutPanel would do the trick here.

On your UserControl put a TableLayoutPanel as the first control and set its Dock property to Fill .

Add an extra row to the TableLayoutPanel so you have 2 columns and 3 rows. Put your Textbox into the top left column, set Multiline to true and then set Dock to Fill . Find the RowSpan property and set it to 3.

Add your buttons to the right hand column, one in the first row and one in the second row. Don't set the Dock properties on these. Just set any extra margins you would need.

Finally open the Column/Row edit window for the TableLayoutPanel and set the Columns like this:

And then set the Rows like this:

Press Ok to exit the Column/Row styles window and your UserControl should now look like this:

Should you want more spacing between the Buttons or a gap around the TextBox make sure to set the Margin properties on each of the controls until you have the layout you're after.

Now, when you place your new UserControl on to a design surface and resize it you'll find that the buttons no longer get obscured by the textbox.

You can, of course, play around with the number of columns/rows as you see fit until you get the layout you want.

I would suggest not setting your rows/columns to AutoSize until they contain a control otherwise the row/column will disappear from the design view and you will have to set the row/column from the Cell , Row , Column attached properties of the control you want to place.