실버라이트로 WP7 앱 개발하기 - 이미지를 좀더 핸들링하는 방법

지난 포스팅까지 폰상에 이미지를 입히고, 웹상에 있는 이미지를 호출하는 방법을 XNA와 실버라이트 두 분야로 나눠서 진행했었습니다. 

그런데 Image를 삽입할 때 조금 헷갈리는 부분이 있지 않은지요?
사실 논리적으로 따지고 보면 이런 코드에서 이미지를 삽입할 때는 그 이미지를 직접적으로 코드상에서 불러오고 그것을 표현해야 합니다만, 지금까지 다룬 이미지 삽입은 이미지가 들어가 있는 경로를 표현한다던가 URL을 직접적으로 타이핑해서 이루어졌습니다.

이는 Source라는 속성때문이라고 볼수 있습니다. 책에 따르면 Source를 추적해보면 이 걸 bitmapSource라는 추상 클래스에서 상속한다고 나와 있습니다. Stream에서 bitmap을 로딩할 수 있게끔 특별한 정의를 한답니다.

한번 예제를 통해서 따라가보겠습니다.
실버라이트 환경에서 SilverlightTapToDownload1이라는 프로젝트를 생성합니다.
그리고 다음과 같이 content panel을 채워넣습니다.

단순히 이미지가 들어갈 곳과 이름을 지정한 것 뿐입니다.그리고 BitmapImage 클래스를 사용하려는데 먼저 System.Windows.Media.Imaging이라는 네임스페이스를 먼저 삽입해줘야 합니다.

우리의 목적은 MainPage를 손가락으로 탭하면 Uri개체에서 BitmapImage를 생성해서 Image의 속성에 할당하는 겁니다. 실제로 디버깅시에는 마우스로 화면을 클릭한다면 같은 효과가 나타나겠지요.
다음과 같이 MainPage.xaml.cs 부분을 처리해줍니다. 새로 삽입하는 함수는 OnmanipulationStarted입니다.

 실행하면 결과가 다음과 같이 나옵니다.

동영상에서 보이는 것과 같이 마우스로 클릭하면 예제의 사진이 출력되는 것을 확인할 수 있습니다.

명확하게 정의를 하자면 BitmapImage 클래스에서는 이미지를 여는 ImageOpened와 ImageFailed 를 정의하고 DownloadPrograss 이벤트를 가집니다.
그래서 지금 동영상에서처럼 클릭후 다운로드가 완료되면 출력이 되게 되는 것이지요.

물론 XNA처럼 Webclient를 사용해서도 수동으로 다운로드 받을 수도 있습니다. 다음과 같이 OnmanipulationStarted를 바꿔주면 됩니다.

결과는 위 동영상과 같습니다. 다만 코드 처리에서 SetSource를 통해서 결과를 보내줬다는데 차이가 있겠지요.

 지금까지 한 내용을 토대로 보면 우리는 직접적으로 content panel상에서  웹상에서든 어디에 있든 다양한 방법으로 이미지를 다운로드 받아서 그리고 여기에는 삽입이라는 개념이 들어가 있지요.
그런데 이런 과정을 코딩으로 처리할 수 있을까요? 다음 예를 같이 따라해보겠습니다.
우선 실버라이트 프로젝트로 SilverlightTapToLoad를 만듭니다.
앞에서 언급한 바른 습관을 길들이기 위해서 폴더를 생성하고 그안에 test 이미지를 삽입합니다.

자 이제 유심히 봐야 할 지점은 properties 부분의 build action이란 부분입니다.

다음과 같이 이미지가 resource로 처리하겠다고 되어 있습니다.

test를 제대로 해보려면 content panel도 다음과 같이 수정해줘야 합니다.

이제 리소스라는 개념을 사용하려고 합니다. 이걸 사용하기 위해선 사전에 System.Windows.Resources 를 추가해야 합니다. 그래서 목적을 이야기 하자면 화면을 눌렀을때 이벤트가 발생하면서 리소스에 접근하는 방식이지요.

아까와 같은 OnManipulationStarted 함수를 쓰되 기존 폴더에 있는 test 이미지를 불러서 resource로 적용시킨다는 점입니다. 결과는 다음과 같습니다.

그럼 한가지 의문점이 생깁니다. 지금과 같이 리소스로 할당하고 이미지를 불러오면 저렇게 url을 길게 써줘야 합니다. 그런데 단순히 앞에서 언급한 build action 항목을 content으로 하면 어떻게 될까요?

간단하게 url을 Image/10067287.jpg라고 처리해주면 됩니다. 그럼 이 두가지가 무슨 차이가 있는 걸까요?

이걸 보기위해선 파일의 내부를 드려다 볼 필요가 있을거 같습니다.
 우선 프로젝트 폴더의 bin/debug로 들어가면 xap 파일이 있습니다.

이걸 확장자를 zip로 바꾸신후 압축을 풀어보시기 바랍니다. 그럼 다음과같이

 

파일이 나오게 되는데 이중에서 결과 파일은 SilverlightTapToLoad.dll입니다.
그리고 build action을 content로 한 상태서도 동일한 작업을 실시했습니다.

 엇..  차이가 보이시나요? 앞에서 없던 Image라는 폴더가 생겨있습니다.

그럼 두개의 차이는 무엇일까요?

책에서 언급한 차이는 다음과 같습니다.
-resource로 이미지를 호출한 경우에는 결과파일의 .dll 파일에 비트맵이 들어 있습니다.
- content로 이미지를 호출하면 비트맵이 .dll 바깥에 있지만 xap를 풀어보면 이미지와 폴더를 볼수 있습니다.

 그래서 이렇게 하면 결론적으로 resource로 하면 이미지가 아예 프로그램속에 내장이 되고
content로 하면 프로그램과 이미지는 별개의 요소가 된다는 의미가 될겁니다.
물론 전자로 택하면 프로그램의 크기는 커지게 되고 후자로 하면 크기가 작아질겁니다.
물론 사용 용도가 틀려지겠지요. 많은 이미지를 차용해와야 한다면 전부 resource 화 시키는 것도 그렇고 이미지를 다운로드 받는 개념도 조금 그렇다면 두 방법을 혼용해서 쓰는 방법을 택할 수 있습니다. 크기가 작은 이미지에 대해서 사전에 resource화해서 xap에 집어넣고, 차후에 해상도가 좋고 크기가 큰 파일을 비동기식으로 다운로드하는 방식을 채택한다면 프로그램의 효율성이나 운용 측면이 좋아지지 않을까요?

아무튼 여기까지가 이미지를 Source에서 호출하는 방법을 다뤄봤습니다.