윈도우8 & WP Tip

[windows 8] 'blend'를 이용하여 Orientation 이해하기. dely 평점: 없음 조회: 2554

 

안녕하세요.

 

저는 "windows8 스터디" 2주차에서 배웠던 Orientation(회전)을

박기완님이 앞서 소개해주셨던 '블랜드'라는 툴을 통해서

변화과정을 직접 보며 이해할 수 있어 그 내용을 나누려해요.

 

스터디 할 때, GroupDetailPage.xaml에서는 Portrait ListView와 VisualState FullScreenPortrait의 코드를 수정하고

 ItemDetailPage.xaml에서는 Portrait FlipView와 VisualState FullScreenPortrait의 코드를 수정함으로서

앱을 회전을 시켜도 예쁘게 정렬되어 보여지는 것을 배울 수 있었는데요.

'블랜드'를 통해 확인해보겠습니다.

 

 

먼저 Visual studio에서 GroupDetailPage.xaml에 Portrait ListView코드를 추가한 후.

 

 

 

좌측 상단 빨간테두리로 표시한 부분을 보면

프로젝트(Project), 자산(Assets), 상태(States), 장치(Parts) 패널이 있는데요.

장치(Parts)를 클릭 후, FullScreenPortrait 클릭.

 

그러면 위의 그림처럼 기기가 세로로 회전된 모습을 볼 수 있습니다.

하지만 기기가 가로일 때의 컨텐츠가 같이 겹쳐서 보이는데요.

 

 

 

스터디 때 VisualState의 FullScreenPortrait코드를 수정했던 것을 블랜드에서는,

좌측 중간 빨간 테두리 itemGridView 클릭 후 우측 중간 빨간 테두리의 visibility를 collapsed로 바꿈으로서

표현할 수 있어요.

그러면 위의 그림처럼 기기 회전시에 깔끔한 이미지로 보이게 되지요.

 

ItemDetailPage.xaml 역시 GroupDetailPage.xaml와 동일한 원리로 블랜드를 통해 확인해 볼 수 있습니다.

 

 

블랜드에 대한 자세한 설명은 이곳을 참고하세요!!

http://www.hoons.kr/Board.aspx?Name=exTip&Mode=1

 

태그 : windows8,
작성자 정보
dely
Level 4
 [EXP.2/16]

메일:  비공개
글등록 +12 12 덧글등록 +3 14
자기소개
무적의 캠퍼스시삽부대
글 공유하기 |
  tweet facebook
2012-07-23 오후 11:49:19
나도한마디
사용자
dely            [2012-07-23]
Level 4
 [EXP.2/16]
그림이 커서 밑에 스크롤이 생겼네요;;
사용자
귤신            [2012-07-24]
Level 31
 [EXP.66/80]
블렌드에서 디자인할 때 좋은 팁이네요 ^^
사용자
HOONS            [2012-07-27]
Level 99
 [EXP.만랩]
굳뜨!
글리스트
[windows 8 RT] Reversi RT 개발 후기 파일첨부 Fool
[windows 8 RT] Wokka Anim 파일첨부 Fool
XP에서 WP7 개발하기...  착한형
HTML 문자열 디코딩하기[1]  Linus
DataTemplateSelector와 StyleSelector 사용하기  Linus
[Windows 8] 웹 컨텐츠를 IRandomAccessStream으로 저장하기.   Linus
Windows 8에서 Live SSO 인증하기[1]  Linus
[Window 8] 스터디 4주차 자료입니다.[9]+2  귤신
FlowDirection과 다국어 작업[2]  재선
[Window 8] 스터디 3주차 자료입니다.[3]  귤신
 ★현재글->   [windows 8] 'blend'를 이용하여 Orientation 이해하기.[3]  dely
윈도우8 앱스토어 등록절차[5]+3  HOONS
[Window 8] 스터디 2주차 자료입니다.[5]+1  귤신
[팁] 맥부트캠프 Windows8 Release Preview & visual studio12 멈춤해결[3] 파일첨부 포민
[팁] Windows 8 Release Preview 설치 VirtualBox vs. Virtual Machine...[2]+1  Boms
텍스트 스타일 참고자료  재선
[windows8] 혹시나마 저같은 고생하시는분에게[1]  박기완
[Windows8] 1주차 아주아주 작은 팁이에요[2]  박기완
[Window 8] 스터디 1주차 숙제의 힌트예요![3]  상큼체리귤
[Window 8] 스터디 1주차 자료입니다.[6]  귤신
[RE] [Window 8] 스터디 1주차 자료입니다.[2]  Belgio