[Windows 8] Canvas Panel

지난 포스트에서 간단하게 StackPanel의 속성을 사용해서 e-book을 만드는 실습을 해봤습니다. 이번에 다룰 소재는 Canvas라고 하는 Panel입니다. 이건 어떻게 보면 StackPanel과 화면상으로 보여지는 것은 같습니다. 하지만 가장 큰 특징이라고 할 수 있는 건 StackPanel에서는 안에 상속되는 개체가 Stack의 형태로 쌓이는 것에 비해서 Canvas 상에서는 개체 자체가 하나의 Position을 가지고 형성되기 때문에 정확한 픽셀 위치를 지정할 수 있다는 겁니다. 그래서 속성 자체도 위치에 관한 속성을 지닙니다.

 

 

위와 같이 Left와 Top , ZIndex에 관한 속성을 정의해줄 수 있습니다. 그래서 만약 Canvas상의 (0,0)에 표현하고 싶다고 하면 다음과 같이 정의됩니다.

 

 

그런데 좀 뭔가 의문이 생기지 않으신가요? 이렇게 픽셀을 정의해버린다면 만약 창 위치가 바뀌거나 크기가 조절이 된다면 과연 어떻게 아이콘이 배치가 될까요? 혹시나 해서 Canvas에 Margin을 줘보겠습니다.

 

 

Margin을 주니까 기존의 아이콘들의 위치도 또한 변했습니다. 즉 Canvas에서의 상대적인 픽셀 위치가 개체의 위치가 되는 겁니다. 만약 반대로 Canvas의 크기가 변하면 개체의 위치는 어떻게 변할까요? 그걸 확인해볼 수 있는 것이 바로 UI View에서 분할을 해보면 알 수 있지요.  

 

<Canvas를 사용했을 때의 개체의 위치> 

 

<StackPanel을 사용했을 때의 개체의 위치>

 

보면 아시겠지만 StackPanel은 개체의 위치가 지정되는 것이 아니라 화면을 기점으로 좌우 중심을 정하게 되어 있습니다. 그래서 화면 크기를 수정하면 그것에 맞춰서 개체들이 이동하게 됩니다. 그게 기본적인 StackPanel의 성질이지요. 반면에 Canvas에서는 Pixel이 고정되기 때문에 화면의 크기가 변해도 개체는 그 위치를 유지하게 됩니다. UI에서는 당연히 상하의 크기로는 안 변하니까 상관은 없지만 무언가 위치가 그대로 유지되길 원하면 Canvas를 쓰는게 좋겠지요. 그래서 UI상에서 snap view를 지원하는 경우에는 보통 Canvas를 사용하지 않겠지요. 그 때는 다른 무언가가 필요할 겁니다. 그에 대해서는 나중에 이야기하기로 하고 간단하게 Canvas의 Position속성을 활용한 예제를 보도록 하겠습니다. 우선 아무것도 없는 기본 프로젝트 상에서 Canvas 하나만 두고 이름을 그냥 canvas로 선언합니다.

 

 

이제 이 위에는 Position에 대해서 접근이 가능합니다. 그럼 마우스로 선택한 지점에 대해서 좌표점을 찍는 걸 해봅시다. 우선은 마우스로 선택하는 것 또한 하나의 터치이벤트가 될겁니다. 아마 이걸 만족시킬 만한 이벤트가 바로 OnTapped가 될겁니다. Canvas를 선택한 상태에서 오른쪽 Properties 창으로 들어가면 이벤트 관리창이 있습니다. 이중에서 Tapped 이벤트를 선택하고 더블클릭을 해줍니다.

 

 

당연히 이와 관련된 코드가 cs 파일상에 자동으로 생성됩니다. 아니면 메인페이지 내에 있는 OnTapped 이벤트를 작성하면 됩니다. 저는 후자의 방법을 이용해서 작성했습니다.

 

 

맨 처음 해볼 건 바로 마우스로 찍은 곳에 점을 찍는 겁니다. 그걸 위해서 우리는 두가지가 필요합니다. 하나는 찍은 점의 위치, 그리고 다른 하나는 찍은 점을 표현할 도형입니다. 기존에도 계속 나왔지만 도형을 cs에서 그리기 위해서는 네임스페이스를 추가해야 됩니다.

 

 

포인트와 원에 대한 정의는 다음과 같습니다.

 

아까 앞에서 나왔던 것처럼 Canvas에는 SetLeft같은 위치에 대한 속성이 나타납니다. 그래서 pt라고 정의한 값을 setLeft와 SetTop으로 넣으주면 됩니다. 그리고 그걸 Canvas에 종속시키게 되면 잘 표현이 되겠지요. 여기까지 하고 한번 보겠습니다.

 

마우스로 찍은 점마다 흰 점이 찍히는 것을 확인할 수 있습니다. 자 그럼 이값을 cs내에서 TextBlock을 생성해서 집어넣어주면 되겠지요. 이부분은 지난 포스트에서도 잠깐 나왔던 내용입니다.

 

 

이렇게 해주면 됩니다. 가령 가장자리에 있어서 글자가 안나올 경우를 대비해서는 조건문을 삽입해서 특정 픽셀보다 커지면 조금씩 빼주면 되겠지요. 결과는 다음과 같습니다.

 

이렇게 해주면 값이 잘 나오게 될겁니다. Canvas는 이렇듯 위치를 정확히 지정하여 표현할 때 많이 사용됩니다.