[Windows 8] Release Preview 체험 및 메트로 스타일에서의 이미지 호출

한국시간으로 6월 1일 새벽 4시 부로 최종버전인 Windows 8 Release Preview가 출시되었습니다. 보통은 Release Candidate라고 해서 출시 되었는데 올해는 RP라는 이름으로 나왔습니다. 관심이 있으신 분은 무료로 설치가 가능하니까 체험해보시기 바랍니다. 개발하는 사람에게는 도전하는 자세도 가끔씩 필요한거 같네요.

 일단 Visual Studio 12 RC로 바뀌었습니다. 전반적인 외관이 기존의 Express 버전에 비해서 깔끔해지고 약간 기존의 스타일로 회귀한 느낌이 듭니다.

 

 

그리고 무엇보다도 기존에는 Metro Style App만 개발할 수 있었지만 이번에는 Professional 버전을 지원하면서 다양한 어플리케이션을 구현할 수 있습니다. 저같은 경우는 키넥트에 관심이 많은데 키넥트 SDK를 설치하니까 바로 라이브러리로 호출할 수 있었습니다. 그런데 아직까지는 Metro Style에서 직접적으로 키넥트를 쓸 수 없다는게 조금 아쉽네요..

 참고로 이번 이매진컵에서도 튀니지의 한팀은 MetroStyle상에서 컨트롤을 키넥트로 제어한 팀이 있었습니다. 어떤 식으로 진행되는지는 모르겠지만 아무튼 추후에도 그런 기능이 지워되리라 예상합니다.

 

 이번에 할 내용은 아주 기본적으로 Metro App 상에서 이미지를 호출하는 방법을 다뤄보고자 합니다. 그런데 사실 xaml을 다루실 줄 아시는 분들이라면 이 부분은 지난 포스트에서 다뤘던 내용보다 훨씬 쉽습니다. 그냥 Image의 source를 웹상으로 할건지 프로젝트에 포함시키는 방법으로 할건지가 차이가 있는 겁니다. 실상 공개되어 있는 HOL인 Contoso Cookbook상에서는 SampleData에 이미지들을 다 연결시키는 방안으로 멋있게 구현했습니다.

 

 우선은 웹상에서 이미지를 호출하는 방법을 해보겠습니다. 일단 프로젝트를 blank Application으로 하나 생성합니다.

 

 

확실히 생성할 수 있는 템플릿이 많아졌습니다. 추가적으로 부연하자면 기존 Visual Studio 2010에서 사용했던 extension Tool들을 그대로 활용할 수 있는 것 같습니다. 저같은 경우는 VS10x code map이라는 tool을 적용시키는데 이는 전반적인 코드의 구성을 화면 좌측에 보여주기 때문에 무척 편리한 툴입니다. 아무튼 이렇게 어플리케이션은 생성됩니다.

 

 이제 여름이 다가오니까 해변 그림을 따 오겠습니다. 다음과 같이 xaml상에 구현해주면 그 결과가 바로 화면에 출력되게 됩니다.

 

 

그런데 옆에 테두리가 신경쓰이시는 분은 Image의 속성에 Stretch를 추가시켜주면 됩니다. 애초에 원본이미지가 제 것의 경우에는 1600x1200이기 때문에 Stretch 속성을 fill로 처리해도 깨지는 현상이 없습니다.

 

 

원래가 작은 이미지였다면 HorizontalAlignment나 VeticalAlignment를 사용한다면 사진의 위치를 자신이 원하는 배열대로 선택할 수 있습니다. 물론 더 잘 아시는 분이라면 grid속에 StackPanel을 삽입해서 좌우로 쭉 나열된 사진첩을 구현할 수 있겠고 또 definition 기능을 사용해서 표처럼 구현할 수 도 있겠지요.

 이렇게 웹에서 호출하면 동적으로 이미지를 불러오기 때문에 전체적인 어플리케이션의 크기가 작지만 그걸 캐시에 넣고 호출해오는 과정에서 약간의 딜레이가 발생할 수 있습니다. 물론 그런 문제를 해결하는 방안은 바로 프로젝트에 이미지를 포함시키는 방안이 되겠지요. 앞의 딜레이 문제를 체험해보려면 한번 버튼 두개를 주고 각각의 이벤트를 걸어서 하나는 웹에서 호출하는데 걸리는 시간, 다른 하나는 포함된 이미지를 호출하는 시간을 비교해보면 금방 알 수 있겠지요. 자 일단 이미지 하나 다운로드 받습니다. 그리고 그렇게 받은 이미지를 Solution Explorer상의 Assets 폴더에 삽입해봅니다.

 

 

이러니까 바다에 가고 싶네요. 물론 Assets에 말고 사용자가 직접 Images라는 폴더를 만들어서 하면 조금 관리의 편리성은 있겠지요. 그리고 기존에 있던 xaml상의 Image를 다음과 같이 수정해줍니다. 거기에 버튼을 하나 삽입해줍니다.

 

이제 cs코드를 구성해야 되는데 아까 Image의 이름을 img1과 img2로 했으니까 img1과 img2에 대한 소스를 해당 주소로 해주면 되겠지요.일단 버튼을 눌렀을 때의 이벤트를 생성하기 위해서 화면상의 버튼을 더블클릭해줍니다. 이와 관련된 코드는 자동으로 짜줍니다.

그리고 img를 이 코드상에서 사용하려면 BitmapImage를 선언해야 되는데 그전에 네임스페이스를 하나 추가해줘야 합니다.

 

 

 바로 Imaging이라는 네임스페이스가 추가되어야 합니다. 그리고 웹에서 불러오고자 하는 이미지와 프로젝트상의 이미지에 대한 주소를 메인 클래스상에 uri로 정의를 합니다. 이제 해당 주소의 파일을 앞의 xaml상에서 선언한 img1과 img2에 박아주면 되겠지요. 아까 자동으로 생성한 버튼의 이벤트에 다음과 같이 처리해줍니다.

 

 

이게 전부입니다. 한번 결과를 보실까요?

 

 

우측에 있는 이미지가 프로젝트상의 이미지, 좌측이 웹상에 호출하는 이미지 입니다. 조금 딜레이가 느껴지시죠?

 여담으로 기존 CP버전에서는 디버깅시 SplashImage가 시계표시로 떴었는데 RP에서는 그냥 x로 나옵니다. 그럼 넣어주시는게 좋겠지요. 아무튼 여기까지가 무척이나 쉬운 이미지 호출 방법 소개였습니다.