연습: 데이터를 입력할 수 있는 크기 조정 가능한 Windows Form 만들기

아티클
08/09/2011

정확하게 크기를 조정하는 폼에서는 사용자 인터페이스의 사용 가능성을 향상시킬 수 있습니다.

이 연습에서는 사용자가 폼의 크기를 조정할 때 비율에 맞게 조정하는 레이아웃을 만드는 방법을 설명하고 TableLayoutPanel 컨트롤을 사용하여 연락처 정보에 대한 데이터 입력 폼을 구현합니다.

이 연습에서 수행할 작업은 다음과 같습니다.

프로젝트 만들기
레이아웃 패널 만들기
레이아웃 모눈 설정
이름 필드 만들기
주소 필드 만들기
전화 번호 필드 만들기
메모 필드 만들기

작업이 끝나면 다음과 같은 폼이 만들어집니다.

TableLayoutPanel이 있는 기본 데이터 입력 폼

이 항목의 코드를 단일 목록으로 복사하려면 방법: 데이터를 입력할 수 있는 크기 조정 가능한 Windows Form 만들기를 참조하십시오.

참고

표시되는 대화 상자와 메뉴 명령은 활성 설정이나 버전에 따라 도움말에서 설명하는 것과 다를 수 있습니다. 설정을 변경하려면 도구 메뉴에서 설정 가져오기 및 내보내기를 선택합니다. 자세한 내용은 설정에 대한 작업을 참조하십시오.

사전 요구 사항

이 연습을 완료하려면 다음과 같은 요건이 필요합니다.

Visual Studio가 설치된 컴퓨터에서 Windows Forms 응용 프로그램 프로젝트를 만들고 실행할 수 있는 권한

프로젝트 만들기

첫 번째 단계는 응용 프로그램 프로젝트를 만드는 것입니다. 이 프로젝트를 사용하여 데이터 입력 폼을 표시하는 응용 프로그램을 빌드합니다.

프로젝트를 만들려면

DemoDataEntryLayout이라는 Windows 응용 프로그램 프로젝트를 만듭니다. 자세한 내용은 방법: 새 Windows Forms 응용 프로그램 프로젝트 만들기를 참조하십시오.

레이아웃 패널 만들기

다음 단계에서 크기를 조정할 수 있는 레이아웃을 포함하는 레이아웃 패널을 만듭니다.

레이아웃 패널을 만들려면

폼 디자이너에서 폼을 선택합니다.
도구 상자에서 TableLayoutPanel 컨트롤을 폼으로 끌어 옵니다.
속성 창에서 TableLayoutPanel 컨트롤의 Dock 속성 값을 Fill로 변경합니다.
ColumnCount 속성 값을 4로 변경하고 RowCount 속성 값을 6으로 변경합니다.

레이아웃 모눈 설정

다음 단계에서는 레이아웃 모눈을 지정합니다. ColumnStyles 및 RowStyles 컬렉션의 속성을 설정하여 폼의 차원이 변경될 때 열과 행의 크기를 조정하는 방식을 결정합니다.

레이아웃 모눈을 설정하려면

TableLayoutPanel 컨트롤의 스마트 태그 문자 모양()을 클릭하고 행 및 열 편집을 선택하여 열 및 행 스타일 대화 상자를 엽니다. 자세한 내용은 방법: TableLayoutPanel 컨트롤에서 열과 행 편집을 참조하십시오.
표시 드롭다운 상자에서 열을 선택합니다.
첫 번째 열을 선택하고 해당 SizeType 속성 값을 Percent로 변경합니다. Percent NumericUpDown 컨트롤의 값을 25로 설정합니다. 이 열은 Label 컨트롤을 보유합니다.
두 번째 열을 선택합니다. SizeType 속성 값을 Percent로 변경합니다. Percent NumericUpDown 컨트롤의 값을 50으로 설정합니다. 이 열은 데이터 입력 필드에 대해 TextBox 컨트롤을 보유합니다.
세 번째 열을 선택합니다. SizeType 속성 값을 Percent로 변경합니다. Percent NumericUpDown 컨트롤의 값을 25로 설정합니다. 이 열은 Label 컨트롤을 보유합니다.
네 번째 열을 선택합니다. SizeType 속성 값을 Percent로 변경합니다. Percent NumericUpDown 컨트롤의 값을 50으로 설정합니다. 이 열은 데이터 입력 필드에 대해 TextBox 컨트롤을 보유합니다.
표시 드롭다운 상자에서 행을 선택합니다.
처음 다섯 개의 행에 대해 SizeType 속성 값을 Absolute로 설정하고 Absolute NumericUpDown 컨트롤 값을 28로 설정합니다. 여섯 번째 행에 대해 SizeType 속성 값을 Percent로 설정하고 Percent NumericUpDown 컨트롤 값을 80으로 설정합니다.
확인을 클릭하여 변경 내용을 적용합니다.

컨트롤을 사용하여 레이아웃 채우기

이제 컨트롤을 사용하여 레이아웃을 채울 수 있습니다. 이 데이터 입력 폼은 연락처 정보이므로 이름, 성, 주소, 전화 번호 및 메모에 대한 필드가 있습니다. 다음 목록에서는 이러한 컨트롤을 만드는 순서를 보여 줍니다.

이름 필드
주소 필드
전화 번호 필드
메모 필드

이름 필드 만들기

이름 입력 필드를 TableLayoutPanel 컨트롤의 첫 번째 행에 배치합니다. 이름 입력 필드는 이름에 대해 Label 컨트롤과 TextBox 컨트롤로 구성되고 성에 대해 Label 컨트롤과 TextBox 컨트롤로 구성됩니다.

이름 필드를 만들려면

도구 상자에서 Label 컨트롤을 TableLayoutPanel 컨트롤의 첫 번째 셀로 끌어 옵니다.
속성 창에서 Label 컨트롤의 Anchor 속성 값을 Right로 설정합니다.
AutoSize 속성 값을 true로 설정합니다.
Text 속성 값을 First Name으로 설정합니다.
도구 상자에서 TextBox 컨트롤을 Label 컨트롤 옆에 있는 첫 번째 행의 두 번째 셀로 끌어 옵니다.
TextBox 컨트롤의 Anchor 속성 값을 Left, Right로 설정합니다.
도구 상자에서 Label 컨트롤을 첫 번째 행의 세 번째 셀로 끌어 옵니다. Label 컨트롤의 Anchor 속성 값을 Right로 설정합니다. AutoSize 속성 값을 true로 설정합니다. Text 속성 값을 Last Name으로 설정합니다.
도구 상자에서 TextBox 컨트롤을 첫 번째 행의 네 번째 셀로 끌어 옵니다. TextBox 컨트롤의 Anchor 속성 값을 Left, Right로 설정합니다.

주소 필드 만들기

주소 필드는 두 번째, 세 번째 및 네 번째 행을 사용합니다. 주소가 길 수 있기 때문에 Address1 및 Address2 필드가 세 개의 열로 확장됩니다.

주소 필드를 만들려면

도구 상자에서 Label 컨트롤을 두 번째 행의 첫 번째 셀로 끌어 옵니다.
속성 창에서 Label 컨트롤의 Anchor 속성 값을 Right로 설정합니다. AutoSize 속성 값을 true로 설정합니다. Text 속성 값을 Address1로 설정합니다.
도구 상자에서 TextBox 컨트롤을 Label 컨트롤 옆에 있는 두 번째 행의 두 번째 셀로 끌어 옵니다.
TextBox 컨트롤의 Anchor 속성 값을 Left, Right로 설정합니다.
ColumnSpan 속성 값을 3으로 설정합니다. TableLayoutPanel 컨트롤이 이러한 속성을 제공합니다. 제공되는 속성에 대한 자세한 내용은 Extender 공급자 개요를 참조하십시오.
세 번째 행에 대해 1-5단계를 반복합니다. Label 컨트롤의 Text 속성 값을 Address2로 설정합니다.
도구 상자에서 Label 컨트롤을 네 번째 행의 첫 번째 셀로 끌어 옵니다.
Label 컨트롤의 Anchor 속성 값을 Right로 설정합니다. AutoSize 속성 값을 true로 설정합니다. Text 속성 값을 City로 설정합니다.
도구 상자에서 TextBox 컨트롤을 Label 컨트롤 옆에 있는 네 번째 행의 두 번째 셀로 끌어 옵니다.
TextBox 컨트롤의 Anchor 속성 값을 Left, Right로 설정합니다.
도구 상자에서 Label 컨트롤을 네 번째 행의 세 번째 셀로 끌어 옵니다.
Label 컨트롤의 Anchor 속성 값을 Right로 설정합니다. AutoSize 속성 값을 true로 설정합니다. Text 속성 값을 State로 설정합니다.
도구 상자에서 ComboBox 컨트롤을 네 번째 행의 네 번째 셀로 끌어 옵니다.
ComboBox 컨트롤의 Anchor 속성 값을 Left로 설정합니다. FormattingEnabled 속성 값을 true로 설정합니다.

전화 번호 필드 만들기

전화 번호 필드는 다섯 번째 행에 있습니다. 사용자가 유효한 전화 번호를 입력하게 하려면 MaskedTextBox 컨트롤을 사용하여 구현합니다.

전화 번호 필드를 만들려면

도구 상자에서 Label 컨트롤을 다섯 번째 행의 첫 번째 셀로 끌어 옵니다.
속성 창에서 Label 컨트롤의 Anchor 속성 값을 Right로 설정합니다. AutoSize 속성 값을 true로 설정합니다. Text 속성 값을 Phone (W)으로 설정합니다.
도구 상자에서 MaskedTextBox 컨트롤을 다섯 번째 행의 두 번째 셀로 끌어 옵니다.
MaskedTextBox 컨트롤의 Anchor 속성 값을 Left로 설정합니다.
MaskedTextBox 컨트롤의 스마트 태그()를 클릭하여 Mask 편집기를 엽니다.
입력 마스크 대화 상자에서 전화 번호 마스크를 선택합니다. 확인을 클릭합니다.
집 전화 번호 필드에 대해 1-5단계를 반복합니다. Text 속성 값을 Phone (H)으로 설정합니다.

메모 필드 만들기

마지막 필드는 여섯 번째 행에 있습니다. 이는 메모를 입력하는 필드로 자유 형식 텍스트 입력이 가능합니다.

메모 필드를 만들려면

도구 상자에서 Label 컨트롤을 여섯 번째 행의 첫 번째 셀로 끌어 옵니다.
속성 창에서 Label 컨트롤의 Anchor 속성 값을 Top, Right로 설정합니다. AutoSize 속성 값을 true로 설정합니다. Text 속성 값을 Notes로 설정합니다.
도구 상자에서 RichTextBox 컨트롤을 여섯 번째 행의 두 번째 셀로 끌어 옵니다.
ColumnSpan 속성 값을 3으로 설정합니다.
RichTextBox 컨트롤의 Dock 속성 값을 Fill로 설정합니다.

레이아웃 모눈 설정 완료

마지막 단계에서는 레이아웃 모눈 설정을 완료합니다. 첫 번째 및 세 번째 열이 AutoSize로 설정되어 있어야 합니다. 이들 열에 컨트롤을 추가했으므로 디자인 타임에 열이 표시됩니다.

레이아웃 모눈을 설정하려면

TableLayoutPanel 컨트롤을 선택하고 해당 스마트 태그 문자 모양()을 클릭합니다. 행 및 열 편집을 선택하여 열 및 행 스타일 대화 상자를 엽니다. 자세한 내용은 방법: TableLayoutPanel 컨트롤에서 열과 행 편집을 참조하십시오.
표시 드롭다운 상자에서 열을 선택합니다.
첫 번째 및 세 번째 열을 선택하고 SizeType 속성 값을 AutoSize로 변경합니다.
확인을 클릭하여 변경 내용을 적용합니다.