Visual C#에서 사용자 인터페이스 디자인

아티클
08/20/2008

업데이트: 2007년 11월

Visual C#에서 Windows 응용 프로그램용 UI(사용자 인터페이스)를 만드는 가장 빠르고 편리한 방법은 Windows Forms 디자이너와 도구 상자를 사용하는 것입니다.

참고:
이 문서에서는 Windows Forms 기술에 대해서만 설명합니다. 또한 Visual C#을 사용하여 WPF(Windows Presentation Foundation) 응용 프로그램을 만들 수 있습니다. 자세한 내용은 Windows Presentation Foundation 소개 및 방법: 새 WPF 응용 프로그램 프로젝트 만들기을 참조하십시오. Visual C#을 사용하면 간단한 텍스트 기반의 UI가 포함된 콘솔 응용 프로그램(MS-DOS 프로그램과 유사한 응용 프로그램)을 만들 수도 있습니다. 자세한 내용은 방법: C# 콘솔 응용 프로그램 만들기를 참조하십시오.

이 문서에서는 Windows Forms 기술에 대해서만 설명합니다. 또한 Visual C#을 사용하여 WPF(Windows Presentation Foundation) 응용 프로그램을 만들 수 있습니다. 자세한 내용은 Windows Presentation Foundation 소개 및 방법: 새 WPF 응용 프로그램 프로젝트 만들기을 참조하십시오.

Visual C#을 사용하면 간단한 텍스트 기반의 UI가 포함된 콘솔 응용 프로그램(MS-DOS 프로그램과 유사한 응용 프로그램)을 만들 수도 있습니다. 자세한 내용은 방법: C# 콘솔 응용 프로그램 만들기를 참조하십시오.

Windows Forms 응용 프로그램용 사용자 인터페이스 작성은 세 가지 기본 단계로 구성됩니다.

디자인 화면에 컨트롤 추가
컨트롤의 초기 속성 설정
지정된 이벤트의 처리기 작성

코드를 직접 작성하여 UI를 만들 수도 있지만 디자이너를 사용하면 코드를 수동으로 작성할 때보다 훨씬 빠르게 작업을 수행할 수 있습니다.

컨트롤 추가

디자이너에서 폼을 나타내는 디자인 화면에 단추 및 텍스트 상자 같은 컨트롤을 마우스를 사용하여 끌어 놓습니다. 다음 그림에서는 도구 상자에서 Windows Forms 디자이너의 폼으로 끌어 놓은 콤보 상자를 보여 줍니다.

도구 상자

시각적인 방식으로 작업을 수행할 때 디자이너는 사용자의 작업을 C# 소스 코드로 변환하고 이를 <name>.designer.cs라는 프로젝트 파일에 기록합니다. 여기서 <name>은 폼에 부여한 이름입니다. 응용 프로그램을 실행하면 이 소스 코드가 UI 요소의 위치와 크기를 지정하여 디자인 화면에서 사용자가 수행한 작업 결과와 동일한 모양으로 UI를 표시합니다. 자세한 내용은 Windows Forms 디자이너를 참조하십시오.

속성 설정

폼에 컨트롤을 추가한 다음 속성 창을 사용하여 배경색이나 기본 텍스트 같은 속성을 설정할 수 있습니다. 속성 창에서 지정하는 값은 런타임에 컨트롤을 만들 때 해당 속성에 할당되는 초기 값입니다. 대부분의 경우 이러한 값은 응용 프로그램에서 컨트롤 클래스의 인스턴스에 대한 속성을 가져오거나 설정하여 런타임에 프로그래밍 방식으로 액세스하거나 변경할 수 있습니다. 속성 창을 사용하면 컨트롤에 대해 지원되는 속성, 이벤트 및 메서드를 모두 살펴볼 수 있으므로 이 창은 디자인 타임에 유용하게 사용됩니다. 자세한 내용은 속성 창을 참조하십시오.

이벤트 처리

그래픽 사용자 인터페이스가 있는 프로그램은 기본적으로 이벤트 구동 방식입니다. 이러한 프로그램은 사용자가 텍스트 상자에 텍스트를 입력하거나 단추를 클릭하거나 목록 상자에서 선택 항목을 변경하는 것과 같은 작업을 수행할 때까지 기다립니다. 이러한 작업이 발생하면 .NET Framework 클래스의 인스턴스인 컨트롤에서 응용 프로그램에 이벤트를 전달합니다. 이벤트를 전달받으면 호출되는 특별한 메서드를 응용 프로그램에 작성하여 이벤트를 처리할 수 있습니다.

속성 창을 사용하여 코드에서 처리할 이벤트를 지정할 수 있습니다. 디자이너에서 컨트롤을 선택하고 번개 모양 아이콘의 이벤트 단추를 클릭하면 속성 창 도구 모음에 해당 이벤트가 표시됩니다. 다음 다이어그램에서는 이벤트 단추를 보여 줍니다.

속성 창의 이벤트 단추

속성 창을 통해 이벤트 처리기를 추가하면 디자이너에서 빈 메서드 본문이 자동으로 작성됩니다. 메서드가 실제 작업을 수행하는 데 필요한 코드는 직접 작성합니다. 대부분의 컨트롤에서 다양한 이벤트를 생성하지만 응용 프로그램에서는 그러한 이벤트 중 몇 가지 또는 단 한 개만 처리하게 됩니다. 예를 들어 단추의 Click 이벤트를 처리해야 할 때 단추의 모양을 고급 방식으로 사용자 지정하려는 경우가 아니면 Paint 이벤트는 처리할 필요가 없습니다. 각 컨트롤에는 기본 이벤트 처리기가 있습니다. 디자이너에서 컨트롤을 두 번 클릭하여 기본 이벤트 처리기를 만들 수 있습니다. 이렇게 하면 이벤트 처리기가 만들어지고 코드 편집기가 열려 이벤트를 처리할 코드를 작성할 수 있습니다.