WPF 응용 프로그램의 사용자 인터페이스 디자인

아티클
08/20/2008

업데이트: 2007년 11월

사용자는 Windows Form 응용 프로그램에서처럼 WPF(Windows Presentation Foundation)의 사용자 인터페이스를 디자인할 수 있습니다. 도구 상자에서 컨트롤을 다자인 화면으로 끌어 옵니다. WPF 응용 프로그램의 경우에는 IDE(통합 개발 환경)가 다릅니다. 속성 창과 도구 상자가 있을 뿐만 아니라 WPF IDE에는 XAML 편집기도 있습니다. XAML은 사용자 인터페이스를 만드는 데 사용할 수 있는 Extensible Application Markup Language의 약어입니다. 다음 그림에서는 XAML 편집기의 위치를 보여 줍니다. 자세한 내용은 연습: WPF Designer에서 XAML 편집을 참조하십시오.

XAML 편집기

XAML 창

Windows Form 개발에서 코드를 수동으로 작성하여 컨트롤을 만들 수 있는 것처럼 XAML 태그를 사용하여 컨트롤을 만들 수 있습니다. 그러나 대부분의 경우 XAML을 작성하여 컨트롤을 만드는 것보다 도구 상자에서 컨트롤을 끌어 와 Visual C# Express Edition에서 사용자를 위한 XAML을 생성하도록 하는 것이 훨씬 간단합니다. 이렇게 한 다음에는 XAML 태그를 수정하여 높이 또는 텍스트와 같은 컨트롤의 특성을 변경할 수 있습니다. 예를 들어 다음 XAML 태그는 Button 컨트롤을 두 번 클릭하여 WPF 창에 추가할 때 생성되는 태그와 비슷합니다.

<Button Height="23" HorizontalAlignment="Left" Margin="10,10,0,0" 
    Name="Button1" VerticalAlignment="Top" Width="75">Button</Button>

기본적으로 너비 및 높이와 같이 사용자가 수정할 수 있는 특성은 빨간색 글꼴로 표시됩니다. 다음 예제에서와 같이 XAML 태그에서 바로 값을 변경할 수 있습니다.

<Button Height="30" HorizontalAlignment="Left" Margin="10,10,0,0" 
    Name="Button1" VerticalAlignment="Top" Width="60">Submit</Button>

WPF 응용 프로그램을 만들려면

파일 메뉴에서 새 프로젝트를 클릭합니다.
새 프로젝트 대화 상자에서 WPF 응용 프로그램을 클릭합니다.
이름 상자에 WPF Application을 입력한 다음 확인을 클릭합니다.

새 WPF 프로젝트가 만들어집니다. Window1이라는 새 창이 나타나고 해당 XAML 태그가 Visual C# Express Edition IDE의 XAML 편집기에 표시됩니다.
Window1을 클릭하여 선택합니다.
XAML 뷰에서Window 요소의 Title 특성을 WPF Application으로 변경합니다.

Window1의 제목 표시줄 텍스트가 WPF Application으로 바뀝니다.

WPF 창에 컨트롤 추가

도구 상자에서 컨트롤을 끌어 와 WPF 창에 컨트롤을 추가할 수 있습니다. 자세한 내용은 공용 WPF 컨트롤을 참조하십시오.

WPF 창에 컨트롤을 추가하려면

도구 상자에서 TextBox 컨트롤을 WPF 창의 오른쪽 위로 끌어 옵니다.
TextBox 컨트롤을 클릭하여 선택합니다.
다음 그림과 같이 속성 창에서 HorizontalAlignment 속성의 첫 번째(왼쪽) 화살표를 클릭합니다.

HorizontalAlignment 속성

이렇게 하면 TextBox가 WPF 창 오른쪽에서 왼쪽으로 이동합니다.
TextBox의 속성을 다음과 같이 설정합니다.

속성

값

VerticalAlignment

Top

Width

75

Height

26
다음 예제에서와 같이 XAML 편집기에서 TextBox 요소의 Width 특성을 140으로 변경하고 Margin 요소를 30, 56, 0, 0으로 변경합니다.
```
<TextBox Height="26" HorizontalAlignment="Left" Margin="30,56,0,0" 
    Name="TextBox1" VerticalAlignment="Top" Width="140" />
```
새 값을 입력하면 TextBox의 너비와 위치가 변경됩니다.
Button 컨트롤을 WPF 창의 TextBox 옆에 추가합니다.
다음 예제에서와 같이 여는/닫는 Button 태그 사이에 있는 텍스트를 Button에서 Submit으로 변경합니다.
```
<Button Height="23" HorizontalAlignment="Right" Margin="0,59,35,0" 
    Name="Button1" VerticalAlignment="Top" 
    Width="75">Submit</Button>
```
새 값을 입력하면 단추의 텍스트가 변경됩니다.
F5 키를 눌러 프로그램을 실행합니다. 그러면 방금 추가한 텍스트 상자와 단추가 포함된 창이 나타납니다.

단추를 클릭하고 텍스트 상자에 입력할 수 있지만 이러한 작업을 수행할 때 아무것도 발생하지 않습니다. 이제 컨트롤에 이벤트 처리기를 추가한 다음 단추를 클릭했을 때 수행할 작업을 지시하는 코드를 작성해야 합니다. 자세한 내용은 방법: WPF 컨트롤에 대한 이벤트 처리기 만들기를 참조하십시오.