How to place a new panel underneath existing controls?

This occasionally happens to me too, where I change my mind and want existing controls to now be in a panel (or some other container...GroupBox, FlowLayout, etc.).

Most of the time, the answer provided by Microsoft works well for me, and is documented here: Reassign Existing Controls to a Different Parent

Instead of dragging the container control to the form, you "draw" the outline of the container control around the existing controls, and then the container will grab the existing controls and make them children.

Steps:

  1. In the Toolbox, click to select the container control you want to use, then let go of the mouse button. Do NOT drag the control to the form.
  2. Move the mouse to the form area where your existing controls are, and notice the pointer changes to a crosshair, with the icon of whatever new container control you have selected.
  3. Hold the mouse button down, then drag and draw the outline of the new control "around" the existing controls. Be careful to completely surround all controls; if you get the border of the new container control too close to a control, there's a chance the existing control won't get included.
  4. Let go of the mouse button.

That's it. The existing controls should now be children of your container. I know it works in VS 2015 and newer, but I'm guessing it works for at least several versions before that.


There is no direct way, but a workaround available (Visual Studio 2010 - 2022):

Suppose you have a form named Form1.cs and there are already controls on it, such as a linkLabel, checkBoxes, radioButtons and a progressBar.

The trick is to edit the *.Designer.cs file instead of moving the controls around. Do the following:

  1. Place the new panel (panel1) on Form1 like you would normally do it (by using the toolbox), and give it a size so it covers the other controls.

  2. Close the form (and all related files), then activate in the solution explorer "Show all Files". Now Form1.Designer.cs becomes visible. Open it.

  3. Locate the following code, it contains the controls being registered to the form:

         // 
         // Form1
         // 
         this.AutoScaleDimensions = new System.Drawing.SizeF(6F, 13F);
         this.AutoScaleMode = System.Windows.Forms.AutoScaleMode.Font;
         this.ClientSize = new System.Drawing.Size(284, 262);
         this.Controls.Add(this.progressBar1);
         this.Controls.Add(this.linkLabel1);
         this.Controls.Add(this.panel1);
         this.Controls.Add(this.checkBox1);
         this.Controls.Add(this.radioButton1);
         this.Controls.Add(this.btnOk);
         this.Name = "Form1";
         this.Text = "Form1";
         this.panel1.ResumeLayout(false);
         this.panel1.PerformLayout();
         this.ResumeLayout(false);
         this.PerformLayout();
    

Then, look for the code that creates the panel:

        // 
        // panel1
        // 
        this.panel1.Location = new System.Drawing.Point(12, 12);
        this.panel1.Name = "panel1";
        this.panel1.Size = new System.Drawing.Size(260, 198);
        this.panel1.TabIndex = 7;

All you need to do is to move the controls from the form's Controls collection (this.Controls) to the panel's Controls collection (this.panel1.Controls). Move it from one place to the other in the source code, then use ** Alt+Shift ** (the block edit mode in Visual Studio's editor - hold the keys before you start selecting, and release them after you've selected the entire block) to replace this.Controls by this.panel1.Controls:

BlockEditAnimation and the only remaining controls being added to the form are panel1 and the ok button btnOk:

        // 
        // Form1
        // 
        this.AutoScaleDimensions = new System.Drawing.SizeF(6F, 13F);
        this.AutoScaleMode = System.Windows.Forms.AutoScaleMode.Font;
        this.ClientSize = new System.Drawing.Size(284, 262);
        this.Controls.Add(this.panel1);
        this.Controls.Add(this.btnOk);
        this.Name = "Form1";
        this.Text = "Form1";
        this.panel1.ResumeLayout(false);
        this.panel1.PerformLayout();
        this.ResumeLayout(false);
        this.PerformLayout();

Finally, close Form1.Designer.cs and re-open the form by double-clicking on Form1.cs. Now you should see the controls inside the panel. The positions are the same as they were before.


Note: This description was made for Visual Studio, if you're using Visual Studio Code instead, you can achieve the same with the multi cursor selection: Keyboard shortcuts are:  Strg+Alt+Arrow Up  or  Strg+Alt+Arrow Down . Alternatively you can select, and then press  Ctrl+Shift+L  to add multiple cursors to all occurances of the current selection. With multiple cursors, anything you type will be inserted/overwritten on all cursor positions.


Matt has a pretty good answer but this might be a little easier.

Place a panel on your form and set Dock to full. You will not be able to see any of your controls. Then open the Document Outline for the form. Drag and drop each control onto Panel1. Each control will land right where you want them to be. Now if you wanted to, you could disable all controls in the panel by simply setting Panel1.Disabled = true.

If there are controls that you don't want to have as part of the panel. Select the control in the Document Outline and choose Bring to Front. This control will be visible and not affected by setting the panels Enable property.