DeepZoom 강좌 1. Deep Zoom Composer를 이용하여 SeeDragon이미지(.sdi) 파일 만들기
DeepZoom 강좌 2. 실버라이트의 <MultiScaleImage> 컨트롤 사용
DeepZoom 강좌 3. Deep Zoom 마우스로 컨트롤 하기
DeepZoom 강좌 4. Deep Zoom 마우스 컨트롤 코드 살펴보기
DeepZoom 강좌 2. 실버라이트의 <MultiScaleImage> 컨트롤 사용
Deep Zoom 강좌가 진행중입니다. 이번에는 실버라이트에 새로 추가된 <MultiScaleImage>를 사용해서 Deep Zoom Composer로 만든 SeaDragon Image를 실버라이트 응용프로그램에 추가해 보겠습니다.
우선 Visual Studio 2008을 실행해서 메뉴의 File - New Project를 누릅니다. 새 프로젝트 대화상자에서 "DeepZoomSilverlight2Poster"라고 프로젝트 명을 입력합니다.
곧이어 나오는 Add Silverlight Application 에서 Project Type을 Web_Application Project로 선택을 하고 OK를 누릅니다. 그러면 실버라이트 프로젝트가 생성되죠.
이제 이전 강좌에서 만든 SeaDragon Image를 우리의 응용프로그램에 복사하겠습니다. 즉 웹에서 이미지들을 가져갈 수 있게 웹서버 루트 밑에 복사를 합니다. 우리의 경우 ClientBin 폴더에 복사를 하겠습니다. (노트: CilentBin 폴더는 빌드를 한번 해줘야 생깁니다. "F6" 키를 눌러서 빌드를 한번 진행해 주시면 생깁니다.) Deep Zoom Composer가 Export 한 폴더로 이동하여 OutputSdi 폴더 밑에 silverlight2deloperposter 폴더를 복사하여 VS 2008의 Solution Explorer에서 ClientBin 폴더에 붙여넣기합니다.
이제 Page.xaml 을 열어서 <Grid x:Name="LayoutRoot" Background="White"> 다음줄에 아래
코드를 입력합니다.
<MultiScaleImage Source="silverlight2deloperposter/info.bin" x:Name="msimgPoster" />
<MultiScaleImage> 컨트롤은 실버라이트 2에서 새로 추가된 컨트롤입니다. 이 컨트롤이 바로 Deep Zoom을 위한 컨트롤입니다. Source 에는 복사한 폴더명과 info.bin 파일을 지정합니다. xap 파일도 ClientBin 폴더에 생성되어 실행되기 때문에 상대경로로 지정합니다. x:Name=msimgPoster 는 코드 비하인드에서 사용할 이름입니다.
이제 F5를 눌러 실행을 해보겠습니다. 그러면 우선 아래처럼 우리가 원하는 Silverlight 2 Developer Poster가 보입니다.
우선 너무 작습니다. 전체 화면에 표시될 수 있도록 Page.xaml 을 수정하겠습니다. 제일 상위의 <UserControl> 에서 Width="400" Height="300" 을 삭제 합니다. 결과적으로 Page.xaml 파일을 아래와 같습니다.
<UserControl x:Class="DeepZoomSilverlight2Poster.Page"
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
>
<Grid x:Name="LayoutRoot" Background="White">
<MultiScaleImage Source="silverlight2deloperposter/info.bin" x:Name="msimgPoster" />
</Grid>
</UserControl>
이제 다시 F5를 눌러서 실행을 시켜 보겠습니다.
이제는 전체화면에 꽉 차서 표시가 되네요. 하지만 우리가 데모에서 흔히 보았듯이 마우스를 클릭하거나 마우스 휠을 돌려서 줌인/줌아웃이 안되네요. 네 마우스를 이용한 줌인/줌아웃은 다음 강좌에 자세한 내용이 있습니다. 다음 강좌로 넘어가겠습니다.
오일석