Download Silverlight(2)

12주 실습강의
2010. 1학기, 소프트웨어 설계 및 실험(Ⅰ)
Silverlight (2) – Deep Zoom & Expression Blend
Preview
 Deep Zoom
-
개요
Example Demo
Deep Zoom Composer 설치
간단한 실습
 Expression Blend 3
-
개요
10가지 주요 기능
SketchFlow
설치
 실습 과제
 주의사항
Artificial Intelligence Laboratory
Deep Zoom – 개요
 Silverlight 2 부터 추가된 기능
 고해상도의 사진을 응용 프로그램의 성능에 영향을 거의
주지 않으며 빠르게 확대 및 축소 가능
 가능한 예제 시나리오



매우 크거나 해상도가 높은 이미지 탐색: 커다란 지도의 일부를 확대하여
다양한 수준의 세부 정보를 보고 마우스를 사용하여 지도 표면에서 뷰를
이동
3-D 사진: 방을 360도로 보여 주는 여러 장의 연속적인 사진을 찍은 뒤 사
용자는 서로 연결된 사진으로 방 전체를 돌아볼 수 있습니다.
광고: 광고의 전체적인 테마를 나타내는 해상도가 상대적으로 낮은 이미
지를 만든 다음 제품에 대한 인상과 데이터가 추가된 고해상도 이미지로
점진적으로 진행. 광고가 포함된 페이지를 처음 로드한 후 점차적으로 해
상도가 높은 이미지를 로드하면 광고가 점차 또렷해지면서 독자의 주의를
끌 수 있습니다.
Artificial Intelligence Laboratory
Deep Zoom – Demo
 http://memorabilia.hardrock.com/
Artificial Intelligence Laboratory
Deep Zoom – Deep Zoom Composer 설치

http://www.microsoft.com/downloads/details.aspx?familyid=457b17b752bf-4bda-87a3-fa8a4673f8bf&displaylang=en
Artificial Intelligence Laboratory
Deep Zoom – 간단한 실습 (1)
Artificial Intelligence Laboratory
Deep Zoom – 간단한 실습 (2)
Artificial Intelligence Laboratory
Deep Zoom – 간단한 실습 (3)
Artificial Intelligence Laboratory
Deep Zoom – 간단한 실습 결과
마우스 휠
조작
Artificial Intelligence Laboratory
Expression Blend 3 – 개요
 Silverlight과 .NET을 위한 디자인 도구
 XAML, C# 및 VB IntelliSense의 강력한 코드 편집 기능과
향상된 작업 영역 및 디자인 화면 제공
 Silverlight, WPF, XAML, C#, VB 같은 산업 표준 .NET 기
술을 사용하여 안정성을 보장하며 손쉽게 확장 및 액세스
 신뢰성과 보안이 강화된 응용 프로그램을 개발 가능
 주로 디자이너를 위한 도구
 아이디어를 구체화시키는 도구로도 활용 가능
(SketchFlow)
Artificial Intelligence Laboratory
Expression Blend 3 – 10가지 주요 기능
 SketchFlow
 코드 작성 없이 가능한 대화형 작업
 디자인 타임 데이터를 사용하여 효율적인 UI를 더 빠르게
디자인
 디자인 자산 활용 - Adobe Photoshop 및 Adobe
Illustrator 가져오기
 IntelliSense를 사용한 코드 편집
 스타일 및 사용자 지정
 Silverlight 및 WPF 지원
 개선된 UI
 Team Foundation Server와 통합
 워크플로
Artificial Intelligence Laboratory
Expression Blend 3 – SketchFlow
 SketchFlow
Artificial Intelligence Laboratory
Expression Blend 3 – 평가판 설치

http://www.microsoft.com/downloads/details.aspx?displaylang=ko&FamilyID
=e82db5e2-7106-419e-80b0-65cce89f06bb
Artificial Intelligence Laboratory
실습 과제(사진 갤러리 만들기)
Artificial Intelligence Laboratory
주의사항
 컨트롤을 배치 후, 반드시 ID로 사용할 이름을 작성해주
세요. Blend에서는 컨트롤의 ID 기본값이 설정되어 있지
않습니다.
 XXX.xaml 파일을 수정한 후에 반드시 저장을 하세요. 그
렇지 않으면 .xaml.cs 파일에서 각 컴포넌트의 ID에 접
근할 수 없습니다.
 실행 전에 프로젝트 탭의 ‘프로젝트 다시 빌드’를 한 후
실행하여야 합니다.
Artificial Intelligence Laboratory
Silverlight with Blend (1)
Artificial Intelligence Laboratory
Silverlight with Blend (2)
 Mainpage.aspx가 있는 프로젝트에 Image를 추가할 폴
더를 생성 후, 이미지 파일 추가
 [자산] 탭을 선택하고 [컨트롤]-[Button]을 이용하여 사
용할 버튼 컨트롤을 배치
Artificial Intelligence Laboratory
Silverlight with Blend (3)
 이미지 파일을 디자인 페이지로 드래그하여 배치
 이미지의 사이즈를 고정 값으로 수정
(직접 타이핑할 것)
ex> (자동)384 -> 384
 이미지들을 StackPanel로 그룹화
 StackPanel의 Orientation 속성값을
Horizontal로 변경
Artificial Intelligence Laboratory
Silverlight with Blend (4)
 [상태] 탭 선택하여 상태 그룹 추가
 State 지속 시간을 1초로 설정
 상태 추가 선택하여 사진 개수 만큼 상태를 만들고 적절
한 이름으로 변경해준다.
Artificial Intelligence Laboratory
Silverlight with Blend (5)
 상태를 하나 선택하여 상태 기록 설정 후,
이미지들을 전부 선택하여 Width 값을
0으로 설정
Artificial Intelligence Laboratory
Silverlight with Blend (6)
 해당 상태에서 화면에 출력될 사진을
다시 선택하여 Width 값을 원래의 값으로
재설정 (예제의 경우 Photo1 상태에서는
첫 번째 이미지가 화면에 표시)
 나머지 상태에 대해서도 같은 작업을 수행
Artificial Intelligence Laboratory
Silverlight with Blend (7)
 버튼 선택 후, 이벤트 속성 클릭
 Click 이벤트 함수 입력란을 더블 클릭하면 이벤트 처리 함수가 자
동 생성되며 .xaml.cs 파일로 이동
 버튼을 클릭했을 때 보여줄 상태 값에 따라 아래의 함수 작성
 나머지 버튼에 대해서도 적절하게 작성
Artificial Intelligence Laboratory
참고 사이트
 http://www.microsoft.com/korea/Expression/products/B
lend_Overview.aspx (Blend Overview)
 http://www.microsoft.com/korea/Expression/products/S
ketchflow_Overview.aspx (SketchFlow Overview)
 http://msdn.microsoft.com/kokr/library/cc645050(VS.95).aspx (Deep Zoom)
 http://blogs.msdn.com/popcon/archive/2009/07/17/s4-blend.aspx (공도의 실버라이트하기 좋은 날)
 http://blog.jinhee.net/86 (진희쩜넷 예제)
Artificial Intelligence Laboratory