Head First C# (개정3판): 상상을 초월하는 객체지향 C# 학습법

68    Chapter 1

게임이 하고 싶군요

컨트롤로 게임 동작하게 하기

컨트롤은 제목과 캡션과 같이 보이는 것만 있는 게 아닙니다. 컨트롤은 게임이 동작할 수 있도록 중심 역할을 합니다.

컨트롤을 추가해서 플레이어들이 게임을 하게 해 봅시다. 여러분이 다음에 만들 것은 다음과 같습니다.

ProgressBar를 수정해 봅시다.

그리드의 중앙 아랫부분의 셀에서 ProgressBar를 마우스 오른쪽 클릭합니다. 레이아웃 > 모두

다시 설정

을 선택합니다. 그리고 속성 창의 레이아웃 섹션으로 가서 Height에 20을 입력합니다.

XAML 창에서 레이아웃과 관련된 속성을 찾아서 Height이 추가되었는지 확인해 봅시다.

1

Canvas 컨트롤을 게임 플레이를 할 수 있는 곳으로 바꿔 봅시다.

중앙에 Canvas 컨트롤 놓은 거 기억나시죠? 그런데 지금 찾기가 힘드네요. 도구 상자에

서 Canvas Control을 놓을 때, 잘 보이지 않습니다. 그러나, 쉽게 찾는 방법이 있습니다.

XAML 창의 툴 팁 박스에서

문서 개요

(Document Outline)라고 쓰인

버튼을 클릭합

니다. 그리고 버튼을 클릭해서

컨트롤을 선택합니다.

Canvas 컨트롤을 선택했으면 속성 창의 이름 칸에 “playArea”를 입력합니다.

2

Canvas 컨트롤에 이름을 붙인 후, 문서 개요 창을 닫으세요. 그리

고 속성 창에 있는

와

버튼(Stretch)을 눌러 수평과 수직으

로 정렬하고, Margin(여백)을 다시 설정합니다. 그리고 Width와

Height에 있는

버튼(Auto)을 각각 누릅니다. 그리고 Column에

0과 ColumnSpan(Column의 오른쪽)에 3을 입력합니다.

마지막으로, 속성 창의

브러시

(Brush) 섹션에서 Canvas에

그라데이

션

을 주기 위해

버튼(그라데이션 브러시)을 클릭합니다. 편집기 아

랫부분의 왼쪽과 오른쪽 탭을 클릭해서 그라데이션의 시작 색과 끝나

는 색을 선택하고 색상을 클릭하세요.

왼쪽의 탭을 클릭해서

그라데이션의 시작 색을

선택하세요. 그리고 오른쪽

탭으로 그라데이션의 끝나는

색을 선택하세요.

이름이 변경되면 문서

개요 창에 [Canvas] 대신

playArea라고 뜹니다.

IDE의 오른쪽 부분에서 문서

개요를 클릭해서 열 수 있습니다.

보기(View) > 다른 창

(Other Windows) > 문서

개요(Document Outline)

에서 볼 수 있습니다.

아래쪽 행에서

뭔가 해 봅시다.

ProgressBar를

이만큼 늘릴 거예요.

템플릿으로 적을

이렇게 만들어 봅시다.

게임 배경에 그라데이션을

넣을 거예요.

문서 개요

지금 여기예요

 � 69

C# 시작하기

이제 페이지를 꾸미는 작업이 거의 끝났습니다! 마지막 단계를 향해 페이지를 넘겨주세요.

문서 개요를 이용해 StackPanel과 TextBlock 컨트롤을 수정해 봅시다.

문서 개요로 돌아옵니다(문서 개요 창의 윗부분에 이 보이면 을 클릭해서

pageRoot로 돌아옵니다). StackPanel 컨트롤을 선택해서 수평과 수직이 중앙으로 정렬되어 있는지, 여백이 설정되었

는지 확인합니다. 마찬가지로 TextBlock도 확인합니다.

5

적 템플릿을 생성해 봅시다.

게임 화면에서 같은 모양의 적군이 많이 움직여야 합니다. 다행히도, XAML에서 많은 컨트롤을 같은 적군 모양으로 만들어

주는 템플릿(Template)을 제공해 줍니다.

다음, 문서 개요(Document Outline) 창에서 [StackPanel]을 펼친 후, [ContentControl]에서 마우스 오른쪽 클릭

합니다. 그리고

템플릿 편집(Edit Template)

>

빈 항목 만들기(Create Empty...)

메뉴를 선택합니다. EnemyTemplate으로

이름을 입력하고 확인을 누르면 XAML 창에 템플릿이 추가됩니다.

현재 새로 만든 템플릿이 선택되어 있습니다. 그런데 템플릿이 보이지 않네요. 다음 과정에서 템플릿을 보이게 합시다. 만

약 컨트롤 템플릿의 바깥 부분을 클릭했다면, 여러분은 문서 개요(Document Outline)를 열어서 다시 선택할 수 있습니

다. ContentControl을 오른쪽 클릭해서 템플릿 편집(Edit Template) > 현재 항목 편집(Edit Current)을 선택하면

됩니다.

3

움직이는 적들은 여기서 보이지

않습니다. 적군이 표시되도록

컨트롤을 추가하고 크기를

설정하기 전까지 디자이너 창에는

어떤 템플릿도 표시되지 않습니다.

뭔가 잘못됐다고 걱정하지 마세요.

취소(Undo)하고 다시 하면 됩니다.

템플릿이 선택되지 않을

경우, 문서 개요 창에서

그리드를 선택하세요.

적 템플릿을 편집해 봅시다.

빨간색 원을 템플릿에 추가해 봅시다.

★ 도구 상자에 있는 를 더블-클릭해서 원을 추가하세요.

★ Ellipse의 Height과 Width의 속성을 100으로 설정하세요. 그러면 셀에서 원이

보일 거예요.

★ HorizontalAlignment, VerticalAlignment, Margin 속성의 옆에 작은 네모 상자를 눌

러, 다시 설정을 선택합니다.

★ 속성 창의 브러시 섹션으로 가서 단색 브러시(Solid-color brush) 를 선택합

니다.

★ 긴 색상 바 안의 표식을 윗부분으로 끌어서, 원형에 빨간색을 칠합니다. 그런 다

음 정사각형의 색상 선택 부분을 클릭해서 오른쪽 위의 코너로 마우스를 끌어 놓

습니다.

★ ContentControl의 XAML 코드는 이제 이렇게 보일 겁니다.

4

오른쪽 위의 모서리를

클릭해서, 이 색상을

선택하세요.

XAML 윈도우 창을 스크롤해서 EnemyTemplate이 정의된 것을

확인해 보세요. AppName 리소스가 밑줄이 같아야 합니다.

디자이너에서 원형이 보일 때까지 아무 데나 클릭하지 마세요.

템플릿이 선택되는 것을 유지하려고 합니다.