컨트롤 위치 및 레이아웃(Windows Forms .NET)

Windows Forms의 컨트롤 배치는 컨트롤뿐만 아니라 컨트롤의 부모에 따라서도 결정됩니다. 이 문서에서는 컨트롤이 제공하는 다양한 설정과 레이아웃에 영향을 주는 다양한 형식의 부모 컨테이너를 설명합니다.

중요

.NET 7 및 .NET 6에 관한 데스크톱 가이드 설명서는 제작 중입니다.

고정 위치 및 크기

컨트롤이 부모에 표시되는 위치는 부모 화면의 왼쪽 위를 기준으로 하는 Location 속성 값에 따라 결정됩니다. 부모의 왼쪽 위 위치 좌표는 (x0,y0)입니다. 컨트롤 크기는 Size 속성으로 결정되며 컨트롤의 너비와 높이를 나타냅니다.

컨테이너를 기준으로 하는 컨트롤 위치

자동 배치를 적용하는 부모에 컨트롤을 추가하면 컨트롤의 위치 및 크기가 변경됩니다. 이 경우 부모 형식에 따라 컨트롤의 위치와 크기를 수동으로 조정하지 못할 수 있습니다.

MaximumSizeMinimumSize 속성은 컨트롤이 사용할 수 있는 최소 및 최대 공간을 설정하는 데 도움이 됩니다.

여백 및 안쪽 여백

컨트롤의 정확한 배치에 도움이 되는 두 가지 컨트롤 속성(MarginPadding)이 있습니다.

Margin 속성은 다른 컨트롤을 컨트롤의 테두리에서 지정된 거리에 유지하는 컨트롤 주위의 공간을 정의합니다.

Padding 속성은 컨트롤의 내용(예: Text 속성의 값)을 컨트롤의 테두리에서 지정된 거리에 유지하는 컨트롤 내부의 공간을 정의합니다.

다음 그림에서는 컨트롤의 MarginPadding 속성을 보여 줍니다.

Windows Forms 컨트롤을 위한 안쪽 여백 및 여백 속성

Visual Studio 디자이너는 컨트롤의 위치를 지정하고 크기를 조정할 때 이러한 속성을 적용합니다. 맞춤선은 지정된 컨트롤의 여백 밖에 머물 수 있도록 안내선으로 나타납니다. 예를 들어, Visual Studio는 컨트롤을 다른 컨트롤 옆으로 끌 때 맞춤선을 표시합니다.

Visual Studio의 Windows Forms .NET에 대한 여백 속성이 있는 맞춤선을 보여주는 애니메이션 이미지

자동 배치 및 크기

컨트롤은 부모 내에 자동으로 배치될 수 있습니다. 일부 부모 컨테이너는 배치를 적용하는 반면, 다른 부모 컨테이너는 배치를 안내하는 컨트롤 설정을 적용합니다. 부모 내에서 자동 배치 및 크기를 도와주는 컨트롤의 두 가지 속성은 DockAnchor입니다.

그리기 순서는 자동 배치에 영향을 줄 수 있습니다. 컨트롤이 그려지는 순서는 부모의 Controls 컬렉션에 있는 컨트롤 인덱스에 따라 결정됩니다. 이 인덱스를 Z-order 라고 합니다. 각 컨트롤은 컬렉션에 표시되는 역순으로 그려집니다. 즉, 컬렉션은 첫 번째 입력이 마지막으로 그려지고 마지막 입력이 첫 번째로 그려지는 컬렉션입니다.

MinimumSizeMaximumSize 속성은 컨트롤이 사용할 수 있는 최소 및 최대 공간을 설정하는 데 도움이 됩니다.

도킹

Dock 속성은 부모의 해당하는 면에 맞춰지는 컨트롤의 테두리를 설정하고 부모 내에서 컨트롤 크기를 조정하는 방법을 설정합니다.

도킹 설정을 포함하는 단추가 있는 Windows 양식

컨트롤이 고정되면 컨테이너는 해당 컨트롤이 사용하는 공간을 결정하고, 컨트롤 크기를 조정하고, 컨트롤을 배치합니다. 컨트롤의 너비와 높이는 계속 도킹 스타일에 따라 적용됩니다. 예를 들어 컨트롤이 위쪽에 고정되면 컨트롤의 Height이 적용되지만 Width는 자동으로 조정됩니다. 컨트롤이 왼쪽에 고정되면 컨트롤의 Width가 적용되지만 Height는 자동으로 조정됩니다.

컨트롤을 고정하면 해당 위치가 자동으로 제어되므로 컨트롤의 Location은 수동으로 설정할 수 없습니다.

컨트롤의 Z-order 는 도킹에 영향을 줍니다. 고정된 컨트롤은 배치될 때 사용 가능한 공간을 사용합니다. 예를 들어 먼저 그려지고 위쪽에 고정되는 컨트롤은 컨테이너의 전체 너비를 사용합니다. 다음 컨트롤이 왼쪽에 고정되면 사용 가능한 세로 공간이 줄어듭니다.

왼쪽 및 위쪽에 고정된 단추가 있는 Windows 양식(위쪽이 더 큼)

컨트롤의 Z-order 를 반전시키면 이제 왼쪽에 고정된 컨트롤이 더 많은 초기 공간을 사용할 수 있습니다. 컨트롤은 컨테이너의 전체 높이를 사용합니다. 위쪽에 고정된 컨트롤은 사용할 수 있는 가로 공간이 줄어듭니다.

왼쪽 및 위쪽에 고정된 단추가 있는 Windows 양식(위쪽이 더 큼)

컨테이너가 커지거나 줄어들 때 컨테이너에 고정된 컨트롤은 적용 가능한 위치와 크기를 유지하도록 위치 및 크기가 조정됩니다.

모든 위치에서 단추가 고정된 Windows 양식의 크기가 어떻게 조정되는지 보여 주는 애니메이션

여러 컨트롤이 컨테이너의 동일한 면에 고정되는 경우 Z-order 에 따라 배치됩니다.

왼쪽에 고정된 두 개의 단추가 있는 Windows 양식

앵커

컨트롤을 고정하면 부모 컨테이너에서 하나 이상의 면에 컨트롤을 연결할 수 있습니다. 컨테이너 크기가 변경되면 모든 자식 컨트롤은 고정된 면에 대한 거리를 유지합니다.

컨트롤은 제한 없이 하나 이상의 면에 고정될 수 있습니다. 앵커는 Anchor 속성을 사용하여 설정됩니다.

모든 위치에서 단추가 고정된 Windows 양식의 크기가 어떻게 조정되는지 보여 주는 애니메이션

자동 크기 조정

AutoSize 속성을 사용하면 PreferredSize 속성으로 지정된 크기에 맞게 컨트롤 크기를 변경할 수 있습니다. AutoSizeMode 속성을 설정하여 특정 컨트롤의 크기 조정 동작을 조정합니다.

일부 컨트롤만이 AutoSize 속성을 지원합니다. 또한 AutoSize 속성을 지원하는 일부 컨트롤은 AutoSizeMode 속성도 지원합니다.

항상 true 동작 Description
자동 크기 조정은 런타임 기능입니다. 즉, 컨트롤이 커지거나 줄어들지 않으므로 추가로 영향을 주지 않습니다.
컨트롤 크기가 변경되면 Location 속성 값은 항상 일정하게 유지됩니다. 컨트롤의 콘텐츠가 커지면 컨트롤은 오른쪽 및 아래쪽으로 커집니다. 컨트롤은 왼쪽으로 커지지 않습니다.
DockAnchor 속성은 AutoSizetrue인 경우 적용됩니다. 컨트롤의 Location 속성 값은 올바른 값으로 조정됩니다.

Label 컨트롤은 이 규칙의 예외입니다. 고정된 Label 컨트롤의 AutoSize 속성 값을 true로 설정하면 Label 컨트롤이 늘어나지 않습니다.
컨트롤의 MaximumSizeMinimumSize 속성은 AutoSize 속성 값에 관계없이 항상 적용됩니다. MaximumSizeMinimumSize 속성은 AutoSize 속성의 영향을 받지 않습니다.
기본적으로 설정되는 최소 크기는 없습니다. 즉, AutoSize에서 컨트롤이 줄어들도록 설정되고 컨트롤에 콘텐츠가 없는 경우 Size 속성 값은 (0x,0y)입니다. 이 경우 컨트롤은 특정 지점으로 줄어들고 쉽게 보이지 않습니다.
컨트롤이 GetPreferredSize 메서드를 구현하지 않는 경우 GetPreferredSize 메서드는 Size 속성에 할당된 마지막 값을 반환합니다. 즉, AutoSizetrue로 설정해도 영향을 주지 않습니다.
TableLayoutPanel 셀의 컨트롤은 MinimumSize에 도달할 때까지 항상 셀에 맞게 줄어듭니다. 이 크기는 최대 크기로 적용됩니다. 이는 셀이 AutoSize 행 또는 열의 일부인 경우가 아닙니다.

AutoSizeMode 속성

AutoSizeMode 속성은 기본 AutoSize 동작에 대한 보다 세분화된 컨트롤을 제공합니다. AutoSizeMode 속성은 컨트롤이 콘텐츠에 맞게 크기를 조정하는 방법을 지정합니다. 예를 들어, 콘텐츠는 Button 컨트롤의 텍스트이거나 컨테이너의 자식 컨트롤일 수 있습니다.

다음 목록은 AutoSizeMode 값 및 해당 동작을 보여 줍니다.

  • AutoSizeMode.GrowAndShrink

    컨트롤은 콘텐츠를 포함하도록 확장되거나 축소됩니다.

    MinimumSizeMaximumSize 값은 적용되지만, Size 속성의 현재 값은 무시됩니다.

    이는 AutoSize 속성이 있고 AutoSizeMode 속성이 없는 컨트롤과 동일한 동작입니다.

  • AutoSizeMode.GrowOnly

    이 컨트롤은 콘텐츠를 포함하도록 필요한 만큼 확장되지만, Size 속성으로 지정된 값보다 작게 축소되지는 않습니다.

    AutoSizeMode의 기본값입니다.

AutoSize 속성을 지원하는 컨트롤

다음 표에서는 컨트롤별 자동 크기 조정 지원 수준을 설명합니다.

제어 AutoSize 지원됨 AutoSizeMode 지원됨
Button ✔️ ✔️
CheckedListBox ✔️ ✔️
FlowLayoutPanel ✔️ ✔️
Form ✔️ ✔️
GroupBox ✔️ ✔️
Panel ✔️ ✔️
TableLayoutPanel ✔️ ✔️
CheckBox ✔️
DomainUpDown ✔️
Label ✔️
LinkLabel ✔️
MaskedTextBox ✔️
NumericUpDown ✔️
RadioButton ✔️
TextBox ✔️
TrackBar ✔️
CheckedListBox
ComboBox
DataGridView
DateTimePicker
ListBox
ListView
MaskedTextBox
MonthCalendar
ProgressBar
PropertyGrid
RichTextBox
SplitContainer
TabControl
TabPage
TreeView
WebBrowser
ScrollBar

디자인 환경의 AutoSize

다음 표에서는 AutoSizeAutoSizeMode 속성의 값을 기반으로 디자인 타임에 컨트롤의 크기 조정 동작을 설명합니다.

SelectionRules 속성을 재정의하여 지정된 컨트롤이 사용자 크기 조정 가능한 상태인지 여부를 확인합니다. 다음 표에서 "크기를 조정할 수 없습니다"는 Moveable만 의미하며 "크기를 조정할 수 있습니다"는 AllSizeableMoveable을 의미합니다.

AutoSize 설정 AutoSizeMode 설정 동작
true 속성을 사용할 수 없습니다. 사용자는 다음 컨트롤을 제외하고 디자인 타임에 컨트롤의 크기를 조정할 수 없습니다.

- TextBox
- MaskedTextBox
- RichTextBox
- TrackBar
true GrowAndShrink 사용자가 디자인 타임에 컨트롤의 크기를 조정할 수 없습니다.
true GrowOnly 사용자가 디자인 타임에 컨트롤의 크기를 조정할 수 있습니다. Size 속성이 설정되면 사용자는 컨트롤의 크기만 늘릴 수 있습니다.
false 또는 AutoSize 숨김 해당 사항 없음 사용자가 디자인 타임에 컨트롤의 크기를 조정할 수 있습니다.

참고

생산성을 최대화하기 위해 Visual Studio의 Windows Forms 디자이너는 Form 클래스의 AutoSize 속성을 숨깁니다. 디자인 타임에 양식은 실제 설정과 상관 없이 AutoSize 속성이 false로 설정된 것처럼 동작합니다. 런타임에는 특별한 조정이 이루어지지 않으며 AutoSize 속성은 속성 설정에 지정된 대로 적용됩니다.

컨테이너: Form

Form은 Windows Forms의 기본 개체입니다. Windows Forms 애플리케이션은 일반적으로 항상 양식을 표시합니다. 양식은 컨트롤을 포함하며 수동 배치를 위해 컨트롤의 LocationSize 속성을 적용합니다. 양식은 자동 배치를 위해 Dock 속성에도 응답합니다.

대부분의 경우 사용자가 양식 크기를 조정할 수 있는 그립이 양식의 가장자리에 있습니다. 컨트롤의 Anchor 속성을 사용하면 양식 크기를 조정할 때 컨트롤 크기가 커지거나 줄어들 수 있습니다.

컨테이너: 패널

Panel 컨트롤은 컨트롤을 그룹화한다는 점에서 양식과 비슷합니다. 해당 컨트롤은 양식이 수행하는 것과 동일한 수동 및 자동 배치 스타일을 지원합니다. 자세한 내용은 컨테이너: 양식 섹션을 참조하세요.

패널은 부모와 매끄럽게 혼합되며 패널 경계를 벗어나는 컨트롤의 모든 영역을 잘라냅니다. 컨트롤이 패널 경계를 벗어나고 AutoScrolltrue로 설정된 경우 스크롤 막대가 표시되고 사용자가 패널을 스크롤할 수 있습니다.

그룹 상자 컨트롤과 달리 패널에는 캡션과 테두리가 없습니다.

패널 및 그룹 상자가 있는 Windows 양식

위 이미지에는 패널 경계를 보여 주기 위해 BorderStyle 속성이 설정된 패널이 있습니다.

컨테이너: 그룹 상자

GroupBox 컨트롤은 다른 컨트롤에 대한 식별 가능한 그룹화를 제공합니다. 일반적으로 그룹 상자를 사용하여 기능별로 양식을 나눕니다. 예를 들어 개인 정보를 나타내는 양식이 있을 수 있으며 주소와 관련된 필드는 그룹화됩니다. 디자인 타임에 포함된 컨트롤과 함께 그룹 상자를 쉽게 이동할 수 있습니다.

그룹 상자는 양식이 수행하는 것과 동일한 수동 및 자동 배치 스타일을 지원합니다. 자세한 내용은 컨테이너: 양식 섹션을 참조하세요. 또한 그룹 상자는 패널 경계를 벗어나는 컨트롤의 모든 부분을 잘라냅니다.

패널 컨트롤과 달리 그룹 상자에는 콘텐츠를 스크롤하고 스크롤 막대를 표시하는 기능이 없습니다.

패널 및 그룹 상자가 있는 Windows 양식

컨테이너: 선형 레이아웃

FlowLayoutPanel 컨트롤은 가로 또는 세로 흐름 방향으로 콘텐츠를 정렬합니다. 컨트롤의 내용을 한 행에서 다음 행으로 또는 한 열에서 다음 열로 줄 바꿈할 수 있습니다. 또는 해당 내용을 줄 바꿈하는 대신 잘라낼 수 있습니다.

FlowDirection 속성의 값을 설정하여 흐름 방향을 지정할 수 있습니다. FlowLayoutPanel 컨트롤은 RTL(오른쪽에서 왼쪽) 레이아웃에서 흐름 방향을 올바르게 반대로 바꿉니다. WrapContents 속성의 값을 설정하여 FlowLayoutPanel 컨트롤의 내용을 줄 바꿈할지 또는 잘라낼지 지정할 수도 있습니다.

AutoSize 속성을 true로 설정하면 FlowLayoutPanel 컨트롤이 해당 내용에 맞게 자동으로 크기를 조정합니다. 또한 자식 컨트롤에 FlowBreak 속성을 제공합니다. 값을 설정 합니다 FlowBreak 속성을 true 하면는 FlowLayoutPanel 현재 흐름 방향 및 다음 행 또는 열으로 줄 바꿈에서 컨트롤 레이아웃을 중지 하는 컨트롤입니다.

두 개의 흐름 패널 컨트롤이 있는 Windows 양식

위 이미지에는 패널 경계를 보여 주기 위해 BorderStyle 속성이 설정된 두 개의 FlowLayoutPanel 컨트롤이 있습니다.

컨테이너: 표 레이아웃

TableLayoutPanel 컨트롤은 콘텐츠를 표로 정렬합니다. 레이아웃이 디자인 타임과 런타임에 모두 수행되므로 애플리케이션 환경이 변경되면 동적으로 변경될 수 있습니다. 따라서 패널의 컨트롤이 비례적으로 크기를 조정할 수 있으므로 지역화로 인한 부모 컨트롤 크기 조정이나 텍스트 길이 변경과 같은 변경 내용에 응답할 수 있습니다.

Windows Forms 컨트롤은 TableLayoutPanel의 다른 인스턴스를 포함하여 TableLayoutPanel 컨트롤의 자식일 수 있습니다. 따라서 런타임에 변경 내용에 맞게 조정되는 정교한 레이아웃을 생성할 수 있습니다.

TableLayoutPanel 컨트롤이 자식 컨트롤로 가득 찬 후 확장 방향(가로 또는 세로)을 제어할 수도 있습니다. 기본적으로 TableLayoutPanel 컨트롤은 행을 추가하여 아래로 확장됩니다.

RowStylesColumnStyles 속성을 사용하여 행 및 열의 크기와 스타일을 제어할 수 있습니다. 행 또는 열의 속성을 개별적으로 설정할 수 있습니다.

TableLayoutPanel 컨트롤은 자식 컨트롤 Cell, Column, Row, ColumnSpanRowSpan에 다음 속성을 추가합니다.

표 레이아웃 컨트롤이 있는 Windows 양식

위 이미지에는 각 셀의 경계를 보여 주기 위해 CellBorderStyle 속성이 설정된 표가 있습니다.

컨테이너: 분할 컨테이너

Windows Forms SplitContainer 컨트롤은 복합 컨트롤로 간주할 수 있으며 이동 가능한 막대로 구분된 두 개의 패널입니다. 마우스 포인터가 막대 위에 있으면 포인터 모양이 변경되어 막대를 이동할 수 있음을 표시합니다.

SplitContainer 컨트롤을 통해 복잡한 사용자 인터페이스를 만들 수 있습니다. 한 패널에서 선택한 항목에 따라 다른 패널에 표시되는 개체가 결정되는 경우도 많습니다. 해당 정렬은 정보를 표시하고 찾는 데 효과적입니다. 두 개의 패널이 있으므로 영역의 정보를 집계할 수 있으며, 막대 또는 “분할기”를 통해 사용자가 쉽게 패널 크기를 조정할 수 있습니다.

중첩된 분할 컨테이너가 있는 Windows 양식

위 이미지에는 왼쪽 및 오른쪽 창을 만드는 분할 컨테이너가 있습니다. 오른쪽 창에는 OrientationVertical로 설정된 두 번째 분할 컨테이너가 있습니다. 각 패널의 범위를 보여 주기 위해 BorderStyle 속성이 설정됩니다.

컨테이너: 탭 컨트롤

TabControl은 파일 캐비닛의 폴더 세트에 Notebook 또는 레이블의 구분선과 같은 여러 탭을 표시합니다. 탭에는 사진 및 기타 컨트롤이 포함될 수 있습니다. 탭 컨트롤을 사용하여 Windows 운영 체제에서 제어판 및 디스플레이 속성과 같은 다양한 위치를 표시하는 다중 페이지 대화 상자를 생성합니다. 또한 TabControl을 사용하여 관련 속성 그룹을 설정하는 데 사용되는 속성 페이지를 만들 수 있습니다.

TabControl의 가장 중요한 속성은 개별 탭이 포함된 TabPages입니다. 각 개별 탭은 TabPage 개체입니다.

두 개의 탭 페이지가 포함된 탭 컨트롤이 있는 Windows 양식