Nova code camp 2013 writing simple windows phone 8 apps by kanchi raghuraman
Windows Phone Design Camp
description
Transcript of Windows Phone Design Camp
![Page 1: Windows Phone Design Camp](https://reader033.fdocuments.net/reader033/viewer/2022042802/54bb88ca4a795977378b45a5/html5/thumbnails/1.jpg)
![Page 2: Windows Phone Design Camp](https://reader033.fdocuments.net/reader033/viewer/2022042802/54bb88ca4a795977378b45a5/html5/thumbnails/2.jpg)
Content Expression Blend?
SketchFlow
Event, Trigger, Behavior
Animation
- Expression Blend 설명
- Design Control 살펴보기
- SketchFlow란?
- Demo : WP7 eBay Application 기획하기
- Event, Trigger, Behavior 설명
- Demo : 음악재생동작 만들기 / / 컨디션 기능 활용하기
- Demo : 애니메이션 기초 / / 리스트박스 애니메이션
![Page 3: Windows Phone Design Camp](https://reader033.fdocuments.net/reader033/viewer/2022042802/54bb88ca4a795977378b45a5/html5/thumbnails/3.jpg)
Expression Blend?
Design
Cooperation
WPF Silverlight Windows Phone
Development
![Page 4: Windows Phone Design Camp](https://reader033.fdocuments.net/reader033/viewer/2022042802/54bb88ca4a795977378b45a5/html5/thumbnails/4.jpg)
Design Control
Windows Phone의 다양한 디자인을 경험할 수 있습니다. 아래의 링크에서 다운받을 수 있습니다.
http://wp7designtemplates.codeplex.com/
![Page 5: Windows Phone Design Camp](https://reader033.fdocuments.net/reader033/viewer/2022042802/54bb88ca4a795977378b45a5/html5/thumbnails/5.jpg)
Sketch Flow
스케치플로우는 프로젝트를 제작하기 전 기획하는 단계에서 좀 더 쉽게 프로토타입을 만드는 것을 도와주는 프로그램입니다.
Prototype
Application
![Page 6: Windows Phone Design Camp](https://reader033.fdocuments.net/reader033/viewer/2022042802/54bb88ca4a795977378b45a5/html5/thumbnails/6.jpg)
Sketch Flow
http://wp7sketchflow.codeplex.com/
아래 링크로 들어가면 스케치플로우를 다운받을 수 있습니다.
Click!
![Page 7: Windows Phone Design Camp](https://reader033.fdocuments.net/reader033/viewer/2022042802/54bb88ca4a795977378b45a5/html5/thumbnails/7.jpg)
Demo – WP7 eBay App
![Page 8: Windows Phone Design Camp](https://reader033.fdocuments.net/reader033/viewer/2022042802/54bb88ca4a795977378b45a5/html5/thumbnails/8.jpg)
Design Control
![Page 9: Windows Phone Design Camp](https://reader033.fdocuments.net/reader033/viewer/2022042802/54bb88ca4a795977378b45a5/html5/thumbnails/9.jpg)
Event, Trigger, Behavior?
이벤트와 트리거, 비헤이비어는 상태변경이나 애니메이션을 취하고자 할 때 동작을 도와주는 기능입니다.
Ex) 사용자가 터치 등의 행동을 할 경우 해당 동작이 발생하게 하라고 명령.
특히, 비헤이비어나 액션은 마치 컨트롤 같이 추가해 명령을 내리는 방식이라 디자이너 분들도 코드 없이 간단하게 기능을 구현할 수 있습니다!
![Page 10: Windows Phone Design Camp](https://reader033.fdocuments.net/reader033/viewer/2022042802/54bb88ca4a795977378b45a5/html5/thumbnails/10.jpg)
Event, Trigger, Behavior?
너무 욕심 부리지 마세요~ 코드에 양보하세요 ~_~
* 비헤이비어를 많이 사용할 수록 무거워 진다는 사실! 모바일은 가벼울 수록 좋겠죠?
But!!
![Page 11: Windows Phone Design Camp](https://reader033.fdocuments.net/reader033/viewer/2022042802/54bb88ca4a795977378b45a5/html5/thumbnails/11.jpg)
sound play
MusicPlay (Event Basic)
Demo
![Page 12: Windows Phone Design Camp](https://reader033.fdocuments.net/reader033/viewer/2022042802/54bb88ca4a795977378b45a5/html5/thumbnails/12.jpg)
sound play 2
강아지 Button Behavior(PlaySoundAction)
![Page 13: Windows Phone Design Camp](https://reader033.fdocuments.net/reader033/viewer/2022042802/54bb88ca4a795977378b45a5/html5/thumbnails/13.jpg)
Visual State Manager
Visual State Manager Basic
Demo
![Page 14: Windows Phone Design Camp](https://reader033.fdocuments.net/reader033/viewer/2022042802/54bb88ca4a795977378b45a5/html5/thumbnails/14.jpg)
Conditional
암호를 인식하는 textbox
Demo
![Page 15: Windows Phone Design Camp](https://reader033.fdocuments.net/reader033/viewer/2022042802/54bb88ca4a795977378b45a5/html5/thumbnails/15.jpg)
Design Control
![Page 16: Windows Phone Design Camp](https://reader033.fdocuments.net/reader033/viewer/2022042802/54bb88ca4a795977378b45a5/html5/thumbnails/16.jpg)
Animation
블렌드에서는 애니메이션을 주기 위해 먼저 스토리보드를 생성합니다.
![Page 17: Windows Phone Design Camp](https://reader033.fdocuments.net/reader033/viewer/2022042802/54bb88ca4a795977378b45a5/html5/thumbnails/17.jpg)
Animation
네가 말한 스토리보드가 이런 스토리보드는 아니겠지..
![Page 18: Windows Phone Design Camp](https://reader033.fdocuments.net/reader033/viewer/2022042802/54bb88ca4a795977378b45a5/html5/thumbnails/18.jpg)
Basic Animation
애니메이션 기초를 배워봅시다!
Demo
![Page 19: Windows Phone Design Camp](https://reader033.fdocuments.net/reader033/viewer/2022042802/54bb88ca4a795977378b45a5/html5/thumbnails/19.jpg)
Basic Animation
Easing을 통해서 쉽게 애니메이션 동작을 표현할 수 있습니다.
Easing Function
![Page 20: Windows Phone Design Camp](https://reader033.fdocuments.net/reader033/viewer/2022042802/54bb88ca4a795977378b45a5/html5/thumbnails/20.jpg)
User Control
UserControl을 사용하면 한 번에 많은 개체에 애니메이션을 적용할 수 있습니다.
![Page 21: Windows Phone Design Camp](https://reader033.fdocuments.net/reader033/viewer/2022042802/54bb88ca4a795977378b45a5/html5/thumbnails/21.jpg)
User Control
지구가 마음에 든 외계인, 지구 침공을 위해 친구들을 소환하다!
Demo
![Page 22: Windows Phone Design Camp](https://reader033.fdocuments.net/reader033/viewer/2022042802/54bb88ca4a795977378b45a5/html5/thumbnails/22.jpg)
PathListBox Animation
다양한 모양으로 배치 가능한 리스트박스 애니메이션 만들기
Demo
![Page 23: Windows Phone Design Camp](https://reader033.fdocuments.net/reader033/viewer/2022042802/54bb88ca4a795977378b45a5/html5/thumbnails/23.jpg)
Design Control
![Page 24: Windows Phone Design Camp](https://reader033.fdocuments.net/reader033/viewer/2022042802/54bb88ca4a795977378b45a5/html5/thumbnails/24.jpg)
Design Control