연습: Windows Forms 디자이너 시작

업데이트: 2010년 9월

Windows Forms 디자이너는 Windows Forms 응용 프로그램 작성에 필요한 많은 도구를 제공합니다. 이 연습에서는 디자이너에서 제공하는 다양한 도구를 사용하여 응용 프로그램을 작성하는 방법을 보여 줍니다. 이 연습에서 수행할 작업은 다음과 같습니다.

• Windows Forms 프로젝트 만들기

• 맞춤선을 사용하여 컨트롤 정렬

• 스마트 태그를 사용하여 디자이너 작업 수행

• 컨트롤에 대한 여백 및 안쪽 여백 설정

• TableLayoutPanel 컨트롤을 사용하여 컨트롤 정렬

• SplitContainer 컨트롤을 사용하여 컨트롤의 레이아웃 분할

• 문서 개요 창을 사용하여 레이아웃 탐색

• 크기와 위치 정보를 표시하여 컨트롤 위치 지정

• 속성 창을 사용하여 속성 값 설정

작업을 마치면 Windows Forms 디자이너에서 사용할 수 있는 많은 레이아웃 기능을 사용하여 어셈블된 사용자 지정 컨트롤을 갖게 됩니다. 이 컨트롤은 간단한 계산기에 대한 UI(사용자 인터페이스)를 구현합니다. 다음 스크린 샷은 계산기 컨트롤의 일반적인 레이아웃을 보여 줍니다.

계산기 UI

사전 요구 사항

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

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

사용자 지정 컨트롤 프로젝트 만들기

첫 번째 단계는 DemoCalculator 컨트롤 프로젝트를 만드는 것입니다.

사용자 지정 컨트롤 프로젝트를 만들려면

1. 파일 메뉴에서 새로 만들기를 가리킨 다음 프로젝트를 클릭하여 새 프로젝트 대화 상자를 표시합니다.

2. Windows 범주의 Visual Basic 또는 Visual C# 프로젝트 목록에서 Windows Forms 컨트롤 라이브러리 프로젝트 템플릿을 선택합니다.

3. 이름 상자에 DemoCalculatorLib를 입력한 다음 확인을 클릭합니다.

4. 솔루션 탐색기에서 UserControl1.vb 또는 UserControl1.cs를 마우스 오른쪽 단추로 클릭한 다음 이름 바꾸기를 클릭합니다.

5. 파일 이름을 DemoCalculator.vb 또는 DemoCalculator.cs로 변경합니다. 모든 참조의 이름을 코드 요소 "UserControl1"로 바꿀지 여부를 묻는 메시지가 나타나면 예 단추를 클릭합니다.

   이제 Windows Forms 디자이너에서 DemoCalculator 컨트롤에 대한 디자이너 화면이 표시됩니다. 이 뷰에서 도구 상자의 컨트롤과 구성 요소를 선택하여 디자이너 화면에 놓아 컨트롤의 모양을 그래픽으로 디자인할 수 있습니다. 사용자 지정 컨트롤에 대한 자세한 내용은 사용자 지정 컨트롤의 종류를 참조하십시오.

컨트롤 레이아웃 디자인

DemoCalculator 컨트롤에는 여러 Windows Forms 컨트롤이 있습니다. 이 절차에서는 Windows Forms 디자이너의 몇 가지 RAD(Rapid Application Development) 기능을 사용하여 컨트롤을 정렬합니다.

컨트롤 레이아웃을 디자인하려면

1. Windows Forms 디자이너에서 오른쪽 아래 모퉁이에 있는 크기 조정 핸들을 클릭하여 오른쪽 아래로 끌어서 DemoCalculator 컨트롤의 크기를 늘립니다. Visual Studio의 오른쪽 아래 모퉁이에서 컨트롤에 대한 크기와 위치 정보를 찾습니다. 컨트롤의 크기를 조정할 때 크기 정보를 살펴서 컨트롤의 크기를 너비 500, 높이 400으로 설정합니다.

2. 도구 상자에서 컨테이너 노드를 클릭하여 엽니다. SplitContainer 컨트롤을 선택한 다음 디자이너 화면으로 끌어 옵니다.

   SplitContainer가 DemoCalculator 컨트롤의 디자인 화면에 놓입니다.

   참고

   SplitContainer 컨트롤이 DemoCalculator 컨트롤의 크기에 맞춰 조정됩니다. 속성 창을 검사하여 SplitContainer 컨트롤에 대한 속성 설정을 봅니다. Dock 속성을 찾습니다. 해당 값은 Fill입니다. 즉, SplitContainer 컨트롤은 항상 DemoCalculator 컨트롤의 경계에 맞춰 스스로 크기를 조정합니다. DemoCalculator 컨트롤의 크기를 조정하여 이 동작을 확인합니다.

3. 속성 창에서 Dock 속성의 값을 None으로 변경합니다.

   SplitContainer 컨트롤의 크기가 기본 크기로 줄어듭니다. 해당 크기가 더 이상 DemoCalculator 컨트롤의 크기를 따르지 않습니다.

4. SplitContainer 컨트롤의 오른쪽 위 모퉁이에서 스마트 태그 문자 모양()을 클릭합니다. 부모 컨테이너에서 도킹을 클릭하여 Dock 속성을 Fill로 설정합니다.

   SplitContainer 컨트롤은 DemoCalculator 컨트롤의 경계에 도킹합니다.

   참고

   몇 가지 컨트롤은 디자인을 용이하게 하는 스마트 태그를 제공합니다. 자세한 내용은 연습: Windows Forms 컨트롤에서 스마트 태그를 사용하여 일반 작업 수행을 참조하십시오.

5. 패널 사이의 세로 테두리를 클릭하여 오른쪽으로 끌어서 대부분의 공간을 왼쪽 패널이 차지하게 합니다.

   SplitContainer는 패널을 구분하는 이동 가능한 테두리를 사용하여 DemoCalculator 컨트롤을 두 개의 패널로 나눕니다. 왼쪽 패널에는 계산기 단추 및 표시가 있고 오른쪽 패널에는 사용자가 수행한 산술 연산의 기록이 표시됩니다.

6. 속성 창에서 BorderStyle 속성의 값을 Fixed3D로 변경합니다.

7. 도구 상자에서 공용 컨트롤 노드를 클릭하여 엽니다. ListView 컨트롤을 선택한 다음 SplitContainer 컨트롤의 오른쪽 패널로 끌어 옵니다.

8. ListView 컨트롤의 스마트 태그 문자 모양을 클릭합니다. 스마트 태그 패널에서 View 설정을 Details로 변경합니다.

9. 스마트 태그 패널에서 열 편집을 클릭합니다.

   ColumnHeader 컬렉션 편집기 대화 상자가 나타납니다.

10. ColumnHeader 컬렉션 편집기 대화 상자에서 추가 단추를 클릭하여 열을 ListView 컨트롤에 추가합니다. 열의 Text 속성 값을 History로 변경합니다. 확인을 클릭하여 열을 만듭니다.

11. 스마트 태그 패널에서 부모 컨테이너에서 도킹을 클릭한 다음 스마트 태그 문자 모양을 클릭하여 스마트 태그 패널을 닫습니다.

12. 도구 상자의 컨테이너 노드에서 TableLayoutPanel 컨트롤을 SplitContainer 컨트롤의 왼쪽 패널로 끌어 옵니다.

    스마트 태그 패널이 열린 상태로 TableLayoutPanel 컨트롤이 디자이너 화면에 나타납니다. TableLayoutPanel 컨트롤이 자식 컨트롤을 모눈에 맞춰 정렬합니다. 자세한 내용은 연습: TableLayoutPanel을 사용하여 Windows Forms에서 컨트롤 정렬을 참조하십시오. TableLayoutPanel 컨트롤이 DemoCalculator 컨트롤 표시 및 단추를 갖게 됩니다.

13. 스마트 태그 패널의 행 및 열 편집을 클릭합니다.

    열 및 행 스타일 대화 상자가 열립니다.

14. 5개의 열이 표시될 때까지 추가 단추를 클릭합니다. 5개의 열을 모두 선택한 다음 크기 형식 상자에서 백분율 옵션 단추를 클릭합니다. 백분율 값을 20으로 설정합니다. 이렇게 하면 각 열이 같은 너비로 설정됩니다.

15. 표시 드롭 다운 상자에서 행을 클릭합니다.

16. 5개의 행이 표시될 때까지 추가 단추를 클릭합니다. 5개의 행을 모두 선택한 다음 크기 형식 상자에서 백분율 옵션 단추를 클릭합니다. 백분율 값을 20으로 설정합니다. 이렇게 하면 각 행이 같은 높이로 설정됩니다.

17. 확인을 클릭하여 변경 내용을 적용한 다음 스마트 태그 문자 모양을 클릭하여 스마트 태그 패널을 닫습니다.

18. 속성 창에서 Dock 속성의 값을 Fill로 변경합니다.

컨트롤 채우기

이제 컨트롤의 레이아웃이 설정되었으므로 단추와 표시를 사용하여 DemoCalculator 컨트롤을 채울 수 있습니다.

컨트롤을 채우려면

1. 도구 상자에서 TextBox 컨트롤 아이콘을 두 번 클릭합니다.

   TextBox 컨트롤이 TableLayoutPanel 컨트롤의 첫 번째 셀에 놓입니다.

2. 속성 창에서 TextBox 컨트롤의 ColumnSpan 속성 값을 5로 변경합니다.

   TextBox 컨트롤이 해당 행의 가운데 위치로 이동합니다.

3. TextBox 컨트롤의 Anchor 속성 값을 Left, Right로 변경합니다.

   TextBox 컨트롤이 가로로 확장되어 5개의 열을 모두 포함합니다.

4. TextBox 컨트롤의 TextAlign 속성 값을 Right로 변경합니다.

5. 속성 창에서 Font 속성 노드를 확장합니다. TextBox 컨트롤에 대해 Size를 14로 설정하고 Bold를 true로 설정합니다.

6. TableLayoutPanel 컨트롤을 선택합니다.

7. 도구 상자에서 Button 아이콘을 두 번 클릭합니다.

   Button 컨트롤이 TableLayoutPanel 컨트롤의 열려 있는 다음 셀에 놓입니다.

8. 도구 상자에서 4번 더 Button 아이콘을 두 번 클릭하여 TableLayoutPanel 컨트롤의 두 번째 행을 채웁니다.

9. Shift 키를 누른 채로 5개의 Button 컨트롤을 모두 클릭하여 선택합니다. Ctrl+C를 눌러 Button 컨트롤을 클립보드에 복사합니다.

10. Ctrl+V를 3번 눌러 Button 컨트롤의 복사본을 TableLayoutPanel 컨트롤의 나머지 행에 붙여넣습니다.

11. Shift 키를 누른 채로 20개의 Button 컨트롤을 모두 클릭하여 선택합니다.

12. 속성 창에서 Dock 속성의 값을 Fill로 변경합니다.

    모든 Button 컨트롤이 자신을 포함하는 셀에 도킹하여 셀을 채웁니다.

13. 속성 창에서 Margin 속성 노드를 확장합니다. All의 값을 5로 설정합니다.

    컨트롤 사이의 여백을 늘리기 위해 모든 Button 컨트롤의 크기가 작아집니다.

14. button10과 button20을 선택한 다음 Delete 키를 눌러 레이아웃에서 해당 단추를 제거합니다.

15. button5와 button15를 선택한 다음 해당 RowSpan 속성의 값을 2로 변경합니다. 이들 단추는 DemoCalculator 컨트롤에 대해 지우기와 = 단추가 됩니다.

문서 개요 창을 사용하여 컨트롤 탐색

컨트롤이나 폼을 여러 개의 컨트롤로 채우면 문서 개요 창을 사용하여 레이아웃을 탐색하기가 더 쉬워집니다.

문서 개요 창을 사용하여 탐색하려면

1. 보기 메뉴에서 다른 창을 가리킨 다음 문서 개요를 선택합니다.

   문서 개요 창에 DemoCalculator 컨트롤 및 해당 구성 요소 컨트롤의 트리 뷰가 표시됩니다. SplitContainer처럼 컨테이너 컨트롤은 자신의 자식 컨트롤을 트리의 하위 노드로 표시합니다. 문서 개요 창을 사용하여 현재 위치에서 컨트롤의 이름을 바꿀 수도 있습니다.

2. 문서 개요 창에서 button1을 마우스 오른쪽 단추로 클릭한 다음 이름 바꾸기를 클릭합니다. 단추 이름을 sevenButton으로 바꿉니다.

3. 문서 개요 창을 사용하여 다음 목록에 따라 디자이너에서 생성된 Button 컨트롤의 이름을 프로덕션 이름으로 바꿉니다.

   • button1 -> sevenButton

   • button2 -> eightButton

   • button3 -> nineButton

   • button4 -> divisionButton

   • button5 -> clearButton

   • button6 -> fourButton

   • button7 -> fiveButton

   • button8 -> sixButton

   • button9 -> multiplicationButton

   • button11 -> oneButton

   • button12 -> twoButton

   • button13 -> threeButton

   • button14 -> subtractionButton

   • button15 -> equalsButton

   • button16 -> zeroButton

   • button17 -> changeSignButton

   • button18 -> decimalButton

   • button19 -> additionButton

4. 문서 개요 및 속성 창을 사용하여 다음 목록에 따라 각 Button 컨트롤 이름의 Text 속성 값을 변경합니다.

   • sevenButton 컨트롤 텍스트 속성을 7로 변경

   • eightButton 컨트롤 텍스트 속성을 8로 변경

   • nineButton 컨트롤 텍스트 속성을 9로 변경

   • divisionButton 컨트롤 텍스트 속성을 /로 변경

   • clearButton 컨트롤 텍스트 속성을 Clear로 변경

   • fourButton 컨트롤 텍스트 속성을 4로 변경

   • fiveButton 컨트롤 텍스트 속성을 5로 변경

   • sixButton 컨트롤 텍스트 속성을 6으로 변경

   • multiplicationButton 컨트롤 텍스트 속성을 *로 변경

   • oneButton 컨트롤 텍스트 속성을 1로 변경

   • twoButton 컨트롤 텍스트 속성을 2로 변경

   • threeButton 컨트롤 텍스트 속성을 3으로 변경

   • subtractionButton 컨트롤 텍스트 속성을 -로 변경

   • equalsButton 컨트롤 텍스트 속성을 =로 변경

   • zeroButton 컨트롤 텍스트 속성을 0으로 변경

   • changeSignButton 컨트롤 텍스트 속성을 +/-로 변경

   • decimalButton 컨트롤 텍스트 속성을 .로 변경

   • additionButton 컨트롤 텍스트 속성을 +로 변경

5. 디자이너 화면에서 Shift 키를 누른 채로 모든 Button 컨트롤을 클릭하여 선택합니다.

6. 속성 창에서 Font 속성 노드를 확장합니다. 모든 Button 컨트롤에 대해 Size를 14로 설정하고 Bold를 true로 설정합니다.

   이렇게 하면 DemoCalculator 컨트롤의 디자인이 완료됩니다. 나머지 부분은 모두 계산기 논리를 제공하는 데 사용됩니다.

이벤트 처리기 구현

DemoCalculator 컨트롤의 단추에는 계산기 논리의 많은 부분을 구현하는 데 사용할 수 있는 이벤트 처리기가 있습니다. Windows Forms 디자이너를 사용하면 두 번 클릭을 한 번만 수행하여 모든 단추에 대해 모든 이벤트 처리기의 스텁을 구현할 수 있습니다.

이벤트 처리기를 구현하려면

1. 디자이너 화면에서 Shift 키를 누른 채로 모든 Button 컨트롤을 클릭하여 선택합니다.

2. Button 컨트롤을 두 번 클릭합니다.

   디자이너에서 생성한 이벤트 처리기에 대해 코드 편집기가 열립니다.

컨트롤 테스트

DemoCalculator 컨트롤은 UserControl 클래스에서 상속되므로 UserControl Test Container를 사용하여 해당 동작을 테스트할 수 있습니다. 자세한 내용은 방법: UserControl의 런타임 동작 테스트를 참조하십시오.

컨트롤을 테스트하려면

1. F5 키를 눌러 UserControl Test Container에서 DemoCalculator 컨트롤을 작성하고 실행합니다.

2. SplitContainer 패널 사이의 테두리를 클릭하여 왼쪽과 오른쪽으로 끕니다. TableLayoutPanel 및 해당 자식 컨트롤의 크기가 사용 가능한 공간에 맞춰 조정됩니다.

3. 컨트롤 테스트를 마치면 닫기를 클릭합니다.

페이지에서 컨트롤 사용

다른 복합 컨트롤이나 폼에서 DemoCalculator 컨트롤을 사용할 수 있습니다. 다음 절차에서는 해당 컨트롤의 사용 방법을 설명합니다.

프로젝트 만들기

첫 번째 단계는 응용 프로그램 프로젝트를 만드는 것입니다. 이 프로젝트를 사용하여 사용자 지정 컨트롤을 표시하는 응용 프로그램을 작성할 것입니다.

프로젝트를 만들려면

1. 파일 메뉴에서 추가를 가리킨 다음 새 프로젝트를 클릭하여 새 프로젝트 대화 상자를 엽니다.

2. Visual Basic 또는 Visual C# 프로젝트 목록에서 Windows Forms 응용 프로그램 프로젝트 템플릿을 선택합니다.

3. 이름 상자에 DemoCalculatorTest를 입력한 다음 확인을 클릭합니다.

4. 솔루션 탐색기에서 DemoCalculatorTest 프로젝트를 마우스 오른쪽 단추로 클릭한 다음 참조 추가를 클릭하여 참조 추가 대화 상자를 엽니다.

5. 프로젝트 탭을 클릭한 다음 DemoCalculatorLib 프로젝트를 두 번 클릭하여 테스트 프로젝트에 대한 참조를 추가합니다.

6. 솔루션 탐색기에서 DemoCalculatorTest를 마우스 오른쪽 단추로 클릭하고 시작 프로젝트로 설정을 클릭합니다.

7. Windows Forms 디자이너에서 폼의 크기를 약 700 x 500으로 늘립니다.

폼의 레이아웃에서 컨트롤 사용

응용 프로그램에서 DemoCalculator 컨트롤을 사용하려면 폼에 놓아야 합니다.

폼의 레이아웃에서 컨트롤을 사용하려면

1. 도구 상자에서 DemoCalculatorLib 구성 요소 노드를 확장합니다.

2. 도구 상자에서 DemoCalculator 컨트롤을 폼으로 끌어 옵니다. 컨트롤을 폼의 왼쪽 위 모퉁이로 이동합니다. 컨트롤이 폼의 테두리와 가까워지면 맞춤선이 표시됩니다. 이러한 맞춤선은 폼의 Padding 속성과 컨트롤의 Margin 속성의 거리를 나타냅니다. 맞춤선이 가리키는 위치에 컨트롤을 배치합니다.

   자세한 내용은 연습: 맞춤선을 사용하여 Windows Forms에서 컨트롤 정렬을 참조하십시오.

3. 도구 상자에서 Button 컨트롤을 끌어다 폼에 놓습니다.

4. Button 컨트롤을 DemoCalculator 컨트롤 주위로 이동하여 맞춤선이 나타나는 위치를 살펴 보십시오. 이 기능을 사용하여 컨트롤을 정확하고 쉽게 맞출 수 있습니다. 마쳤으면 Button 컨트롤을 삭제합니다.

5. DemoCalculator 컨트롤을 마우스 오른쪽 단추로 클릭한 다음 속성을 클릭합니다.

6. Dock 속성의 값을 Fill로 변경합니다.

7. 폼을 선택한 다음 Padding 속성 노드를 확장합니다. All의 값을 20으로 변경합니다.

   DemoCalculator 컨트롤의 크기가 폼의 새 Padding 값에 맞게 변경됩니다.

8. 다양한 크기 조정 핸들을 다른 위치로 끌어서 폼의 크기를 조정하여 DemoCalculator 컨트롤의 크기가 그에 맞춰 조정되는 방식을 살펴 보십시오.

다음 단계

이 연습에서는 단순한 계산기에 대한 사용자 인터페이스를 구성하는 방법을 보여 주었습니다. 다음 방법을 사용하여 계산기 기능을 확장할 수 있습니다.

• 계산기 논리를 구현합니다. 이 방법은 간단해 보이지만 계산기의 상태 전환과 관련하여 흥미로운 복잡한 측면이 있습니다.

• 배포할 계산기 응용 프로그램을 패키지합니다. 자세한 내용은 방법: 게시 마법사를 사용하여 ClickOnce 응용 프로그램 게시를 참조하십시오.

참고 항목

작업

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

연습: Windows Forms 구성 요소에 스마트 태그 추가

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

연습: 도구 상자에 자동으로 사용자 지정 구성 요소 채우기

방법: UserControl의 런타임 동작 테스트

컨트롤 및 구성 요소 제작 문제 해결

디자인 타임 개발 문제 해결

개념

사용자 지정 컨트롤의 종류

기타 리소스

새 Windows Form 만들기

변경 기록