[Windows 8] Building Metro Style App (2)

지난 포스팅에선 Tile의 이미지를 적절하게 수정하는 작업을 거쳤었는데 이번에 해 볼것은 Xaml 코드로 Image Viewer를 만드는 것입니다.  일단은 지난 프로젝트에서 계속 이어나가도록 하겠습니다. 첨부파일은 받아두시고요.

Images.zip

(윈도우 상에 기본적으로 깔려있는 이미지와 똑같습니다.)

자, 지난번에 만든 프로젝트는 이른바 Blank Application Page입니다. 그렇기 때문에 당연히 Grid가 횡합니다. 이 부분을 다음과 같이 수정해줍니다.

기존에는 분명히 리소스로 Background가 처리되어 있었지만 위와 같이 색을 지정해줄 수 있습니다. 물론 결과값은 똑같습니다. 그리고 Image Picker를 통해서 뽑기 위해서는 그 이미지가 들어갈 공간을 StackPanel로 지정합니다. 물론 이 이미지를 불러오기 위해서 폴더를 지정했는데 지금은 저 Images 라는 폴더가 없지요. 그래서 Project Explorer상에서 생성하고 Assets에 들어있는 Logo.png파일을 집어넣습니다. 그리고 실행시켜보기 바랍니다. 

 

 

이제 해줘야 할 것은 Image를 불러오기 위해서 File Picker를 생성해야 합니다. 물론 이를 위해서는 당연히 이벤트를 생성하고 그걸 실행시킬 핸들러에 대한 처리가 필요합니다. 그래서 지금 열려있는 페이지인 BlankPage.xaml에 숨김처리되어 있는 BlankPage.xaml.cs 에 이벤트를 형성시켜 줍니다.

 

 

물론 탭탭 기능을 사용해서 자동으로 이벤트를 생성해주면 좋을 거 같은데 그렇게 하면 위와 같은 레퍼런스에 관한 이벤트가 생성되지 않더군요. Hol에 나와있는대로 지정해봤습니다. 그런데 지금은 이 img_Tapped라는 항목에 오류가 생깁니다. 당연히 이에 대한 정의가 되어 있지 않기 때문이지요. 그래서 여기에 가까이 가져가면 왼쪽에 한 아이콘이 생성됩니다.

 

 

이게 바로 이벤트에 대한 핸들러를 자동으로 생성해주는 도구입니다. 딱 이걸 누르면

 

 

와 같이 자동으로 핸들러가 생성됩니다. 사실 이미지를 눌렀을 때의 반응은 img1,img2,img3를 눌렀을 때나 다 똑같기 때문에 이에 대한 이벤트 핸들러는 공유가 되어야 합니다. 그래서 위의 탭했을 때의 이벤트를 img2 img3에 대한 것도 생성합니다.

 

 

그럼 이제 이 img_Tapped에 관한 이벤트를 정의해줘야 하는데 우리는 다시 새로운 PickImage라는 메서드를 생성하도록 하겠습니다. 그래서 그에 대한 입력값으로 Image를 받아오게끔 하는 것이지요.

 

  

 

자 이제 PickImage라는 메서드를 정의해야 합니다. 그런데 그전에 앞서서 알아둬야 할 것이 바로 비동기식 처리라는 겁니다. 길게 설명은 못하지만 비동기식이라고 하면 같은 스케쥴 시간에 이 일만 처리하는 것이 아니라 다른 일과 같이 처리하면서 여유가 생길 때마다  처리를 하는 것이지요. 전의 동기식 처리와 같은 경우에는 한 일을 처리하기 위해서는 이 일에만 집중해야 했기 때문에 처리속도는 빨랐지만 그동안 아무 동작도 못하는 것이 단점이었습니다. 그래서 점점 요즘 프로그래밍의 패턴이 비동기식 처리를 요구하고 있는 편입니다. Windows 8 에서도 이런 처리방법을 지향합니다. 그래서 단일하게 수행하는 메서드의 경우에는 async를 붙임으로써 비동기식 처리를 요구합니다. 그래서 이 PickImage도 async를 붙여서 생성합니다.

 

 

 자 이걸 해주기 전에 앞서서 몇가지 네임스페이스를 첨가해줘야 합니다. File Pick를 사용하기 위한 네임스페이스와 이미지를 불러오기 위한 네임스페이스가 첨가 되어야 하겠지요. 상단부에 다음과 같이 첨가해줍니다.

 

 

아마 Windows.UI.Xaml.Navigation 이하는 없는 항목일 겁니다. 이 부분을 이 부분에 삽입해주면 됩니다.

이제 메인인 PickImage를 처리해줘야 할 차례입니다.

 

 

간단하게 설명하자면 FilePicker의 원리는 어떤 필터를 설정하고 그 필터에 걸러지는 파일을 stream 상에 올리는 겁니다. 그걸 비동기식, 즉 오는 순간순간을 읽고 그 정보를 가지고 bmp 파일을 이 프로그램 내에서 생성하게 되는 것이지요. 당연히 우리가 첨부한 파일의 포멧은 png 타입이므로 이걸 필터로 지정한 겁니다. 자 한번 실행해볼까요?

 

이렇게 사진이 선택되면 저장되는 것을 확인할 수 있습니다. 만약 첨부된 파일을 사진 폴더에 집어넣고 선택한다면 멋진 결과가 나오겠지요. 다음과 같이 말입니다.

 

 

이게 그냥 단순한 File Picker의 사용방법이었습니다.

자 마지막으로 Orientation에 대한 고려를 해봐야 합니다. 사실 사용자가 어떤 디스플레이 모드를 가지고 있는지를 모르기 때문에 그에 해당하는 코드또한 작성해서 넣어줘야 합니다. 우리의 사용자는 소중하니까요.

우선 모르시는 분을 위해서.. 가로로 놓는 모드를 LandScape 모드라고 합니다. 그리고 세로로 놓는 모드를 Portrait 모드라고 하는데 이를 확인할 수 있는 창은 바로 시뮬레이터의 좌측에 있습니다.

 

 

두개의 버튼이 있는 좌로 90도를 돌릴 거냐 우로 90도를 돌릴거냐의 차이입니다. 물론 실제 자이로스코프가 내장된 컴퓨터에서 실행시킬 경우에는 직접 돌려보면 해당 모드를 확인할 수 있습니다. 그런데 가끔은 이런 Orientation이 제대로 안 먹힐 때가 있다는 것이지요. 이때는 Orientation을 바꿔주는 것에 대한 이벤트가 생성되어야 합니다. 다시 코드로 돌아옵니다.

 일단 디스플레이에 관한 기능을 사용하기 위해서는 해당 네임스페이스를 첨가해줘야 합니다.

 

 

역시 맨 밑의 네임스페이스가 없을 겁니다. 첨부시켜주시고 메인페이지안에 다음의 이벤트 핸들러를 생성합니다.

 

 

역시 탭탭 신공이 안먹히네요. 아마 다음 버전에선 개선해주겠지요. 해당 코드는 그냥 직관적으로 짜주시면 됩니다. 그래서 현재 Orientation에 대한 정보를 받아오고 그게 맞으면에 대한 설정 다르면에 대한 설정을 각각 해주시면 되는 거지요. 다음과 같이 구성합니다.

 

 

자 모든게 끝이 났습니다. 한번 확인해보겠습니다.

 

 

근데 조금 이상한게 이렇게 코드로 처리했을 때와 처리를 하지 않았을 때의 차이를 못느끼겠습니다. 물론 좀더 유심히 보면 알겠지만요. 여기까지가 간단한  File Picker와 Display Orientation에 대한 설명이었습니다.