판넬, 그룹박스와 레이아웃 다루기

윈도우 폼은 그 내부에 텍스트박스나 레이블, 버튼등의 컨트롤을 가짐으로써 그 기능을 수행합니다. 폼이 개별 컨트롤을 가진다는 의미는 각 컨트롤의 부모가 폼이 된다는 의미로 실제 코드를 보면 "Me.Controls.Add(Me.Button1)" 처럼 폼의 컨트롤 집합에 개별 컨트롤을 Add() 메소드로 추가하는 과정을 포함합니다. 그래서 폼을 움직이면 그 내부 컨트롤도 자연스럽게 따라오는 것입니다. 

판넬(Panel)과 그룹 박스(GroupBox)도 윈도우 폼(Form)과 같이 컨트롤을 가질수 있고 폼이나 다른 판넬이나 그룹박스의 자식으로 등록할 수 있습니다. 판넬 컨트롤과 그룹박스 컨트롤은 유사한 형태로 사용하지만 차이점이라면 그룹박스는 제목을 .Text 속성으로 지정할 수 있지만 판넬은 표시할 수 있는 제목을 가질 수 없습니다. 반면 판넬은 .BorderStyle 속성으로 경계선의 스타일을 지정해서 나름의 모양을 지정할 수 있고 .AutoScroll 속성으로 판넬 내부 컨트롤의 크기에 따라 자동으로 스크롤을 표시할 수 있지만 그룹박스는 경계선이나 스크롤을 지정할 수 없습니다.

        Me.GroupBox1.Controls.Add(Me.RadioButton4)
        Me.GroupBox1.Controls.Add(Me.RadioButton3)
        Me.GroupBox1.Controls.Add(Me.RadioButton2)
        Me.GroupBox1.Controls.Add(Me.RadioButton1)
        Me.GroupBox1.Location = New System.Drawing.Point(12, 12)
        Me.GroupBox1.Name = "GroupBox1"
        Me.GroupBox1.Size = New System.Drawing.Size(260, 77)
        Me.GroupBox1.TabIndex = 0
        Me.GroupBox1.TabStop = False
        Me.GroupBox1.Text = "항목을 선택하세요"

        Me.Panel1.AutoScroll = True
        Me.Panel1.BorderStyle = System.Windows.Forms.BorderStyle.Fixed3D
        Me.Panel1.Controls.Add(Me.ListBox1)
        Me.Panel1.Controls.Add(Me.Label1)
        Me.Panel1.Controls.Add(Me.RadioButton7)
        Me.Panel1.Controls.Add(Me.RadioButton6)
        Me.Panel1.Controls.Add(Me.RadioButton5)
        Me.Panel1.Location = New System.Drawing.Point(12, 95)
        Me.Panel1.Name = "Panel1"
        Me.Panel1.Size = New System.Drawing.Size(260, 79)
        Me.Panel1.TabIndex = 1

        Me.Controls.Add(Me.Panel1)
        Me.Controls.Add(Me.GroupBox1)
        Me.Name = "Form1"

위의 코드는 Form1.Designer.vb 코드의 일부로 GroupBox1.Controls.Add() 메소드와 Panel1.Controls.Add() 메소드로 개별 컨트롤을 등록하고 결국에는 폼의 Controls.Add() 메소드로 그룹박스와 판넬을 등록하는 컨트롤 구조를 확인할 수 있습니다. 

여러 항목중에 하나를 선택하는 라디오 버튼의 경우에는 그룹 박스나 판넬을 통해서 그룹으로 묶어 주어야 라디오 버튼의 그룹 내에서 하나만이 선택되도록 할 수 있습니다. 라디오 버튼을 그룹으로 묶는 것을 외부로 노출시키고 싶지 않다면 판넬로 묶고 .BorderStyle 속성을 None으로 해서 없애면 됩니다.

요즘의 응용 프로그램은 다양한 사용자 환경에 따라 융통성 있게 반응할 수 있어야 하는데 이러한 필요를 충족 시켜주는 것이 판넬의 확장 버전이라 할 수 있는 레이아웃 컨트롤 또는 컨테이너 컨트롤입니다.

상단이 FlowLayoutPanel로 내부의 컨트롤을 .FlowDirection 속성값에 따라 좌->우, 우->좌, 위->아래, 아래->위 방향으로 자동으로 배열해 줍니다. 개발자는 컨트롤만 추가해주면 위치는 실행 환경에 따라 판넬 컨트롤이 알아서 배열해 줍니다. 창의 크기에 따라 판넬의 크기 및 위치가 따라가도록 하려면 .Dock 속성을 설정하면 됩니다.

Top, Bottom, Left, Right, Fill로 옵션을 설정할 수 있으면 다른 컨트롤들도 .Dock속성은 마찬가지 방식으로 적용되며 해당 컨트롤의 크기 및 위치는 부모 컨트롤의 영역에 따릅니다. 위 예제에서 FlowLayoutPanel은 .Dock에 Top을 설정했습니다.

위 예제 중간 좌측이 TabControl로 .TabPages 속성을 통해서 여러개의 탭 페이지를 관리할 수 있도록 합니다. 개별 컨트롤은 TabControl내의 TabPage컨트롤을 선택한 다음 추가하면 됩니다. 예제 중간 우측은 TableLayoutPanel로 .RowCount, .ColumnCount 속성을 통해서 행열의 크기를 지정하여 각 셀 단위의 판넬로 개별 컨트롤을 배열할 수 있도록 해줍니다.

예제의 하단은 SplitContainer로 .Orientation 속성에 따라 수평 또는 수직으로 창을 나누고 사용자가 실행중에 영역을 조정할 수 있도록 할 수 있습니다. 예제에서는 .Dock 속성을 Bottom으로 설정했습니다.

아래의 그림은 위의 레이아웃 예제를 실행하고 실행중 창크기를 조절해서 각 컨트롤 및 레이아웃의 크기와 위치가 어떻게 자동 조정 되었는지 확인한 것입니다.

.Dock 설정에 따라 Top과 Bottom은 위/아래로 위치를 붙여 조정하고 높이는 유지하지만 창크기에 따라 폭맞춤이 수행되었고 FlowLayoutPanel의 폭이 넓어짐에 따라 컨트롤이 한줄에 표시되고 있음을 확인할 수 있습니다. 중간에 있는 탭 레이아웃과 테이블 레이아웃의 경우에는 .Dock설정이 Left와 Right로 좌우로 위치를 붙여 조정하고 폭은 유지하지만 창크기에 따라 높이 맞춤이 수행되었고 테이블 레이아웃의 행간 간격이 자동 조정되었음을 확인할 수 있습니다.