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

아티클
08/20/2008

업데이트: 2007년 11월

일부 응용 프로그램에서는 폼의 크기가 변경되거나 내용의 크기가 변경되면 그에 맞게 레이아웃이 적절하게 자동 정렬되는 폼이 필요합니다. 동적 레이아웃이 필요하고 코드에서 Layout 이벤트를 명시적으로 처리하지 않으려는 경우에는 레이아웃 패널을 사용해 보십시오.

FlowLayoutPanel 컨트롤 및 TableLayoutPanel 컨트롤은 간단하게 폼에 컨트롤을 정렬하는 방법을 제공합니다. 두 컨트롤 모두 자식 컨트롤의 상대적 위치를 자동으로 제어하도록 구성할 수 있는 기능을 제공하고 런타임 시 동적 레이아웃 기능을 제공하므로 부모 폼의 크기가 변경되면 자식 컨트롤의 크기를 조정하고 위치를 변경할 수 있습니다. 레이아웃 패널을 레이아웃 패널 내에 중첩하여 복잡한 사용자 인터페이스를 만들 수 있습니다.

TableLayoutPanel은 해당 내용을 모눈에 정렬하며 HTML <table> 요소와 비슷한 기능을 제공합니다. 해당 셀은 행 및 열에 정렬되며 셀의 크기가 다를 수 있습니다. 자세한 내용은 연습: TableLayoutPanel을 사용하여 Windows Forms에서 컨트롤 정렬을 참조하십시오.

FlowLayoutPanel은 해당 내용을 가로 또는 세로 방향으로 정렬합니다. 내용은 한 행에서 다음 행으로 또는 한 열에서 다음 열로 줄 바꿈할 수 있습니다. 또는 내용을 줄 바꿈하지 않고 클리핑할 수 있습니다. 이 연습에서 수행할 작업은 다음과 같습니다.

Windows Forms 프로젝트 만들기
가로 및 세로로 컨트롤 정렬
흐름 방향 변경
흐름 중단 삽입
안쪽 여백 및 여백을 사용하여 컨트롤 정렬
도구 상자의 컨트롤을 두 번 클릭하여 삽입
해당 윤곽선을 그려서 컨트롤 삽입
캐럿을 사용하여 컨트롤 삽입
다른 부모에 기존 컨트롤 다시 할당

작업이 끝나면 이러한 중요한 레이아웃 기능의 역할을 이해할 수 있게 됩니다.

참고:
실제 설정이나 버전에 따라서 화면에 나타나는 대화 상자와 메뉴 명령이 도움말의 설명과 다를 수 있습니다. 설정을 변경하려면 도구 메뉴에서 설정 가져오기 및 내보내기를 선택합니다. 자세한 내용은 Visual Studio 설정을 참조하십시오.

프로젝트 만들기

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

프로젝트를 만들려면

"FlowLayoutPanelExample"이라는 Windows 기반 응용 프로그램 프로젝트를 만듭니다. 자세한 내용은 방법: Windows 응용 프로그램 프로젝트 만들기를 참조하십시오.
폼 디자이너에서 폼을 선택합니다.

가로 및 세로로 컨트롤 정렬

FlowLayoutPanel 컨트롤을 사용하면 개별 컨트롤의 위치를 정확하게 지정하지 않아도 행이나 열에 맞춰 컨트롤을 배치할 수 있습니다.

FlowLayoutPanel 컨트롤은 부모 폼의 크기가 변경되면 자식 컨트롤의 크기를 조정하거나 흐름을 바꿀 수 있습니다.

FlowLayoutPanel을 사용하여 컨트롤을 가로 및 세로로 정렬하려면

도구 상자의 FlowLayoutPanel 컨트롤을 폼으로 끌어 옵니다.
도구 상자의 Button 컨트롤을 FlowLayoutPanel로 끌어 옵니다. 이 컨트롤은 자동으로 FlowLayoutPanel 컨트롤의 왼쪽 위 모퉁이로 이동합니다.
도구 상자의 다른 Button 컨트롤을 FlowLayoutPanel로 끌어 옵니다. Button 컨트롤은 자동으로 첫 번째 Button 컨트롤 옆으로 이동합니다. FlowLayoutPanel이 너무 좁아서 같은 행에 두 개의 컨트롤을 배치할 수 없는 경우 자동으로 새 Button 컨트롤이 다음 행으로 이동합니다.
도구 상자의 여러 Button 컨트롤을 FlowLayoutPanel로 끌어 옵니다. 한 Button 컨트롤이 다음 행으로 줄 바꿈될 때까지 이 컨트롤을 계속 배치합니다.
FlowLayoutPanel 컨트롤의 WrapContents 속성 값을 false로 변경합니다. 자식 컨트롤이 더 이상 다음 행으로 배열되지 않습니다. 대신 첫 번째 행으로 이동하고 클리핑됩니다.
FlowLayoutPanel 컨트롤의 WrapContents 속성 값을 true로 변경합니다. 자식 컨트롤이 다시 다음 행으로 줄 바꿈됩니다.
모든 Button 컨트롤이 첫 번째 열로 이동될 때까지 FlowLayoutPanel 컨트롤의 너비를 줄입니다.
모든 Button 컨트롤이 첫 번째 행으로 이동될 때까지 FlowLayoutPanel 컨트롤의 너비를 늘립니다. 커진 너비에 맞게 폼 크기를 조정해야 할 수 있습니다.

흐름 방향 변경

FlowDirection 속성을 사용하면 컨트롤이 정렬되는 방향을 변경할 수 있습니다. 자식 컨트롤을 왼쪽에서 오른쪽으로, 오른쪽에서 왼쪽으로, 위에서 아래로 또는 아래에서 위로 정렬할 수 있습니다.

FlowLayoutPanel에서 흐름 방향을 변경하려면

FlowLayoutPanel 컨트롤의 FlowDirection 속성 값을 TopDown으로 변경합니다. 자식 컨트롤이 컨트롤의 높이에 따라 하나 이상의 열에 다시 정렬됩니다.
Button의 높이가 열보다 짧도록 FlowLayoutPanel 컨트롤의 열 높이보다 짧도록 조정합니다. FlowLayoutPanel은 자식 컨트롤을 다시 정렬하여 다음 열로 이어지도록 합니다. 높이를 계속해서 줄이고 자식 컨트롤이 연속되는 열로 이어지는지 확인합니다. FlowLayoutPanel 컨트롤의 FlowDirection 속성 값을 RightToLeft로 변경합니다. 자식 컨트롤의 위치가 바뀝니다. FlowDirection 속성 값을 BottomUp으로 변경할 때 레이아웃을 확인합니다.

흐름 중단 삽입

FlowLayoutPanel 컨트롤은 FlowBreak 속성을 해당 자식 컨트롤에 제공합니다. FlowBreak 속성 값을 true로 설정하면 FlowLayoutPanel 컨트롤이 현재 흐름 방향으로 컨트롤의 레이아웃을 지정하는 동작을 중지하고 컨트롤이 다음 행 또는 열로 줄 바꿈합니다.

흐름 중단을 삽입하려면

FlowLayoutPanel 컨트롤의 FlowDirection 속성 값을 TopDown으로 변경합니다.
맨 왼쪽 열의 가운데에 있는 Button 컨트롤 중 하나를 선택합니다.
Button 컨트롤의 FlowBreak 속성 값을 true로 설정합니다. 열이 나누어지고 선택한 Button 컨트롤 다음에 있는 컨트롤이 다음 열로 이어집니다. 원래 동작으로 돌아가려면 Button 컨트롤의 FlowBreak 속성 값을 false로 설정합니다.

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

자식 컨트롤의 도킹 및 고정 동작은 다른 컨테이너 컨트롤의 도킹 및 고정 동작과 다릅니다. 도킹 및 고정 기능 모두 흐름 방향에서 가장 큰 컨트롤에 상대적입니다.

도킹 및 고정 기능을 사용하여 컨트롤 위치를 지정하려면

Button 컨트롤이 열에 모두 정렬될 때까지 FlowLayoutPanel의 크기를 늘립니다.
맨 위 Button 컨트롤을 선택합니다. 너비를 다른 Button 컨트롤 너비의 약 두 배가 되도록 늘립니다.
두 번째 Button 컨트롤을 선택합니다. Anchor 속성의 값을 Right로 변경합니다. 이 컨트롤은 해당 오른쪽 테두리가 첫 번째 Button 컨트롤의 오른쪽 테두리에 맞게 이동합니다.
Anchor 속성의 값을 Right 및 Left로 변경합니다. 이 컨트롤의 너비가 첫 번째 Button 컨트롤의 너비와 같도록 크기 조정됩니다.
세 번째 Button 컨트롤을 선택합니다. Dock 속성의 값을 Fill로 변경합니다. 이 컨트롤의 너비가 첫 번째 Button 컨트롤의 너비와 같도록 크기가 조정됩니다.

안쪽 여백 및 여백을 사용하여 컨트롤 정렬

Padding 및 Margin 속성을 변경하여 사용자의 FlowLayoutPanel 컨트롤에 컨트롤을 정렬할 수도 있습니다.

Padding 속성을 사용하면 FlowLayoutPanel 컨트롤의 셀 내에서 컨트롤 배치를 제어할 수 있습니다. 이 속성은 자식 컨트롤과 FlowLayoutPanel 컨트롤 테두리 사이의 간격을 지정합니다.

Margin 속성을 사용하면 컨트롤 사이의 간격을 제어할 수 있습니다.

안쪽 여백 및 여백 속성을 사용하여 컨트롤을 정렬하려면

FlowLayoutPanel 컨트롤의 Dock 속성 값을 Fill로 변경합니다. 폼이 매우 큰 경우 Button 컨트롤은 FlowLayoutPanel 컨트롤의 첫 번째 열로 이동합니다.
속성 창의 Padding 항목을 확장하고 All 속성을 20으로 설정하여 FlowLayoutPanel 컨트롤의 Padding 속성 값을 변경합니다. 자세한 내용은 연습: Padding, Margins 및 AutoSize 속성을 사용하여 Windows Forms 컨트롤 레이아웃을 참조하십시오. 자식 컨트롤이 FlowLayoutPanel 컨트롤의 가운데로 이동합니다. Padding 속성 값을 늘리면 FlowLayoutPanel 컨트롤의 테두리로부터 자식 컨트롤이 멀어집니다.
FlowLayoutPanel에서 Button 컨트롤을 모두 선택하고 Margin 속성 값을 20으로 설정합니다. Button 컨트롤 사이의 간격이 늘어나므로 컨트롤이 서로 멀어집니다. 자식 컨트롤이 모두 보이도록 FlowLayoutPanel 컨트롤 크기를 더 크게 조정해야 할 수 있습니다.

도구 상자의 컨트롤을 두 번 클릭하여 삽입

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

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

도구 상자에서 Button 컨트롤 아이콘을 두 번 클릭합니다. 새 Button 컨트롤이 FlowLayoutPanel 컨트롤에 나타납니다.
도구 상자에서 여러 개의 컨트롤을 두 번 클릭합니다. 새 컨트롤이 FlowLayoutPanel 컨트롤에 연속해서 나타납니다.

해당 윤곽선을 그려서 컨트롤 삽입

컨트롤을 FlowLayoutPanel 컨트롤에 삽입하고 셀에 윤곽선을 그려서 크기를 지정할 수 있습니다.

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

도구 상자에서 Button 컨트롤 아이콘을 클릭합니다. 이 때 컨트롤을 폼으로 끌어 오지 마십시오.
FlowLayoutPanel 컨트롤 위에 마우스 포인터를 놓습니다. 포인터가 Button 컨트롤 아이콘이 연결된 십자형으로 변경됩니다.
마우스 단추를 클릭한 채로 있습니다.
마우스 포인터를 끌어서 Button 컨트롤의 윤곽선을 그립니다. 원하는 크기가 되면 마우스 단추를 놓습니다. Button 컨트롤이 FlowLayoutPanel 컨트롤의 다음 열린 위치에 만들어집니다.

삽입 막대를 사용하여 컨트롤 삽입

FlowLayoutPanel 컨트롤의 특정 위치에 컨트롤을 삽입할 수 있습니다. 컨트롤을 FlowLayoutPanel 컨트롤의 클라이언트 영역으로 끌어 오면 컨트롤이 삽입될 위치를 표시하는 삽입 막대가 나타납니다.

캐럿을 사용하여 컨트롤을 삽입하려면

도구 상자의 Button 컨트롤을 FlowLayoutPanel 컨트롤로 끌어 오고 두 Button 컨트롤 사이의 간격을 가리킵니다. FlowLayoutPanel 컨트롤로 Button 컨트롤을 끌어 놓으면 해당 컨트롤이 배치될 위치를 나타내는 삽입 막대가 그려집니다. 새 Button 컨트롤을 FlowLayoutPanel 컨트롤로 끌어 놓기 전에 마우스 포인터를 이동하여 삽입 막대 이동 방식을 확인합니다.
새 Button 컨트롤을 FlowLayoutPanel 컨트롤로 끌어 옵니다. 새 Button 컨트롤의 Margin 속성에 다른 값이 있기 때문에 이 새 컨트롤은 다른 컨트롤에 맞춰 정렬되지 않습니다..

다른 부모에 기존 컨트롤 다시 할당

폼에 있는 컨트롤을 새 FlowLayoutPanel 컨트롤에 할당할 수 있습니다.

기존 컨트롤의 부모를 다시 할당하려면

도구 상자의 세 Button 컨트롤을 폼으로 끌어 옵니다. 이들 컨트롤을 서로 가깝게 배치하고 정렬하지는 마십시오.
도구 상자에서 FlowLayoutPanel 컨트롤 아이콘을 클릭합니다. 이 때 컨트롤을 폼으로 끌어 오지 마십시오.
마우스 포인터를 세 Button 컨트롤에 가깝게 이동합니다. 포인터가 FlowLayoutPanel 컨트롤 아이콘이 연결된 십자형으로 변경됩니다.
마우스 단추를 클릭한 채로 있습니다.
마우스 포인터를 끌어 FlowLayoutPanel 컨트롤의 윤곽선을 그립니다. 세 Button 컨트롤 주위에 윤곽선을 그립니다.
마우스 단추를 놓습니다. 세 Button 컨트롤이 FlowLayoutPanel 컨트롤에 삽입됩니다.

다음 단계

레이아웃 패널과 컨트롤을 조합하여 복잡한 레이아웃을 만들 수 있습니다. 다음과 같은 제안을 따르는 것이 좋습니다.

Button 컨트롤 중 하나의 크기를 크게 조정하고 레이아웃에 미치는 영향을 확인합니다.
레이아웃 패널에 다른 레이아웃 패널을 포함할 수 있습니다. TableLayoutPanel 컨트롤을 기존 컨트롤로 끌어 놓아 보십시오.
FlowLayoutPanel 컨트롤을 부모 폼에 도킹합니다. 폼 크기를 조정하고 레이아웃에 미치는 영향을 확인합니다.
컨트롤 중 하나의 Visible 속성을 false로 설정하고 이에 따라 FlowLayoutPanel의 흐름이 바뀌는 방식을 확인합니다.

참고 항목

다음을 통해 공유