연습: TableLayoutPanel을 사용하여 Windows Forms에서 컨트롤 정렬

아티클
05/04/2023

일부 애플리케이션에는 폼 크기가 조정되거나 내용의 크기가 변경될 때 적절하게 정렬되는 레이아웃을 가진 폼이 필요합니다. 동적 레이아웃이 필요하며 코드에서 명시적으로 Layout 이벤트를 처리하지 않으려는 경우 레이아웃 패널을 사용하는 것이 좋습니다.

FlowLayoutPanel 컨트롤 및 TableLayoutPanel 컨트롤은 폼에서 컨트롤을 정렬하는 직관적인 방법을 제공합니다. 둘 다 포함된 자식 컨트롤의 상대 위치를 제어하는 구성 가능한 자동 기능을 제공하며, 둘 다 런타임에 동적 레이아웃 기능을 제공하므로 부모 폼의 크기가 변경될 때 자식 컨트롤의 크기를 조정하고 위치를 변경할 수 있습니다. 레이아웃 패널을 레이아웃 패널 내에 중첩하여 정교한 사용자 인터페이스를 구현할 수 있습니다.

FlowLayoutPanel 은 특정 흐름 방향(수평 또는 수직)으로 내용을 정렬합니다. 컨트롤 내용을 한 행에서 다음 행으로 또는 한 열에서 다음 열로 줄 바꿈할 수 있습니다. 또는 컨트롤 내용이 줄 바꿈되는 대신 잘릴 수 있습니다. 자세한 내용은 연습: FlowLayoutPanel을 사용하여 Windows Forms에서 컨트롤 정렬을 참조하세요.

TableLayoutPanel은 그리드에서 콘텐츠를 정렬하여 HTML <table> 요소와 유사한 기능을 제공합니다. TableLayoutPanel 컨트롤을 사용하면 각 개별 컨트롤의 위치를 정확하게 지정하지 않고 그리드 레이아웃에 컨트롤을 배치할 수 있습니다. 해당 셀은 행과 열로 정렬되며 크기가 서로 다를 수 있습니다. 행과 열 간에 셀을 병합할 수 있습니다. 셀은 양식이 포함할 수 있는 모든 것을 포함할 수 있으며 대부분의 다른 면에서 컨테이너로서 동작할 수 있습니다.

또한 TableLayoutPanel 컨트롤은 런타임에 비례에 맞게 크기를 조정하는 기능을 제공하므로 양식의 크기가 조정될 때 레이아웃이 원활하게 변경될 수 있습니다. 그래서 TableLayoutPanel 컨트롤은 데이터 입력 양식 및 지역화된 애플리케이션과 같은 용도에 적합합니다. 자세한 내용은 연습: 데이터를 입력할 수 있는 크기 조정 가능한 Windows Form 만들기 및 연습: 지역화 가능한 Windows 양식 만들기를 참조하세요.

일반적으로 전체 레이아웃에 대한 컨테이너로 TableLayoutPanel 컨트롤을 사용하면 안 됩니다. TableLayoutPanel 컨트롤을 사용하여 레이아웃의 일부에 비례 크기 조정 기능을 제공합니다.

이 연습에서 설명하는 작업은 다음과 같습니다.

Windows Forms 프로젝트 만들기
행 및 열에서 컨트롤 정렬
행 및 열 속성 설정
컨트롤을 사용하여 행 및 열 확장
오버플로 자동 처리
도구 상자에서 두 번 클릭하여 컨트롤 삽입
윤곽선을 그려 컨트롤 삽입
다른 부모에 기존 컨트롤 다시 할당

작업을 완료하면 이러한 중요한 레이아웃 기능이 수행하는 역할을 이해하게 됩니다.

프로젝트 만들기

첫 번째 단계는 프로젝트를 만들고 폼을 설정하는 것입니다.

프로젝트를 만들려면

“TableLayoutPanelExample”이라는 Windows 애플리케이션 프로젝트를 만듭니다. 자세한 내용은 방법: Windows Forms 애플리케이션 프로젝트 만들기를 참조하세요.
WindowsForms 디자이너에서 양식을 선택합니다.

행 및 열에서 컨트롤 정렬

TableLayoutPanel 컨트롤을 사용하면 컨트롤을 행과 열로 쉽게 정렬할 수 있습니다.

TableLayoutPanel을 사용하여 행 및 열에서 컨트롤을 정렬하려면

TableLayoutPanel 도구 상자 에서 컨트롤을 폼으로 끌어다 놓습니다. 기본적으로 TableLayoutPanel 컨트롤에는 4개의 셀이 있습니다.
Button 컨트롤을 도구 상자에서 TableLayoutPanel 컨트롤로 끌어서 셀 중 하나에 놓습니다. Button 컨트롤이 선택한 셀 내에 만들어집니다.
Button 컨트롤을 세 개 더 도구 상자에서 TableLayoutPanel 컨트롤로 끌어서 각 셀에 단추가 포함되도록 합니다.
두 열 사이의 세로 크기 조정 핸들을 잡고 왼쪽으로 이동합니다. 첫 번째 열의 Button 컨트롤 크기는 더 작은 너비로 조정되지만 두 번째 열의 Button 컨트롤 크기는 변경되지 않습니다.
두 열 사이의 세로 크기 조정 핸들을 잡고 오른쪽으로 이동합니다. 첫 번째 열의 Button 컨트롤은 원래 크기로 돌아가고 두 번째 열의 Button 컨트롤은 오른쪽으로 이동합니다.
가로 크기 조정 핸들을 위아래로 이동하여 패널의 컨트롤에 미치는 영향을 확인합니다.

도킹 및 고정 기능을 사용하여 셀 내에서 컨트롤 위치 지정

TableLayoutPanel에서 자식 컨트롤의 고정 동작은 다른 컨테이너 컨트롤에서의 동작과 다릅니다. 자식 컨트롤의 도킹 동작은 다른 컨테이너 컨트롤과 동일합니다.

셀 내의 컨트롤 위치 지정

첫 번째 Button 컨트롤을 선택합니다. Dock 속성의 값을 Fill로 변경합니다. Button 컨트롤이 확장하여 셀을 채웁니다.
다른 Button 컨트롤 중 하나를 선택합니다. Anchor 속성의 값을 Right로 변경합니다. 이동되어 오른쪽 경계가 셀의 오른쪽 경계에 근접합니다. 테두리 사이의 거리는 Button 컨트롤의 Margin와 패널의 Padding 속성의 합계입니다.
Button 컨트롤의 Anchor 속성 값을 Right 및 Left로 변경합니다. 컨트롤의 크기는 셀의 너비에 맞게 조정되며 Margin 및 Padding 값을 고려합니다.
Top 및 Bottom 스타일로 2단계와 3단계를 반복합니다.

행 및 열 속성 설정

RowStyles 및 ColumnStyles 컬렉션을 사용하여 행 및 열의 개별 속성을 설정할 수 있습니다.

행 및 열 속성을 설정하려면

Windows Forms 디자이너에서 TableLayoutPanel 컨트롤을 선택합니다.
속성 창에서 열 항목 옆에 있는 줄임표() 단추를 클릭하여 ColumnStyles 컬렉션 편집기를 엽니다.
첫 번째 열을 선택하고 해당 SizeType 속성의 값을 AutoSize로 변경합니다. 확인을 클릭하여 변경 내용을 적용합니다. 첫 번째 열의 너비가 Button 컨트롤에 맞게 줄어듭니다. 또한 열의 너비는 크기 조정을 할 수 없습니다.
속성 창에서 ColumnStyles 컬렉션을 열고 첫 번째 열을 선택합니다. SizeType 속성의 값을 Percent로 변경합니다. 확인을 클릭하여 변경 내용을 적용합니다. TableLayoutPanel 컨트롤의 크기를 더 큰 너비로 조정하면 첫 번째 열의 너비가 확장됩니다. TableLayoutPanel 컨트롤의 크기를 더 작은 너비로 조정하면 첫 번째 열의 단추 크기가 셀에 맞게 조정됩니다. 또한 열의 너비는 크기 조정을 할 수 있습니다.
속성 창에서 ColumnStyles 컬렉션을 열고 나열된 모든 열을 선택합니다. 모든 SizeType 속성의 값을 Percent로 설정합니다. 확인을 클릭하여 변경 내용을 적용합니다. RowStyles 컬렉션을 사용하여 반복합니다.
모서리 크기 조정 핸들 중 하나를 잡고 TableLayoutPanel 컨트롤의 너비와 높이를 모두 조정합니다. TableLayoutPanel 컨트롤의 크기가 변경되면 행과 열의 크기가 조정됩니다. 또한 행과 열은 가로 및 세로 크기 조정 핸들을 사용하여 크기를 조정할 수 있습니다.

컨트롤을 사용하여 행 및 열 확장

TableLayoutPanel 컨트롤은 디자인 타임에 컨트롤에 몇 가지 새 속성을 추가합니다. 이러한 속성에는 RowSpan 및 ColumnSpan이 있습니다. 이러한 속성을 사용하여 컨트롤이 두 개 이상의 행 또는 열을 확장하도록 만들 수 있습니다.

컨트롤을 사용하여 행과 열을 확장하려면

첫 번째 행과 첫 번째 열에서 Button 컨트롤을 선택합니다.
속성 창에서 ColumnSpan 속성의 값을 2로 변경합니다. Button 컨트롤은 첫 번째 열과 두 번째 열을 채웁니다. 또한 이 변경 내용에 맞게 추가 행이 추가되었습니다.
RowSpan 속성에 대해 2단계를 반복합니다.

도구 상자에서 두 번 클릭하여 컨트롤 삽입

TableLayoutPanel 도구 상자 에서 컨트롤을 두 번 클릭하여컨트롤을 채울 수 있습니다.

도구 상자에서 두 번 클릭하여 컨트롤을 삽입하려면

TableLayoutPanel 도구 상자 에서 컨트롤을 폼으로 끌어다 놓습니다.
Button 도구 상자 에서컨트롤 아이콘을 두 번 클릭합니다. TableLayoutPanel 컨트롤의 첫 번째 셀에 새 단추 컨트롤이 나타납니다.
도구 상자에서 컨트롤을 몇 개 더 두 번 클릭합니다. 새 컨트롤이 TableLayoutPanel 컨트롤의 점유되지 않은 셀에 연속해서 표시됩니다. 또한 열려 있는 셀이 없는 경우 새 컨트롤을 수용하도록 TableLayoutPanel 컨트롤이 확장됩니다.

오버플로 자동 처리

TableLayoutPanel 컨트롤에 컨트롤을 삽입할 때 새 컨트롤을 위한 빈 셀이 부족할 수 있습니다. TableLayoutPanel 컨트롤은 셀 수를 늘려 이 상황을 자동으로 처리합니다.

오버플로 자동 처리를 관찰하려면

TableLayoutPanel 컨트롤에 빈 셀이 있는 경우 TableLayoutPanel 컨트롤이 가득 찰 때까지 새 Button 컨트롤을 계속 삽입합니다.
TableLayoutPanel 컨트롤이 가득 차면 도구 상자에서 Button 아이콘을 두 번 클릭하여 다른 Button 컨트롤을 삽입합니다. TableLayoutPanel 컨트롤은 새 컨트롤을 수용할 새 셀을 만듭니다. 몇 개의 컨트롤을 더 삽입하고 크기 조정 동작을 관찰합니다.
TableLayoutPanel 컨트롤의 GrowStyle 속성 값을 FixedSize로 변경합니다. 도구 상자에서 Button 아이콘을 두 번 클릭하여 TableLayoutPanel 컨트롤이 가득 찰 때까지 Button 컨트롤을 삽입합니다. 도구 상자에서 Button 아이콘을 다시 두 번 클릭합니다. Windows Forms 디자이너에서 추가 행과 열을 만들 수 없음을 알리는 오류 메시지가 수신하게 됩니다.

윤곽선을 그려 컨트롤 삽입

TableLayoutPanel 컨트롤에 컨트롤을 삽입하고 셀에서 해당 윤곽선을 그려 크기를 지정합니다.

윤곽선을 그려 컨트롤을 삽입하려면

TableLayoutPanel 도구 상자 에서 컨트롤을 폼으로 끌어다 놓습니다.
도구 상자에서 Button 컨트롤 아이콘을 클릭합니다. 폼으로 끌어다 놓지 마세요.
마우스 포인터를 TableLayoutPanel 컨트롤 위로 이동합니다. 포인터가 Button 컨트롤 아이콘이 연결된 십자형으로 바뀝니다.
마우스 단추를 길게 클릭합니다.
마우스 포인터를 끌어 Button 컨트롤의 윤곽선을 그립니다. 원하는 크기가 되면 마우스 단추를 놓습니다. 컨트롤의 윤곽선을 그린 셀에 Button 컨트롤이 만들어집니다.

셀 내의 여러 개의 컨트롤이 허용되지 않음

TableLayoutPanel 컨트롤은 셀당 하나의 자식 컨트롤만 포함할 수 있습니다.

셀 내의 여러 컨트롤이 허용되지 않음을 보여 주려면

Button 컨트롤을 도구 상자에서 TableLayoutPanel 컨트롤로 끌어서 점유된 셀 중 하나에 놓습니다. TableLayoutPanel 컨트롤에서는 Button 컨트롤을 점유된 셀에 놓을 수 없습니다.

컨트롤 교환

TableLayoutPanel 컨트롤을 사용하면 두 개의 서로 다른 셀을 점유하는 컨트롤을 교환할 수 있습니다.

컨트롤을 교환하려면

점유된 셀에서 Button 컨트롤 중 하나를 끌어서 다른 점유된 셀로 놓습니다. 두 컨트롤은 한 셀에서 다른 셀로 이동됩니다.

다음 단계

레이아웃 패널 및 컨트롤의 조합을 사용하여 복잡한 레이아웃을 얻을 수 있습니다. 다음을 추가로 살펴볼 수 있습니다.

Button 컨트롤 중 하나의 크기를 더 크게 조정하고 레이아웃에 미치는 영향을 확인합니다.
TableLayoutPanel 컨트롤에 여러 컨트롤을 선택하여 붙여넣고 컨트롤이 삽입되는 방법을 확인합니다.
레이아웃 패널에 다른 레이아웃 패널을 포함할 수 있습니다. TableLayoutPanel 컨트롤을 기존 컨트롤에 끌어다 놓습니다.
TableLayoutPanel 컨트롤을 부모 폼에 도킹합니다. 폼의 크기를 조정하고 레이아웃에 미치는 영향을 확인합니다.