Is there a way to stack panels on top of each other without having them grouped together?

Question

As the title says. Is there a way to have panels on top of each other instead of them grouping? I'm trying to do a order form UI for a homework assignment. The UI isn't the homework just trying to make it look good but can't figure out how to make it all work correctly.

Public Class Main
    Private Sub btnOrder_Click(sender As Object, e As EventArgs) Handles btnOrder.Click
        panelOrder.Visible = True
        panelShipping.Visible = False
        panelConfirm.Visible = False

    End Sub

    Private Sub btnShip_Click(sender As Object, e As EventArgs) Handles btnShip.Click
        panelOrder.Visible = False
        panelShipping.Visible = True
        panelConfirm.Visible = False

    End Sub

    Private Sub btnConfirm_Click(sender As Object, e As EventArgs) Handles btnConfirm.Click
        panelOrder.Visible = False
        panelShipping.Visible = False
        panelConfirm.Visible = True

    End Sub
End Class

This is the little code I have left. The homework is just having some UI Elements as you can see in the image. I'm just trying to figure out a way to change panels like if I press the shipping button I enter the shipping panel and so on.

If you create them programmatically and just don't call panel.Controls.Add with another panel then they won't be children (grouped as you call it) of the other panel. Just avoid the designer in this case. — rory.ap, Sep 12 '20 at 01:17
https://stackoverflow.com/questions/9166319/cant-set-net-panel-to-visible/9166767#9166767 — Hans Passant, Sep 12 '20 at 01:22

score 1 · Answer 1 · answered Sep 12 '20 at 05:06

The answer linked to in the comments suggests using the Document Outline window and that is definitely a tool that you should get familiar with but it's not even necessary in this case.

In the designer, if you drop a control on another child container then the control becomes a child of that container rather than of the form. The same thing happens if you select an existing child container and then double-click a control in the Toolbox.

In the designer, if you already have on control inside another, all you have to do is drag the inner control and drop it on some area of the form itself. If you do this with two Panel controls, you can then simply select them both, open the Properties window and set the Location and Size properties to make then occupy the same area without having one inside the other.

You can right-click the one that you can currently see and select Send to Back to see the other one, or you can select the one you can't see in the drop-down at the top of the Properties window, right-click the border and select Bring to Front. Just note that these actions will change the z-order of the controls so, if that matters, you need to make sure that the overall z-order is correct when you're done. The Document Outline window lists controls by their z-order and you can rearrange them there if desired.

score 0 · Accepted Answer · answered Sep 14 '20 at 05:11

Through your description, you want to achieve panel overlap. Similar to the following gif.

You can refer to the following steps to achieve it.

Design pannel and fill controls.
Set the Location and Size of each panel through the Properties window. The Location and Size of the three panels are the same. (Please do not drag, use the Properties window to set.)
Check the Document Outline and confirm the containment relationship. The three panels should be equal, and they should not contain each other.
View=>Other Windows=>Document Outline

Correct relationship:

Wrong relationship:

If the situation above appears, click the left arrow to move the current control out of the container.

Is there a way to stack panels on top of each other without having them grouped together?

2 Answers2