Silverlight (2) – Deep Zoom & Expression Blend 12주 실습강의 2010. 1학기, 소프트웨어 설계 및 실험(Ⅰ) Silverlight (2) – Deep Zoom & Expression Blend

Preview Deep Zoom Expression Blend 3 실습 과제 주의사항 개요 Example Demo Deep Zoom Composer 설치 간단한 실습 Expression Blend 3 10가지 주요 기능 SketchFlow 설치 실습 과제 주의사항

Deep Zoom – 개요 Silverlight 2 부터 추가된 기능 고해상도의 사진을 응용 프로그램의 성능에 영향을 거의 주지 않으며 빠르게 확대 및 축소 가능 가능한 예제 시나리오 매우 크거나 해상도가 높은 이미지 탐색: 커다란 지도의 일부를 확대하여 다양한 수준의 세부 정보를 보고 마우스를 사용하여 지도 표면에서 뷰를 이동 3-D 사진: 방을 360도로 보여 주는 여러 장의 연속적인 사진을 찍은 뒤 사용자는 서로 연결된 사진으로 방 전체를 돌아볼 수 있습니다. 광고: 광고의 전체적인 테마를 나타내는 해상도가 상대적으로 낮은 이미지를 만든 다음 제품에 대한 인상과 데이터가 추가된 고해상도 이미지로 점진적으로 진행. 광고가 포함된 페이지를 처음 로드한 후 점차적으로 해상도가 높은 이미지를 로드하면 광고가 점차 또렷해지면서 독자의 주의를 끌 수 있습니다.

Deep Zoom – Demo http://memorabilia.hardrock.com/

Deep Zoom – Deep Zoom Composer 설치 http://www.microsoft.com/downloads/details.aspx?familyid=457b17b7-52bf-4bda-87a3-fa8a4673f8bf&displaylang=en

Deep Zoom – 간단한 실습 (1)

Deep Zoom – 간단한 실습 (2)

Deep Zoom – 간단한 실습 (3)

Deep Zoom – 간단한 실습 결과 마우스 휠 조작 더 다양한 예제를 만들어 보고 싶으신 분은 http://silverlightsdk.net/30 를 참고하세요.

Expression Blend 3 – 개요 Silverlight과 .NET을 위한 디자인 도구 XAML, C# 및 VB IntelliSense의 강력한 코드 편집 기능과 향상된 작업 영역 및 디자인 화면 제공 Silverlight, WPF, XAML, C#, VB 같은 산업 표준 .NET 기술을 사용하여 안정성을 보장하며 손쉽게 확장 및 액세스 신뢰성과 보안이 강화된 응용 프로그램을 개발 가능 주로 디자이너를 위한 도구 아이디어를 구체화시키는 도구로도 활용 가능 (SketchFlow)

Expression Blend 3 – 10가지 주요 기능 SketchFlow 코드 작성 없이 가능한 대화형 작업 디자인 타임 데이터를 사용하여 효율적인 UI를 더 빠르게 디자인 디자인 자산 활용 - Adobe Photoshop 및 Adobe Illustrator 가져오기 IntelliSense를 사용한 코드 편집 스타일 및 사용자 지정 Silverlight 및 WPF 지원 개선된 UI Team Foundation Server와 통합 워크플로

Expression Blend 3 – SketchFlow

Expression Blend 3 – 평가판 설치 http://www.microsoft.com/downloads/details.aspx?displaylang=ko&FamilyID=e82db5e2-7106-419e-80b0-65cce89f06bb

실습 과제(사진 갤러리 만들기)

주의사항 컨트롤을 배치 후, 반드시 ID로 사용할 이름을 작성해주세요. Blend에서는 컨트롤의 ID 기본값이 설정되어 있지 않습니다. XXX.xaml 파일을 수정한 후에 반드시 저장을 하세요. 그렇지 않으면 .xaml.cs 파일에서 각 컴포넌트의 ID에 접근할 수 없습니다. 실행 전에 프로젝트 탭의 ‘프로젝트 다시 빌드’를 한 후 실행하여야 합니다.

Silverlight with Blend (1)

Silverlight with Blend (2) Mainpage.aspx가 있는 프로젝트에 Image를 추가할 폴더를 생성 후, 이미지 파일 추가 [자산] 탭을 선택하고 [컨트롤]-[Button]을 이용하여 사용할 버튼 컨트롤을 배치

Silverlight with Blend (3) 이미지 파일을 디자인 페이지로 드래그하여 배치 이미지의 사이즈를 고정 값으로 수정 (직접 타이핑할 것) ex> (자동)384 -> 384 이미지들을 StackPanel로 그룹화 StackPanel의 Orientation 속성값을 Horizontal로 변경

Silverlight with Blend (4) [상태] 탭 선택하여 상태 그룹 추가 State 지속 시간을 1초로 설정 상태 추가 선택하여 사진 개수 만큼 상태를 만들고 적절한 이름으로 변경해준다.

Silverlight with Blend (5) 상태를 하나 선택하여 상태 기록 설정 후, 이미지들을 전부 선택하여 Width 값을 0으로 설정

Silverlight with Blend (6) 해당 상태에서 화면에 출력될 사진을 다시 선택하여 Width 값을 원래의 값으로 재설정 (예제의 경우 Photo1 상태에서는 첫 번째 이미지가 화면에 표시) 나머지 상태에 대해서도 같은 작업을 수행

Silverlight with Blend (7) 버튼 선택 후, 이벤트 속성 클릭 Click 이벤트 함수 입력란을 더블 클릭하면 이벤트 처리 함수가 자동 생성되며 .xaml.cs 파일로 이동 버튼을 클릭했을 때 보여줄 상태 값에 따라 아래의 함수 작성 나머지 버튼에 대해서도 적절하게 작성

참고 사이트 http://www.microsoft.com/korea/Expression/products/Blend_Overview.aspx (Blend Overview) http://www.microsoft.com/korea/Expression/products/Sketchflow_Overview.aspx (SketchFlow Overview) http://msdn.microsoft.com/ko-kr/library/cc645050(VS.95).aspx (Deep Zoom) http://blogs.msdn.com/popcon/archive/2009/07/17/s-4-blend.aspx (공도의 실버라이트하기 좋은 날) http://blog.jinhee.net/86 (진희쩜넷 예제)