Expression Blend/WPF2011.05.19 16:24
서피스 2가 곧 나온다고 하네요. 삼성에서 ㅎㅎ
디스트릭트에서는 스티커스프레임(유니버셜프레임) 버전업 작업을 진행하고 있습니다.  




해상도가 1.0 버전 1024*768 에서 2.0 은 1920* 1080, 40인치 LCD 터치 스크린으로 커지고
하드웨어가 4인치로 완전 슬림해졌네요. 윈도우7이라서 키보드와 마우스세팅이 필요없습니다.

회사에서 현장설치 하러 가실때 무거워서 많이 힘드셨는데..(전 멀리서 바라만 봤지만..)
세팅할때도 키보드 마우스 연결 안해도 되고 전보다 편해지겠군요. ^ㅁ^

터치 포인트도 48개에서 50개 이상으로 100정도 +ㅁ+


2.0 시뮬레이터 툴.  깜찍하게 바뀌었네요. 
 




좀더 많은 내용을 보실려면
http://www.microsoft.com/surface/en/us/default.aspx




저작자 표시 비영리 변경 금지
신고
Posted by 도온
Expression Blend/WPF2010.08.12 18:01
http://atdawn.tistory.com/69  다음 내용입니다.


2) 사진이 튀어나오는 에니메이션 만들기

앞에서 만든 사진뷰어를 오픈할때 시작 스토리보드를 만들어 보겠습니다.
사진보기 화면을 터치하면 사진이 사사삭 들어오는 간단한 에니메이션입니다.




01. 스케터뷰 위에 'Grid_Click'그리드를 하나 그리고 오른쪽 Properties패널에서 Brushes속성중 Background에 아무컬러나 넣고 알파값을 0%로 설정합니다.  그 그리드 안에 사진보기텍스트와  손모양 아이콘을 넣었습니다.

02. 사진이 들어간 스케터뷰 아이템을 다 선택한 후 오른쪽 Properties패널에서 Appearance 속성중 Opacity값을 0%로 설정합니다. 왼쪽하단의 Objects and Timeline패널에서 + 버튼을 눌러서 스토리 보드를 하나 생성합니다.


03. 스토리보드를 생성함과 동시에 녹화 상태(
)가 되고 타임라인이 보여집니다. 스케터뷰 아이템 3개를 동시에 선택하고 0초에서 키프레임을 생성합니다. (달걀처럼 생긴 Record Keyframe버튼을 클릭하면 키프레임이 생성됩니다.요거↓)

그 다음 노란색 키라인을 1초로 옮겨서 키프레임을 또 생성합니다. 1초일때는 앞서 Appearance 속성중 Opacity값을 0%로 설정했던것을 100%로 수정합니다. 0초에서1초가 될때 안보였던 사진들이 서서히 보이겠죠?


04. 그 다음 다시 0초로 돌아가서 스케터뷰 아이템들 각각을 오른쪽 [Properties]패널에서 Miscellaneous속성에서 Center의 값을 바꿔서 중앙에 모여있던 사진들을 뷰 밖으로 이동했습니다. 


05. 그럼 0초에서 1초의 에니메이션은 요렇게 되겠죠? ^^


06. 사진뷰어에서 'Grid_Click'그리드의 사진보기 손 아이콘은 필요없으니까 안보이게 해둡니다.
0.3초 정도에 키프레임을 생성하고 오른쪽 Properties패널에서 Appearance 속성중 Opacity값을 0%로 설정합니다.
그 다음 바로옆에 키프레임을 하나 더 생성하고 Visibility의 속성을 Visible에서 Collapsed로 바꿨습니다. 
저는 재생해보니 사진 나오는게 너무 느려서 스케터뷰아이템 키프레임을 1초에서 앞으로 당겨서 0.4초 정도로 바꿨습니다.^^;


07. x 모양의 Close Storyboard 버튼을 클릭하여 녹화상태를 빠져나옵니다.

08. 왼쪽 상단의 Triggers패널에서 스토리보드를 실행하기 위해 다음과 같은 이벤트를 설정해줍니다. 1) 'Grid_Click' (사진보기)를 2)PreviewContactDown(화면을 터치)하면 3)sb_PhotoOn이라는 스토리 보드를 Begin 합니다.
<s:SurfaceWindow.Triggers>
<EventTrigger RoutedEvent="s:Contacts.PreviewContactDown" SourceName="Grid_Click">
<BeginStoryboard Storyboard="{StaticResource sb_PhotoOn}"/>
</EventTrigger>
</s:SurfaceWindow.Triggers>



09. 화면을 터치하면 에니메이션이 실행되는 이벤트를 설정했습니다. [F5]를 눌러 실행하면 에러가 납니다.


10. 블렌드로 다시 돌아와서 아트보드에서 xaml화면을 엽니다.
 

11. Xaml을 열어서 'sb_PhotoOn' 스토리보드에서 스케터뷰 아이템들의 위치가 Center값을 바꾸어 이동되는 소스코드부분에서 Storyboard.TargetProperty ScatterCanvas.Center에서 ScatterViewItem.Center 수정해주셔야 합니다. 원래는 자동적으로 고쳐져야 되는 부분인데 말이죠.ㅜㅜ


12. 다시 실행해보면 실행이 잘 됩니다. 실행이 잘 되는데.. 사진 늘리거나 회전은 되는데 이동이 안됩니다. 'sb_PhotoOn' 스토리보드에서 스케터뷰 아이템의 위치를 이동해준 Center값이 계속 아이템을 잡고 있어서 라고 합니다.
방금 수정해준 부분에 다시 FillBehavior="Stop"이라고 추가해줍니다.
... Storyboard.TargetProperty="(s:ScatterViewItem.Center)" FillBehavior="Stop">

ScatterViewItem.Center속성값 바꾼 스토리보드에 다 적용 합니다.

13. [F5]를 눌러 실행하면? 실행이 잘 됩니다. 사진도 잘 움직여요.
       1) ScatterCanvas.Center에서 ScatterViewItem.Center로
       2) 스토리보드가 안풀릴때  FillBehavior="Stop"  
두가지 수정해주었습니다.

저작자 표시 비영리 변경 금지
신고
Posted by 도온
Expression Blend/WPF2010.08.11 16:04

서피스 화면 위의 사진이나 오브젝트들을 터치로 늘렸다 줄였다 이리저리 움직이는 기능을 컨트롤로 간단하게 구현할 수 있습니다. 


사진출처 :
http://dvice.com/archives/2008/04/microsoft_surfa.php?p=14&cat=undefined#more

블렌드에서 ScatterView 컨트롤을 펼쳐놓고 scatterViewItem을 추가해서 scatterViewItem에 사진만 넣어 주시면 됩니다.

그렇게 해서 시뮬레이터로 실행하면 요렇게 사진이 랜덤하게 화면에 뿌려지고 늘렸다 줄였다 이리저리 움직이고 돌리고 할 수 있습니다.
그런데 스케터뷰에 랜덤하게 나오는 오브젝트들의 위치를 미리 정해놓거나 늘어나는 사이즈를 최대 최소를 정해놓거나 이동을 못하게 한다던가 오브젝트들에 간단한 에니메이션을 주고 싶을때는 ? 
스케터뷰아이템의 속성을 이용해서 간단히 스토리보드를 만들 수 있습니다. 
스케터뷰아이템을 스토리보드로 에니메이션을  만들때 xaml에서 몇가지 수정이 필요했던 것이 있어서 정리해둡니다. 
 

1) 스케터뷰로 간단히 터치 사진뷰 만들기

01. 비주얼스튜디오에서 서피스어플리케이션을 생성하고 블렌드에서 오픈했습니다. (
http://atdawn.tistory.com/36 참조)


02. 최상위 Grid선택하고 오른쪽 [Properties]패널에서 Layout속성을 w1024* h768 로 사이즈를 조정합니다. (서피스 해상도)


03. 왼쪽 [Assets]패널 Controls파트에서 SCATTER로 검색하면 관련컨트롤이 나옵니다.


04. 최상위 그리드 안에 스케터뷰 컨트롤을 그리드 꽉차게 넣은다음 스케터뷰 컨트롤 안에 스케터뷰아이템을 3개 정도 추가합니다.


05. 시뮬레이터를 켠 다음 [시작]-[Microsoft Surface SDK 1.0 SP1]-[Tools]-[Surface Simulator]


06. 방금 만든 부분을 실행 시켜봅니다. [F5]  실행화면에 디폴트 스타일의 스케터뷰 아이템이 랜덤으로 뿌려집니다. 사이즈 조절도 되고 회전도 되고 편하네요! ^^


07. 왼쪽 Projects패널에서 App파일을 선택한 후 마우스 오른쪽을 클릭하여 [Add Existing Item...]메뉴로 사진을 불러옵니다.


08. 불러온 사진들을 스케터뷰아이템안에 쏙쏙 넣어줍니다. (Projects패널에서 떠블클릭을 하면 사진이 아트보드에 뿌려집니다.) 사진을 넣을때 Margin속성에 값이 들어가는지 확인한번 해주세요. Margin(0,0,0,0)
오른쪽 [Properties]패널에서 Layout속성에서 스케터뷰 아이템의 Width값과 Height값을 사진크기에 맞게 설정해줍니다.


09. 그런다음 다시 실행해주면 화면에 빈 스케터뷰 아이템 대신 사진이 떠다니고 있습니다. 초간단 사진 뷰어 완성! 


10. 스케터뷰 아이템의 속성을 좀더 알아보겠습니다. 오른쪽 [Properties]패널에서 Miscellaneous속성을 열어보면 여러가지 옵션들이 보이는데요, ①CanMove ②CanRotate ③CanScale ④Center ⑤Orientation을 주로 사용합니다. 네임만 봐도 어떤 속성인지 보이시죠^^


11.④Center에서는 오브젝트의 위치를 지정해줄 수 있습니다. (0,0)일 경우 오브젝트의 센터가 레이아웃의 0,0 값에 위치합니다.⑤Orientation에도 값을 넣어 각도를 조절 할 수 있습니다. 


12. 사진의 위치와 각도가 지정한 값으로 화면이 실행됩니다.


이어서 http://atdawn.tistory.com/70

저작자 표시 비영리 변경 금지
신고
Posted by 도온
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 도온
Expression Blend/WPF2009.11.24 11:56





마이크로소프트사에서 개발된 차세대 유저인터페이스 Surface입니다.
테이블 형태의 스크린하단에는 물체를 감지하는 적외선 카메라 5대와 스크린에 영상을 비추는 프로젝터 한대가 들어있습니다.
블루투스 기능과 와이파이 기능이 내장되어있고 멀티터치가 가능하며 화면위에 올려진 물체를 감지하여 인터렉티브한 UI를 구성할 수 있습니다.

서페이스의 UI는 Expression Blend툴로 WPF 어플리케이션으로 개발할 수 있습니다.

손끝아래서 움직이는 세상 너무신기하네요. ^^



내부구조
(http://www.popularmechanics.com/technology/industry/4217348.html?page=2)





사진출처 : http://dvice.com/archives/2008/04/microsoft_surfa.php?p=14&cat=undefined#more
관련사이트 : http://www.microsoft.com/surface/
저작자 표시 비영리 변경 금지
신고
Posted by 도온

티스토리 툴바