[Windows 8] Tap 이벤트의 응용

지난 포스트에선 단순히 Tap 이벤트를 써보는 걸 해봤었는데 이번에는 그걸 조금 응용해봅시다.

우선 들어가기에 앞서서 xaml 코드를 보면 VerticalAlignment니 HorizontalAlignment가 요소에 들어가 있는 걸 보셨을텐데 이건 전체를 감싸고 있는 Grid내에서 해당 요소의 위치를 임의로 배졍하는 역할을 합니다. 한번 차례대로 볼까요?

 

 

 여기서 Stretch를 제외한 모든 조건을 적용해서 Grid상에서 각 요소가 어디에 위치해 있는지를 확인해보겠습니다.

폰트 사이즈만 적절히 조절한다면 위와 같은 결과를 얻을 수 있을 겁니다. 그런데 한가지 궁금한 점!

만약 TextBlock을 선택했을 때 색상이 변하게 하려면 어떻게 할까요? 지난 시간에 했던 것처럼 하자니 TextBlock마다 이름을 넣기도 힘들고 각각의 랜덤함수를 고려해서 색상을 재배열해야 되기 때문에 조금 골치가 아픕니다. 그러면 아예 이름을 빼버리는게 어떨까요?

 

 사실 많은 개체를 다룰 때에는 일일이 네이밍을 할 필요가 없습니다. 우리가 그 요소에 바라는 것은 각각을 구별할 이름이 아니라 그 요소에게 바라는 이벤트일 뿐이니까요. 지난 번처럼 랜덤 함수를 메인 클래스에서 놓고 이벤트가 일어날때마다 해당 핸들러가 동작하면 랜덤함수는 각각 다르게 입혀지겠지요. 어차피 각각의 이벤트의 원리는 동일합니다. 똑같이 rand.NextByte를 통해서 각각의 색상을 뽑아낸 다음 그걸 Foreground로 입히게 되는 것이죠.

 결론을 말하자면 xaml코드내에 있는 모든 TextBlock의 이벤트는 같다는 결론이 나옵니다. 랜덤함수를 통해서 나오는 값만 다르게 들어가면 되니까요.

 

지난 포스트에서 했던 것처럼 이벤트 Properties 창에서 Tapped항목을 더블 클릭해주면 위와같이 이벤트가 생성되고 관련 코드가 cs 파일에도 생성됩니다. 자 아까 말한대로 모든 TextBlock의 이벤트는 동일하므로 위 이벤트를 복사해서 집어넣읍시다.

 

자 동일하게 이벤트가 작성되었으므로 지난 시간에 한 코드를 그대로 대입해보겠습니다.

 

기존과 달라진게 있다면 요소별 이름이 없기 때문에 들어오는 족족 txtblk라는 이름을 달고 그에 따른 속성값들을 변경하게 했습니다. 결과는 다음과 같습니다.

물론 위의 것이 우리가 원하던 정답이긴 하지만 조금더 간편하게 바꿀 수 있습니다. 지금 TextBlock이 Grid안에 상속되어 잇는 상태이므로 Grid 내에서 TextBlock을 찾는 조건문을 삽입할 수 있습니다. 우선 TextBlock에 있던 이벤트들은 다 삭제하고 Grid상에서 Tap 이벤트를 하나 생성합니다.

이제 cs 코드로 넘어와서 살펴봅니다.

 

여기서 중요한 건 e라는 겁니다. e라고 정의되어 있는 TappedRoutedEventArgs는 이벤트 발생시 해당 이벤트에 관련된 정보를 코드로 그대로 가져와서 쓸 수 있습니다. 여기서 Tap을 선택했을 때 그것에 대한 것이 TextBlock인지만을 찾아주면 됩니다.

 

앞이랑 코드가 거의 비슷합니다. 다만 이렇게 취함으로써 xaml코드가 조금 간편해졌습니다. 결과는 앞의 동영상과 동일하게 나옵니다. 그런데 사실 이렇게까지 grid상에서 이벤트를 만들 필요도 없습니다. 앞에서 한 내용을 응용하면 페이지에서의 이벤트를 생성해서 거기도 똑같이 취해주면 되니까요.

 그런데 이 구조는 신기합니다. 일단 xaml코드를 보시겠습니다.

 

얼핏 보면 숨은 그림 찾기 처럼 느껴지겠지만 위 코드에 이벤트핸들러가 있을까요?

겉으로는 드러나있지 않지만 실제로는 가상의 이벤트가 있습니다. 그 중하나가 계속 이야기 하고있는 Tapped인데 가상으로 쓰이고 있는 이벤트핸들러상에서는 OnTapped라고 정의됩니다. 그래서 xaml 상에 이벤트가 드러나지 않습니다. 그럼 바로 코드로 가서 다음과 같이 작성해줍니다.

 

protected override 라고 치고 스페이스키를 치면 위와 같은 가상의 이벤트 핸들러가 나타나게 됩니다. 역시 똑같은 TappedRoutedEventArgs를 가집니다. 즉 탭을 했을 때의 정보가 넘어온다는 뜻이겠지요. 다만 넘겨주는 요소가 없기 때문에 기존 이벤트와는 다르게 sender가 없습니다. 일단 위와 같이 하고 아래와 같이 코드안을 채웁시다.

역시 결과는 같습니다.

사실 지금과 같은 구성은 Charles Petzold씨의 Programming Windows sixth edition 에서 나오는 내용을 재구성해보고 있습니다만. 왜 이렇게 설명을 했을까요?

 제가 생각하기에 Tap 이벤트를 생성하는 기초적인 단계를 거쳐서 TextBlock에서 Grid로, 또 Grid에서 Page로 Tap 이벤트를 형성하는 과정을 언급하려고 그랬던 건 아닐까 하는 생각을 가져봅니다. 그래서 뭔가 스탭을 하나하나씩 밟고 가는 과정이랄까요? 그래서 저는 이분의 책이 좋습니다. 뭔가 하나씩 따라가면서 알게되고 신기하게 느껴지는 거랄까요?

 아무튼 여러분들도 이런 기분을 느껴보셨으면 좋겠네요. 여기까지였습니다.