[WP7 개발 기초] Grid과 StackPanel

이번 시간부터는 폰의 레이아웃에 대해서 다뤄보고자 합니다.

첫번째로 말할 개념은 Grid라는 겁니다. MainPage.xaml을 보면 가장 상위에 있는 개념이 바로 Grid라는 건데 이건 그냥 하나의 셀이라고 보시면 됩니다. 

 
지금 디자인뷰상에서 선택된 화면이 바로 LayoutRoot라는 이름의 grid입니다. 지금 이 grid 안에 StackPanel이 들어 있고 contentPanel이란 이름의 Grid가 하나더 삽입이 되어 있습니다. 이렇게 하나의 Grid안에 여러개의 개체를 넣을 수 있습니다. 한번 이 grid를 삭제하고 ContentPanel로만 이뤄진 Grid를 생성해봅니다.
 

지금과 같이 쓴것이 바로 Grid가 생성된 겁니다. 디자인뷰와 병행해서 보시면 아시겠지만 이렇게 설정만 해줬을 뿐인데 화면 전체로 가득 차는 것을 확인 할 수 있습니다. 이안에 다양한 개체를 삽입합니다.
 

그러면 다음과 같이 나옵니다.
 

사실 어떻게 보면 조금 중구난방으로 개체가 배열되어 있는게 보이실 겁니다. 보시면 개체의 순서에 따라서 하나씩 차곡차곡 쌓인다는 것을 느끼실겁니다. 그리고 Image는 Grid의 폭에 맞게 배치가 되면서 Ellipse는 자리를 크게 차지하지요.
위의 Orientation을 Landscape로 바꿔보면 어떻게 될까요?

바로 앞에서 말한 속성이 바로 와닿을 겁니다.

자 원래대로 Portrait 상태에서 이번에는 이런 것들 StackPanel에 삽입해보겠습니다.
 

이 StackPanel이라는 것은 Grid안에 하나의 섹터를 지정해주는 겁니다. 원래 MainPage.xaml을 만들면 생성되는 title관련 항목도 이 StackPanel로 생성되어 있는데 Grid상의 어떤 것도 그 title영역을 침범할 수 없습니다.거기에 할당된 섹터라는 거지요.결과는 다음과 같습니다.
 

각각의 개체가 겹치지않고 배열됩니다. 참고로 지금 Ellipse 부분이 안 보이는데 이는 StackPanel내에서 겹치지 않게 배열할 수가 없게되서 안보이는 겁니다. 코드상의 Ellipse를 선택한후 Properties를 살펴보면 Height를 조절할 수 있는데 이 값을 수정해봅니다.

지금 값은 Height을 Auto에서 100으로 바꾼 상태입니다. 이렇게 서로 개체끼리 겹치지 않는 셀이 바로 StackPanel이 됩니다. 한번 Orientation을 바꿔볼까요?

이제는 아예 몇개 요소는 보이지 않네요. 그런데 보이지 않는다고 다가 아니라 그냥 뭔가가 Auto로 설정되서
 개체가 있는데 표현되지 않는 것일 뿐입니다. Properties를 수정하면 나머지도 나옵니다.

위에 언급한 내용이 바로 Grid와 StackPanel의 차이가 되겠습니다.