'Design'에 해당되는 글 1건

  1. 2009.11.26 01. Surface(서페이스)디자인 _ 시작하기 (4)
Expression Blend/WPF2009.11.26 14:21



이번에 서페이스를 개발하고있는 팀에서 디자인 블랜드 작업을 하게 됐습니다.  올레~  >ㅁ<
실버라이트만 하다가 WPF를 할려니 걱정이 됩니다. 주변분들께 열심히 질문하고 공부해야죠 =ㅂ=..

서페이스는 WPF랑 XNA 로 개발된다고 합니다. (XNA는 마이크로소프트에서 개발 된 게임 개발 프레임워크로  XBox게임을 XNA로 만든데요.)
WPF로 작업할때는 보통 WPF 어플리케이션으로 작업한다음 서페이스로 컨텍을 바꾸는 방법으로 하고 서페이스어플리케이션을 생성해서 할 수도 있다고 합니다.

저는 서페이스 어플로 생성해서 살펴보았습니다.

Surface(서페이스) 디자인 작업 시작하기
Surface Application(WPF)

시작전에 서페이스SDK 설치합니다. (비주얼 스튜디오와 블렌드도 =ㅁ=)


01. Visual Studio에서 새프로젝트를 생성합니다.


02. 프로젝트 형식에서 Surface - v1.0 에서 Surface Application(WPF) 를 선택합니다.
이름(N):에 'SurfaceApplication_test'라고 입력하고 확인을 클릭합니다.  


03. 테스트 프로젝트가 생성되면 솔루션 탐색기에서 프로젝트안에 SurfaceWindow1.xaml 파일을 선택하고 마우스 오른쪽 클릭하여 연결프로그램을 선택합니다.


04. Blend 3 툴을 선택하고 확인을 클릭합니다. ( 연결프로그램 목록에 블렌드가 안보이면 오른쪽에 추가(A)
.. 버튼을 클릭하여 블렌드를 추가시켜줍니다.)


05. 블렌드가 뜨지만 프로젝트는 열리지 않고 경고 메세지가 뜨는데요 블렌드 프로젝트가 아니란 말이겠죠 =ㅂ=
 

06. 그럼 그냥 블렌드에서 방금 생성한 프로젝트를 열겠습니다. [File]-[Open Project] 메뉴를 선택합니다.


07. 해당 폴더를 찾아서 솔루션파일을 선택합니다.


08. 프로젝트가 열리고 왼쪽 상단 탭메뉴중 Assets을 선택합니다. [Controls]- [All] 카데고리에서 스크롤을 내리면 서페이스 컨트롤들이 보입니다. SurfaceButton, SurfaceCheckBox.. 등등


09. 잠시 블렌드를 접어두고 서페이스 시뮬레이터를 실행시킵니다.


10. 시뮬레이터를 실행한 화면입니다. 실제 서페이스 화면과 같습니다. 마우스 포인터가 핑거포인터로 나옵니다.
마우스 포인터 대신 서페이스를 손으로 터치했을때와 같은 인터렉션으로 보여줍니다.
핑거포인터는 여러개 찍을수 있어요.


11. 다시 블렌드를 열어서 [Controls]- [All] 카데고리에 있는 서페이스 컨트롤들을 드래그엔 드랍 하여 아트보드에  올려놓아 봅니다.  다음 [F5]를 눌러 실행시킵니다.

12. 시뮬레이터에 방금 실행한 프로젝트가 보여집니다. (시뮬레이터를 켜지 않으면 그냥 윈도우 창으로 실행이됩니다.) 손으로 터치한다고 생각하고 =_= 컨트롤을 눌러봅니다.
서페이스에서는 터치하고, 떼고, 터치한상태로 움직이고 세가지 동작을 할 수 있습니다.
 
13. 다음은 서페이스 컨트롤들 스타일을 만드는 강좌를 올리도록 하겠습니다.  
저작자 표시 비영리 변경 금지
신고
Posted by 도온

티스토리 툴바