WPF를 사용하여 그리기 응용 프로그램 만들기

아티클
08/20/2008

업데이트: 2007년 11월

이 단원에서는 그림을 그릴 수 있는 WPF(Windows Presentation Foundation) 응용 프로그램을 만드는 방법을 배웁니다. WPF 응용 프로그램은 Windows Forms 응용 프로그램과 같은 방법으로 만듭니다. 즉, 도구 상자에서 컨트롤을 디자인 화면에 끌어 온 후 컨트롤의 이벤트를 처리하는 코드를 작성합니다.

비디오에 링크 비디오 데모를 보려면 Video How to: Creating a Drawing Application by Using WPF를 참조하십시오.

실습

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

파일 메뉴에서 새 프로젝트를 클릭합니다.

새 프로젝트 대화 상자가 나타납니다. 이 대화 상자에는 Visual Basic Express Edition을 사용하여 만들 수 있는 다양한 기본 응용 프로그램 종류가 나열되어 있습니다.
프로젝트 형식으로 WPF 응용 프로그램을 선택합니다.
응용 프로그램 이름을 Ink Pad로 바꾼 다음 확인을 클릭합니다.

Visual Basic Express Edition에서 프로젝트의 새 폴더가 만들어집니다. 이때 폴더 이름은 프로젝트 제목과 같고, Visual Basic Express Edition에서는 제목이 Window1인 새 WPF 창을 디자인 뷰에 표시합니다. 디자인 화면을 마우스 오른쪽 단추로 클릭한 후 코드 보기를 클릭하면 코드 편집기로 언제든지 이동할 수 있습니다. 기본적으로 XAML 편집기는 디자이너 아래쪽에 표시되지만 원하는 경우 디자인 화면을 마우스 오른쪽 단추로 클릭하고 XAML 보기를 클릭하여 XAML 뷰를 전체 화면으로 볼 수 있습니다.

사용자 인터페이스를 디자인하려면

속성 창이 열려 있지 않으면 보기 메뉴에서 속성 창을 클릭합니다. 이 창에는 현재 선택된 폼 또는 컨트롤의 속성이 나열되어 있습니다. 이 창에서 기존 속성 값을 변경할 수 있습니다.
속성 창에서 Height 속성을 550으로 설정하고 Width 속성을 370으로 설정하여 WPF 창의 크기를 변경합니다.
WPF 창의 제목 속성을 Ink Pad로 변경합니다.
드롭다운 상자에서 Brown을 클릭한 후 Enter 키를 눌러 WPF 창의 Background 속성을 밤색으로 변경합니다.

참고:

Background 특성을 추가한 후 값을 Brown: Background="Brown"으로 설정하여 XAML 태그를 직접 수정할 수도 있습니다.
도구 상자를 열려면 보기 메뉴에서 도구 상자를 클릭합니다.
도구 상자를 마우스 오른쪽 단추로 클릭한 다음 항목 선택을 클릭합니다.

도구 상자 항목 선택 대화 상자가 열립니다.
도구 상자 항목 선택 대화 상자의 WPF 구성 요소 탭에서 아래쪽으로 스크롤하여 InkCanvas를 찾은 후 이를 선택하여 확인란에 확인 표시가 나타나도록 합니다.
확인을 클릭하여 InkCanvas 컨트롤을 도구 상자에 추가합니다.
도구 상자에서 InkCanvas 컨트롤을 디자인 화면으로 끌어 옵니다.
속성 창에서 InkCanvas 컨트롤의 속성을 다음과 같이 설정합니다.

속성

값

Width

Auto

Height

Auto

HorizontalAlignment

Stretch

VerticalAlignment

Stretch

Margins

9, 9, 9, 68
InkCanvas 컨트롤의 Background 속성을 LightYellow로 설정하여 색을 노란색으로 변경합니다.

InkCanvas 컨트롤의 배경색이 런타임에 연한 노란색으로 표시됩니다.
Button 컨트롤 두 개를 WPF 창으로 끌어 와 InkCanvas 컨트롤 아래 배치합니다. 이때 button1은 왼쪽에 배치하고 button2는 오른쪽에 배치합니다.

참고:
Background 특성을 추가한 후 값을 Brown: Background="Brown"으로 설정하여 XAML 태그를 직접 수정할 수도 있습니다.

속성	값
Width	Auto
Height	Auto
HorizontalAlignment	Stretch
VerticalAlignment	Stretch
Margins	9, 9, 9, 68

button1을 선택한 후 XAML 뷰에서 다음과 같이 XAML 태그를 변경합니다. 이 태그는 Text 속성을 Clear로 설정합니다.

<Button Height="23" HorizontalAlignment="Left" Margin="85,0,0,24" 
    Name="Button1" VerticalAlignment="Bottom" 
    Width="75">Clear</Button>

button2를 선택한 후 다음과 같이 XAML 태그를 변경합니다. 이 태그는 Text 속성을 Close로 설정합니다.
```
<Button Height="23" HorizontalAlignment="Right" Margin="0,0,72,24" 
    Name="Button2" VerticalAlignment="Bottom" 
    Width="75">Close</Button>
```
WPF 응용 프로그램은 다음 그림에 나와 있는 Ink Pad 응용 프로그램과 같습니다.

WPF Ink Pad 응용 프로그램

단추의 이벤트 처리기에 코드를 추가하려면

Clear를 두 번 클릭한 후 생성되는 Click 이벤트 처리기에 다음 코드를 추가합니다.
```
    Me.InkCanvas1.Strokes.Clear() 
```
코드 편집기를 마우스 오른쪽 단추로 클릭하고 디자이너를 클릭하여 디자인 뷰로 돌아갑니다.
Close를 두 번 클릭한 후 생성되는 Click 이벤트 처리기에 다음 코드를 추가합니다.
```
    Me.Close()
```
F5 키를 눌러 프로젝트를 실행합니다.
응용 프로그램이 시작되면 InkCanvas 컨트롤에 그림을 그립니다. 잘못 그린 경우 Clear를 클릭하여 처음부터 다시 그릴 수 있습니다.
Close를 클릭하여 응용 프로그램을 종료합니다.