[Windows 8] Building Metro Style App (3)

이번 포스팅에서 해볼 내용은 App Bar 기능을 이식하는 것과 Windows 8의 특징인 snapping과 setting bar를 집어넣는 방법에 대해서 알아보겠습니다. 지난 시간에 한 Image Picker를 제대로 했다면 하나의 프로젝트가 있을 겁니다. 그걸 토대로 계속 진행해보도록 하겠습니다.

 

자 우선 BlankPage.xaml에 Application Bar를 하나 삽입하고 그안에 버튼 세개를 삽입합니다.

 

 

물론 기존에 만든 LayoutRoot안에 넣어주면 다음과 같은 결과를 얻게 됩니다.

 

 

재미있는 것은 이 개체들은 xaml 상에서 개체가 선택되었을 때만 보인다는 겁니다. 그도 당연한 것이 이 개체들은 appbar에 속해있기 때문입니다. 평소에는 안보이다가 밑을 선택했을 때 나타나는 개체가 바로 appbar인 겁니다. Windows 8 개발 가이드에도 왠만하면 화면에 버튼을 넣지 말고 AppBar상에 삽입해서 가독성을 높이라고 했습니다. 따라서 이것도 평소에는 안보이는게 좋겠지요.

 자 이제는 버튼의 모양을 수정해볼 차례입니다. 기존에 Button이라고 되어있는 개체를 다음과 같이 수정합니다.

 

 

우리가 Windows 8의 AppBar에 달려있는 버튼을 보면 위와 같은 네모형 버튼이 아니라 원형 버튼입니다. 지금 생성한 것은 원형 버튼으로써 뒤로 돌아가기 위한 Back 버튼을 생성한 겁니다. 그런데 지금 위와 같이 한 건 화살표 이미지를 삽입한게 하니라 Wingdings 3라는 폰트에서 차용해온 화살표를 이용한건데 문제는 이 폰트가 Visual Studio 11에서는 적용이 되지 않는 규격이라는 겁니다. 그냥 이건 구글링을 통해서 찾아야 합니다. 위와 같은 Back 화살표는 Text에 Ú를 삽입해야 합니다. 그러면 다음과 같은 결과를 얻을 수 있습니다.

 

 

이제 버튼이 생겼으니 이 버튼에 대한 인터렉션에 대해서 고려해봐야 합니다. 그런데 마우스나 터치로 줄 수 있는 반응은 총 4개로 나눌 수 있습니다

- PointerMoved : 포인터를 갔다댔을 때

- PointerExited : 포인터가 버튼을 선택되어 있는 상태에서 빠져나갈 때

- PointerPressed : 포인터가 눌려졌을 때

- PointerReleased :  포인터가 풀어졌을 때 ( 이때는 버튼을 누르고 난 후가 되겠지요)

그래서 위의 경우에 따른 이벤트들을 각각 지정해줘야 합니다. 그래서 숨김 코드속에서 다음과 같이 작성해줍니다.

 

 

물론 지난 포스팅에서 알려드린 방법을 사용하면 이벤트 핸들러는 자동으로 생성됩니다. 누차 강조했지만 탭탭 신공은 사용하지 마세요. 아직 조금 불안정합니다.

일단 이렇게 이벤트를 지정하면 나중에 Button의 종류만 바꿔주면 간단하게 코드를 짤 수 있겠지요.

이제는 버튼의 기능을 만들어야 되는데 xaml을 보시면 알겠지만 Button1이 버튼이 아닙니다. 그래서 각각의 기능을 수행하기 위해서는 원의 영역을 만들어서 충돌이벤트를 만들어줘야 합니다. 때문에 코드상으로도 원을 생성해줘야 합니다. 이를 위해서는 네임스페이스를 추가해줘야 합니다. 또 컬러도 사용해야 하므로 UI에 관한 네임스페이스도 추가해야 합니다.

 

 

이제 코드로도 원을 그릴 수 있습니다. 다음과 같이 각각의 이벤트를 작성해줍니다.

 

 

차이가 거의 없습니다. 다만 마우스를 움직였을 때 버튼위에 포인터가 올라가면 LightGray로 변하는 모습을 표현한겁니다. 그리고 눌렀을때 색반전이 일어납니다. 결과는 한번 보시지요.

 

 

이런 식으로 구현이 됩니다. 나머지 버튼들도 다 수정을 해보시기 바랍니다.

 

 

위와 같이 된다면 보기도 좋겠지요. 참고로 Forward 화살표의 코드는 ©, Return화살표의 코드는 ? 입니다.     

그리고 너무 따닥따닥 붙어있는 것도 안 좋기 때문에 중간에 Rectangle 요소도 삽입했습니다. 이정도 하면 어느정도의 AppBar는 스스로 만들어 볼 수 있을 겁니다. 아참 물론 각 버튼에 대한 이벤트 처리도 코드상에서 해줘야 합니다. 다들 아시는 거겠지요?

 

 

이제 다음 과정으로 해볼 것은 Windows 8 의 특징 중 하나인 Snapping 기능을 이용해보자는 겁니다. Snapping이라고 하는 것은 다중 작업을 하기 위해서 화면을 분할해서 보여주는 형식입니다. 그런데 기존에는 기존 형식을 유지하면서 화면이 분할되었지만 Windows 8 에서는 Template자체가 변합니다. 다음 그림을 보여드리면 조금 이해가 쉬울 것 같습니다.

 

 

위와 같이 창을 두개로 나눠서 보되 카드게임이 세로로 배열된 것을 확인할 수 있습니다. 이걸 지금 하고 있는 프로젝트에도 적용해보고자 합니다. 우선 이기능을 쓰기 위해서는 또 네임스페이스를 추가해줘야 합니다.

 

 

그리고 메인 페이지 상에 다시 이벤트 하나를 생성해야 합니다. 이번에는 조금 복잡합니다.

 

 

Hands On Lab 상에는 ApplicationLayout이라는 개체가 있다고 하는데 여기에는 없네요. 그래서 한번 구현해봤습니다. 물론 이렇게 굳이 안하더라도 xaml 코드 상에서 구현해줘도 됩니다만.. 그냥 이렇게도 해봤습니다.

 ViewState는 총 3개로 나눌 수 있습니다. 채워진 상태를 나타내는 Filled. 전체 화면을 나타내는 FullScreen, 그리고 우리의 목적인 Snapped로 나눠서 볼 수 있습니다. 각각에 해당하는 해상도를 정해주면 됩니다.  기본적인 해상도를 1366x768이라고 가정했습니다.

 

위와 같이 구성하면 결과는 다음과 같습니다.

 

 

그런데 사실 여기에는 치명적인 단점이 있습니다. 첫번째는 앞에서 언급한 바와 같이 해상도를 코드 상에서 미리 지정해놔야 한다는 점, 그리고 두번째는 snapping 이 된 상태에서 rotate를 하면 snapping이 풀려버린다는 점입니다. 물론 이 부분은 코딩으로 충분히 처리할 수 있으나 더 공부한 후에 소개하도록 하겠습니다. 이것으로 snapping에 대해서도 알아봤습니다. 지금까지 다뤄보면 차라리 WPF상에서 구현해도 편하지 않을까 하는 생각을 해봅니다.

 

마지막으로 Setting charm을 만드는 방법에 대해서 알아보고자 합니다.

Windows 8에서 setting창은 어떤 프로그램에서든 같은 규격을 띄고 있습니다. 물론 메트로 앱에서만 한정적이지만 옆에서 튀어나와 원하는 작업을 수행하는 UI를 구성하고 있습니다. 그리고 밑에는 시스템에 대한 간략한 정보가 뜨게끔 말입니다. 이것 또한 코드로 구현해보겠습니다. 일단 이것도 구현하기 위해서는 네임 스페이스가 추가되어야 합니다.

 

 

 일단은 마지막 Button3를 눌렀을 때 해당 기능이 실행되도록 하겠습니다. 이를 위해서 다음과 같이 작성합니다.

 

 

우선 이 이벤트가 실행되기 위해서는 버튼이 눌렸을 때겠지요. 그런데 사실 PointerPressed나 PointerReleased에 넣었을 때 반응ㅇ은 지금 상태에서는 똑같습니다. 다른 건 정작 터치를 사용할 때겠지요. 아시다시피 Pressed 상태에서는 다양한 이벤트가 나올 수 있습니다. 그냥 눌렀다 땐 상태(물론 이때가 Released겠지요)도 있을 수 있고 계속 누른 상태(Hold)상태도 있을 겁니다. 다양한 경우의 수가 나올 수 있는 겁니다. 일단 여기까지만 하면 Setting Charm은 형성됩니다.

 

 

그런데 이것만 할려고 Setting Charm을 해놓은 건 아니겠지요. 여기다가 설정 메뉴를 추가시켜야 합니다. 여기서 구현하고자 하는 건 사진폴더내의 png파일 뿐만 아니라 jpg파일도 필터링 할 수 있는 기능을 삽입하고자 합니다. 우선 기존 코드를 조금 손봐줍니다.

 

 

이렇게 변수형으로 선언해줍니다. 물론 밑의 PickImage 메서드도 해당 문구를 바꿔줘야겠지요.

 

 

자 이제 추가해야 할 것은 SettingCommand입니다. 먼저 이 명령을 사용하기 위해서는 다음의 네임스페이스가 필요합니다.

 

 

그리고 아까 PointerReleased에 작성했던 코드 위에 다음 코드를 작성해서 넣어줍니다.

 

사실 Hands On Lab이 Developer Preview를 기반으로 작성되어 있는지는 모르겠지만 이 부분도 수정이 가해져야 할 것 같습니다. 옆의 SettingsPane에 아이콘을 삽입하기 위해서는 하나의 이벤트로써 형성되어야 합니다. 그래서 그안에서 이뤄져야 하고요. (아마 UI의 통일성을 위해서 이렇게 바뀌지 않았을까 하는 추측을 해봅니다. 그리고 다음 이벤트를 채워줍니다.

 

 

이전 버전에서는 그냥 명령을 추가시키는게 가능했었지만 CP로 넘어오면서 이벤트속에서만 명령을 추가할 수 있게 되었습니다. 그래서 위와 같이 작성해준 겁니다. 자 그럼 이제 마지막으로 SettingsCallback 메서드를 작성해주면 되겠지요.

 

 

이제 끝났습니다. 참 디버깅을 했는데 파일이 선택안됬을시, 즉 취소 버튼을 눌렀을 때 오류가 발생하는 것이 확인되서 다음과 같이 수정해줍니다.

 

파일이 없을때 그냥 넘어가도록 예외처리를 해주는 게 답니다. 별다른 수정이 필요하지 않습니다. 자 한번 결과를 보겠습니다.

 

 

긴 시간에 걸쳐서 Application Bar / Snapping / Setting Charm을 만드는 방법에 대해서 다뤄봤습니다. 생각보다 어렵지 않고 여러분도 얼마든지 할 수 있습니다. 그럼 다음 포스팅에서 뵙겠습니다~!