4단계: TableLayoutPanel 컨트롤을 사용하여 폼 레이아웃
이 단계에서는 폼에 TableLayoutPanel 컨트롤을 추가합니다.
이 항목에 대 한 비디오 버전을 자습서 1: 사진 뷰어 Visual Basic-비디오 2 만들기 또는 1 자습서: 사진 뷰어가 C#에-2 비디오 만들기.
TableLayoutPanel 컨트롤을 사용하여 폼을 레이아웃하려면
Windows Forms 디자이너로 이동합니다.폼의 왼쪽에서 도구 상자 탭을 찾습니다.도구 상자 탭을 마우스로 가리키고 도구 상자가 나타날 때까지 기다립니다.또는 보기 메뉴에서 도구 상자를 클릭합니다.
다음 그림과 같이 컨테이너 그룹 옆에 있는 더하기 기호를 클릭하여 컨테이너 그룹을 엽니다.
컨테이너 그룹
단추, 확인란, 레이블 등과 같은 컨트롤을 폼에 추가할 수 있습니다.도구 상자에서 TableLayoutPanel 컨트롤을 두 번 클릭합니다.이렇게 하면 다음 그림과 같이 IDE가 TableLayoutPanel 컨트롤을 폼에 추가합니다.
TableLayoutPanel 컨트롤
[!참고]
TableLayoutPanel을 추가한 후 제목이 TableLayoutPanel Tasks인 창이 폼 안에 표시되면 폼 안을 아무 곳이나 클릭하여 폼을 닫습니다.이 창에 대해서는 이 자습서의 뒷부분에서 자세히 설명합니다.
[!참고]
해당 탭을 클릭하여 폼을 표시하기 위해 도구 상자가 어떻게 확대되는지와 도구 상자 밖을 클릭하여 도구 상자가 어떻게 닫히는지 살펴봅니다.이 기능이 IDE 자동 숨기기 기능입니다.창의 오른쪽 위 모퉁이에 있는 압정 아이콘을 클릭하여 해당 창에서 자동 숨기기 기능을 사용하거나 사용하지 않도록 설정하고 창을 현재 위치에 고정시킬 수 있습니다.압정 아이콘은 다음과 같습니다.
압정 아이콘
TableLayoutPanel을 클릭하여 선택합니다.다음 그림과 같이 속성 창의 맨 위에 있는 드롭다운 목록에서 선택된 컨트롤을 확인할 수 있습니다.
TableLayoutPanel 컨트롤이 표시된 속성 창
컨트롤 선택기는 속성 창의 맨 위에 있는 드롭다운 목록입니다.이 예제에서는 이 드롭다운 목록에 tableLayoutPanel1이라는 컨트롤이 선택되어 있는 것을 보여 줍니다.컨트롤은 Windows Forms 디자이너를 클릭하여 선택할 수 있거나 컨트롤 선택기에서 선택할 수 있습니다.이제 TableLayoutPanel이 선택되어 있으므로 Dock 속성을 찾아서 None으로 설정해야 하는 Dock을 클릭합니다.값 옆에 드롭다운 화살표가 나타납니다.이 화살표를 클릭하고 다음 그림과 같이 채우기 단추(가운데 있는 큰 단추)를 선택합니다.
채우기 단추가 선택된 속성 창
TableLayoutPanel Dock 속성을 채우기로 설정합니다. 그러면 패널이 전체 폼으로 채워집니다.폼의 크기를 다시 조정하면 TableLayoutPanel은 도킹된 상태를 유지한 채 폼의 크기에 맞게 자동으로 크기가 조정됩니다.
[!참고]
TableLayoutPanel은 열과 행이 있고 개별 셀이 여러 열과 행에 걸쳐 있을 수 있다는 점에서 Microsoft Office Word의 표와 비슷합니다.각 셀에는 단추, 확인란, 레이블 등과 같은 컨트롤이 하나만 있을 수 있습니다.TableLayoutPanel에는 전체 위쪽 행에 걸쳐 있는 하나의 PictureBox 컨트롤, 왼쪽 아래 셀에 있는 하나의 CheckBox 컨트롤 및 오른쪽 아래 셀에 있는 네 개의 Button 컨트롤이 포함되어 있습니다.
[!참고]
위에서 각 셀에는 하나의 컨트롤만 있을 수 있다고 언급했지만 오른쪽 아래 셀에는 네 개의 Button 컨트롤이 있는 것은다른 컨트롤을 포함하는 컨트롤을 셀에 배치할 수 있기 때문입니다.이러한 컨트롤을 컨테이너라고 하는데, TableLayoutPanel이 컨테이너입니다.이러한 컨트롤에 대해서는 이 자습서의 뒷부분에서 자세히 설명합니다.
현재 TableLayoutPanel에는 크기가 같은 행과 열이 각각 두 개씩 있는데,위쪽 행과 오른쪽 열의 크기를 훨씬 더 크게 만들어야 합니다.Windows Forms 디자이너에서 TableLayoutPanel을 선택합니다.오른쪽 위 모퉁이에 다음과 같은 작은 검정색 삼각형 단추가 있습니다.
삼각형 단추
이 단추는 이 컨트롤에 해당 속성을 자동으로 설정하는 데 도움이 되는 작업이 포함되어 있음을 나타냅니다.
삼각형을 클릭하여 다음 그림과 같이 컨트롤의 작업 목록을 표시합니다.
TableLayoutPanel 작업
행 및 열 편집 작업을 클릭하여 열 및 행 스타일 창을 표시합니다.Column1을 클릭한 다음 백분율 단추가 선택되어 있는지 확인하고 백분율 상자에 15를 입력하여 크기를 15퍼센트로 설정합니다.이 컨트롤이 이 자습서의 뒷부분에서 사용할 NumericUpDown 컨트롤입니다. Column2를 클릭하고 크기를 85퍼센트로 설정합니다.창이 닫히므로 아직 확인 단추는 클릭하지 않습니다.실수로 창을 닫은 경우 작업 목록을 사용하여 다시 열 수 있습니다.
창의 맨 위에 있는 표시 드롭다운 목록에서 행을 클릭합니다.Row1을 90퍼센트로 설정하고 Row2를 10퍼센트로 설정합니다.
확인을 클릭합니다.이제 TableLayoutPanel에는 큰 위쪽 행, 작은 아래쪽 행, 작은 왼쪽 열, 큰 오른쪽 열이 있습니다.TableLayoutPanel에서 테두리를 끌어 행과 열의 크기를 조정할 수 있습니다.
계속하거나 검토하려면
다음 자습서 단계로 이동하려면 5단계: 폼에 컨트롤 추가를 참조하십시오.
이전 자습서 단계로 돌아가려면 3단계: 폼 속성 설정을 참조하십시오.