Switch between panels

问题:

I have 3 panels in 1 form to go through a process to input certain data. When the next button in a panel is clicked the next panel should be displayed. Initially I have enabled the visibility of first panel and disabled the visibility of other panels.
When the next button is clicked the below code will be executed.

      panel1.Visible = false;
      panel2.Visible = true;

For the purpose of development I have put them side by side(not one upon another) and it woks perfect.
But when I put them one upon another the above code does not appear to be wok, which means when the next button is clicked it just shows a empty form.
Then I added below code too.

    panel1.SendToBack();
    panel2.BringToFront();

But it didn't work. Can someone help me with this.

Thank you.

回答1:

This always goes wrong in the designer, the bottom panel will become the Parent of the top one. So if you hide the bottom one you can never see see the top one.

This can be worked around with View > (Other Windows) > Document Outline, drag the top panel back to the form. Still pretty painful, you typically have to edit the Location by hand and making any changes to the form in the designer later tends to slurp the panel back.

There are better ways to do this. Creating UserControls instead is highly recommended, they have their own design surface. Or use the RAD way and do this with a TabControl instead. All you have to do is hide the tabs at runtime, the subject of this Q+A.

回答2:

You have to be careful when putting container controls like a Panel 'one upon another '.

In the designer you can do it, but only by carfully moving the panel with the keyboard. Using the mouse will always put the moved one into not upon the other one whenever its top left corner gets inside the other one.

As an alternative you can do the moving in code.

Doing it in code has the advantage of still being able to work with the lower panels and its content. Sometimes I stuff them into the tabpages of an (at runtime invisible) dummy tab and move it in or out of the pages to hide and show them..

回答3:

Here is the code you can use to have multiple panels at the same time and switch between them with the next buttom added to the form.

public Form1()
    {
        InitializeComponent();
        panel1.Visible = true;
        panel3.Visible = false;
        panel2.Visible = false;
    }

    private void btnNext_Click(object sender, EventArgs e)
    {
        if (panel1.Visible)
        {
            panel1.Visible = false;
            panel2.Visible = true;
            panel3.Visible = false;
        }
        else if (panel2.Visible)
        {
            panel1.Visible = false;
            panel2.Visible = false;
            panel3.Visible = true;
        }
        else if (panel3.Visible)
        {
            panel1.Visible = true;
            panel2.Visible = false;
            panel3.Visible = false;
        }
    }

Of course if you tagged your panels in ascending/descending format no gap between the tags for example 1,2,3,4 or 5,4,3,2 not 1,2,4 you could use this code

public Form1()
    {
        InitializeComponent();
        panel1.Visible = true;
        panel2.Visible = false;
        panel3.Visible = false;
    }

    private void btnNext_Click(object sender, EventArgs e)
    {
        TogglePanels();
    }
    public void TogglePanels()
    {
        List<Panel> allPanelsInForm = new List<Panel>();
        foreach (var control in Controls)
        {
            if (control is Panel)
                allPanelsInForm.Add(control as Panel);
        }
        Panel visiblePanel = allPanelsInForm.Where(o => o.Visible).FirstOrDefault();
        int nextPanelId = Convert.ToInt32(visiblePanel.Tag) + 1;
        bool nextPanelExists = allPanelsInForm.Exists(o => Convert.ToInt32(o.Tag) == nextPanelId);
        nextPanelId = nextPanelExists ? nextPanelId : 1;
        foreach (Panel panel in allPanelsInForm)
        {
            panel.Visible = Convert.ToInt32(panel.Tag) == nextPanelId ? true : false;
        }
    }

I wish it could help you.