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

아티클
08/20/2008

업데이트: 2007년 11월

이 단원에서는 WPF 응용 프로그램을 만들고 사용자 인터페이스에 컨트롤을 추가하는 방법을 배웁니다.

WPF(Windows Presentation Foundation) 응용 프로그램은 Windows Forms 응용 프로그램 디자인과 마찬가지로 디자인 화면에 컨트롤을 추가하여 디자인합니다. 그러나 몇 가지 차이점도 있습니다. WPF 응용 프로그램을 디자인할 때는 디자이너, 속성 창 및 도구 상자 이외에 XAML이 포함된 창을 사용할 수 있습니다. XAML은 Extensible Application Markup Language의 약어로, 사용자 인터페이스를 만드는 데 사용되는 태그 언어입니다. 다음 그림에서는 XAML 편집기의 기본 위치를 보여 줍니다. 자세한 내용은 연습: WPF Designer에서 XAML 편집을 참조하십시오.

XAML 편집기

XAML 창

일반적인 Windows Forms 응용 프로그램을 만들 때는 도구 상자에서 Windows Form으로 컨트롤을 끌어 오거나, 원하는 경우 코드를 직접 작성하여 컨트롤을 만들 수도 있습니다. 폼에 컨트롤을 끌어 오면 코드가 자동으로 생성됩니다. 이와 마찬가지로 WPF 응용 프로그램을 만들 때도 XAML 태그를 작성하여 컨트롤을 만들거나 컨트롤을 WPF 창으로 끌어 올 수 있습니다.

XAML 태그는 계층 구조 형식으로 표시되는 요소로 이루어집니다. 요소는 꺾쇠괄호 안에 포함되고 일반적으로 여는 요소와 닫는 요소가 쌍을 이룹니다. 예를 들어 간단한 Button 요소는 <Button></Button> 형식으로 표시됩니다. 일반적으로 요소의 위치, 높이 및 너비 같은 특성을 정의하여 요소의 모양을 지정합니다. 요소의 특성은 물리적 모양이나 상태에 대한 설명이므로 개체의 속성과 비슷합니다. 특성은 여는 요소의 왼쪽 괄호와 오른쪽 괄호 안에 표시됩니다. 특성은 특성의 이름, 할당 기호(=) 및 따옴표로 둘러싼 특성의 값으로 이루어집니다. 예를 들어 Button 요소의 높이를 <Button Height="23"></Button>에서와 같이 지정할 수 있습니다.

도구 상자에서 디자이너로 WPF 컨트롤을 끌어 오면 Visual Basic Express Edition에서 컨트롤에 대한 XAML 태그가 자동으로 생성됩니다. 예를 들어 System.Windows.Controls.Button 컨트롤을 두 번 클릭하여 WPF 창에 추가하면 다음과 유사한 XAML 태그가 생성됩니다.

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

여기에서 Button 요소의 Height 특성은 "23"으로 설정되어 있고 HorizontalAlignment 요소는 "Left"로 설정되어 있습니다. 또한 요소를 설명하는 몇 가지 다른 특성이 있습니다. XAML 태그에서 직접 값을 변경하여 이러한 특성을 변경할 수 있습니다. 기본적으로 이러한 특성은 빨간 글꼴로 표시됩니다. 속성 창에서 이러한 컨트롤 속성을 변경할 수도 있습니다.

실습

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

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

새 Windows Presentation Foundation 프로젝트가 생성됩니다. Window1이라는 새 창이 나타납니다. Visual Basic IDE(통합 개발 환경)의 XAML 편집기에 해당 XAML 태그가 다음과 같이 표시됩니다.
```
<Window x:Class="Window1"

xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="300" Width="300">
    <Grid>

    </Grid>
</Window>
```
Window1을 클릭하여 선택합니다.
XAML 편집기를 사용하여 Window 요소의 Title 특성을 Window1에서 WPF Application으로 변경합니다.

변경 후의 XAML 태그는 다음과 같습니다.
```
<Window x:Class="Window1"
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    Title="WPF Application" Height="300" Width="300">
    <Grid>

    </Grid>
</Window>
```
Window1의 제목 표시줄 텍스트가 WPF Application으로 바뀝니다.

Width 및 Height 같이 창의 다른 특성도 변경하여 실험해 보십시오. 준비됐으면 다음 프로시저를 계속 진행합니다.

WPF 창에 컨트롤 추가

이 절차에서는 응용 프로그램에 컨트롤을 추가합니다. 이 작업을 수행하려면 Visual Basic IDE의 왼쪽에 있는 도구 상자에서 컨트롤을 클릭한 다음 WPF 창으로 끌어 옵니다. 그런 다음 컨트롤의 일부 속성을 설정하고 XAML 태그를 조정하여 컨트롤의 텍스트와 크기를 변경합니다.

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 키를 눌러 프로그램을 실행합니다. 그러면 방금 추가한 텍스트 상자와 단추가 포함된 창이 나타납니다. 단추를 클릭하고 텍스트 상자에 텍스트를 입력할 수 있습니다. 이제 컨트롤에 이벤트 처리기를 추가한 다음 단추를 클릭했을 때 수행할 작업을 지시하는 코드를 작성해야 합니다.

속성	값
VerticalAlignment	Top
Width	75
Height	26

다음 단계

이 단원에서는 WPF 응용 프로그램을 만들어 이 응용 프로그램에 컨트롤을 추가하는 방법을 배웠습니다. 또한 속성 창에서 컨트롤의 속성을 설정하는 방법 및 XAML 뷰에서 WPF 창과 컨트롤의 특성을 변경하는 방법도 배웠습니다. 다음 단원에서는 도구 상자에서 사용할 수 있는 다른 컨트롤 중 일부에 대해 배웁니다.

다음 단원: 공용 WPF 컨트롤 사용