[C#] 폼에서 패널컨트롤(Panel)이용해서 멀티 페이지 구현하기

[C#] 폼에서 패널컨트롤(Panel)이용해서 멀티 페이지 구현하기

 

환경: Visual Studio 2012

 

폼에 다중 페이지 구현을 위해서 Panel 을 추가 합니다. 각 페이지 마다 버튼을 달아 페이지를 이동할 수 있도록 구현하였습니다. 폼 안에 단계별 옵션을 진행하고자 할 때 유용하겠죠.

 

 

▼ 먼저 첫 페이지에 표현할 컨트롤들을 올린 후 다음 페이지로 이동할 수 있는 다음 버튼을 하나 추가합니다. 첫 페이지는 폼이 되는 것이죠.

 

 

▼ 첫 페이지에 버튼을 추가하였다면 미리 클릭 이벤트 함수를 뽑아 놓습니다. 폼에 패널을 올리면 안보이기 때문입니다. 다음 버튼에는 패널을 보이게 하는 소스가 들어가겠죠.

 

▼ 두 번째 페이지를 구현하기 위해 폼에 패널 컨트롤을 올립니다. 세 번째 페이지도 두 번째 패널 위에 패널을 올려 구현하시면 됩니다.

 

▼ 폼에 패널을 올렸으면 Dock 옵션으로 가서 폼의 크기에 맞춥니다. 그래야 폼에 있는 컨트롤들이 안보여서 페이지 전환이 된 것처럼 보이겠죠.

 

▼ 패널을 폼 크기에 맞게 확장시킨 후 Visible 속성으로 가서 False 로 바꿉니다. 처음 프로그램을 띄울 때 폼 페이지가 제일 먼저 보여야 되기 때문이죠. 이렇게 False 로 바꿔 놓고 다음 버튼을 누르면 소스에서 True 로 변경할 것입니다.

 

▼ 두 번째 페이지에 해당하는 패널에 패널 컨드롤을 하나 더 추가하고 Dock 옵션에서 폼과 Docking 시킨 후 컨트롤들을 올립니다. 그렇게 해서 세 번째 페이지까지 만들었습니다.

 

▼ 이제 버튼 구현만 남았네요. 아래 그림과 소스를 보시면 패널 컨트롤의 Visible 속성값을 True 와 False 바꾼 것 밖에는 없습니다. 세 번째 페이지에서 다음 버튼은 첫 번째 페이지로 돌아가는 것으로 두 개의 패널을 안보이게 만들었습니다.

namespace MultiPageSample
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
        }

        private void btnPage1Next_Click(object sender, EventArgs e)
        {
            panel1.Visible = true;
        }

        private void btnPage2Prev_Click(object sender, EventArgs e)
        {
            panel1.Visible = false;
        }

        private void btnPage2Next_Click(object sender, EventArgs e)
        {
            panel2.Visible = true;
        }

        private void btnPage3Prev_Click(object sender, EventArgs e)
        {
            panel2.Visible = false;
        }

        private void btnPage3Next_Click(object sender, EventArgs e)
        {
            panel1.Visible = false;
            panel2.Visible = false;
        }
    }
}