[Windows 8] Tap 이벤트 생성

Metro Style은 터치에 최적화된 UI구조입니다. 기존의 마우스와 같은 기기기반에서 벗어나 사람과 기기가 직접적으로 접촉하는 하나의 혁명이 아닐까요? 물론 기존에 터치를 활용한 기기는 많이 나와있었습니다. 특히 와콤 타블렛이나 애플 매직패드 같은 경우도 그런 일종이 아니었나 싶습니다. 하지만 이번처럼 모든 사용이 터치로 이용가능하고 타겟도 이동성을 고려한다는 측면에서 MS가 조금 새로운 도전을 하고 있는 건 아닐까 싶습니다.

 우선 오늘 소개해드릴 내용은 이런 터치로 만들 수 있는 이벤트 중 가장 기본적인 Tap 이벤트에 대한 언급을 해보고자 합니다. 탭이라는 건 말 그대로 무언가를 건드린다 라는 뜻입니다. 그런데 여기에도 조건을 여러가지로 부여할 수 있습니다. 우선 탭하기 전과 탭한 순간까지의 시간, 탭을 계속 하고 있는 과정, 탭을 떼기 전부터의 순간 등으로 말이지요. 물론 코드상으로 위와 같은 과정들을 나눠서 이벤트화시킬 수 있습니다. Windows 8 라이브러리에는 이런 이벤트가 TappedEventHandler라는 이름으로 관리되고 있습니다. 역시 입력을 주는 만큼 Windows.UI.Xaml.Input 이라는 네임 스페이스 상에서 정의되고 있습니다. 간단한 설명은 이정도로 하고 실습을 해보겠습니다. 우선은 프로젝트를 하나 생성하고 TextBlock을 Tap했을 때 이벤트가 발생하게끔 해봅시다.

 

 

이 상태에서 우측에 있는 속성 창을 보면 번개 표시가 되어 있는 부분이 있습니다. 이 것이 바로 이벤트를 생성해주는 버튼입니다.

 

 

지금 TextBlock이 선택되어 있는 상태에서 진행되어 위와 같이 type이 Textblock으로 나온 상태에서 번개표시를 눌러줍니다. 그러면 맨 밑쯤에 Tapped 라는 공란이 있습니다. 그 공란을 더블클릭해주면 이벤트가 생성됩니다. 옛날에는 개발자가 직접 메서드를 만들어줬었지만 요즘에는 저렇게 더블클릭만으로도 이벤트가 생성됩니다. 그러면 Xaml과 code 상 두군데에서 이벤트에 관련된 코드가 생성됩니다.

 

자 코드상으로도 들어가면 아래와 같이 Tap과 관련된 이벤트가 자동으로 생성됩니다.

 

이제 Tap을 했을 때의 결과를 새롭게 생성된 결과물안에 삽입만 해주면 Tap 이벤트에 관한 내용이 끝나게 됩니다. 한번 Windows Phone 7 예제에 있었던 Tap시 색상이 랜덤하게 바뀌는 내용을 한번 만들어보겠습니다. 우선은 Random 함수와 RGB를 표현할 바이트를 서두에 선언해줍니다. 참 단순하게 RGB만 표현할 것이 아니라 알파값도 들어간 ARGB 방식으로 접근해보겠습니다.

 

 

이제 탭을 한 경우는 이전 상태와는 다르게 바꿔줘야 하므로 Random 메서드 내에 있는 NextByte 프로퍼티를 사용합니다. 그러고 나서 그 색으로 다시 배경색이나 글자색을 지정해주면 눌렀을 때마다 색상이 변하는 것을 확인할 수 있겠지요.

그리고 참 색상을 쓰려고 하려면 아마 정해진 변수로 등록이 안될겁니다. 이 Color란 변수는 네임스페이스를 따로 추가해줘야 합니다.

바로 Windows.UI라는 네임스페이스가 추가되어야 됩니다. 아마 Default로는 정의가 안되어 있기 때문에 따로 써줘야 할겁니다. 다시 밑으로 내려가서 마저 채웁시다.

 

위와 같이 FromArgb 속성을 사용하면 해당 색상으로 clr이 적용됩니다. 그걸 아까 Name으로 지정한 txtblk의 Foreground으로 수정해주면 되겠지요.

 

끝입니다. 한번 결과를 확인해보겠습니다.

 

 

TextBlock을 누를때마다 색상이 바뀌는 것을 확인할 수 있습니다. 참고로 xaml에서 지정한 Name이 뜨지 않는 사람이라면 한번 build를 한 후에 다시 시도하면 잘 될겁니다.

 조금 응용해서 grid에도 Name을 준다음 grid의 배경색을 바꾸는 것도 시도해보겠습니다. 위에서 언급한 코드에서 수정을 거의 안했습니다.

 

Tap 이벤트 생성하는 것 생각보다 어렵지 않습니다. 그냥 위에서 언급한 내용을 조금만 수정해보면 그로써도 탭 이벤트가 자동으로 생성되었으니까요.