[Windows 8] Windows 8에서의 StackPanel이란?

WPF를 활용한 윈도 어플리케이션을 보면 Grid라는 걸 많이 보셨을 겁니다. 그리고 그에 따라서 같이 붙어나오는 StackPanel도 많이 보셨을 겁니다. 사실 지금 언급되는 Grid니 StackPanel이니 Canvas 같은 건 UIElement에 속해있는 요소입니다. 그중에서도 StackPanel은 이름에도 내포되어 있듯이 어떤 개체가 Stack처럼 쌓이는 구조를 띕니다. 물론 윈도우폰 7 섹션에서도 이 기능을 언급했지만 윈도우 8에서는 어떻게 나타나는 지를 한번 예제를 통해서 봅시다.

 

앞에서도 이야기했지만 Stack이 쌓이는 구조이니 서로 개체끼리 겹치는 경우가 없습니다. 다음과 같이 구성해봅니다.

지금 현재 프로젝트에는 test.png라는 이미지를 삽입한 상태입니다. 지난 포스트에서도 언급했다시피 개체의 속성을 지정하지 않으면 기본 설정이 Stretch로 잡힙니다. 결과는 다음과 같습니다.

지금도 서로의 개체가 겹치는 게 없습니다. 이상태에서 TextBlock 의 Fontsize를 한 90으로 키워볼까요?

 

 

fontSize가 커지는데 비해서 절대로 상대방의 영역을 넘어서지 않습니다. 지금 Image의 Stretch가 설정되어 있어서 이미지가 크게 보이는데 이 부분은 조금 확인해봐야겠네요. 아무튼 Stretch부분을 수정하고 밑에 TextBlock개체를 하나 더 삽입해봅시다.

 

 

그러면 결과가

위와 같이 나옵니다. 이미지를 삽입했는데 너무 크게 나온다 싶으면 Stretch 속성을 꼭 살펴봅시다. 보통은 Uniform으로 선언되어 있습니다.

StackPanel의 크기은 어떻게 확인할 수 있을까요? 그걸 확인해보려면 지금 감싸고 있는 StackPanel에 Background색깔을 입혀보면 되겠지요. 우선 StackPanel의 속성에 아무것도 안되어 있으므로 Vertical이나 Horizontal에 속성을 부여해줘야 합니다. 만약 StackPanel의 VerticalAlignment에 Top값을 주게되면

와 같이 가진 개체들의 Height 값을 그대로 따라가게 됩니다. 반대로 HorizontalAlignment에 Left값을 주게 되면

위와 같이 전체 개체의 width에 비례하게 됩니다.

뭔가 윈도우폰에서 StackPanel을 쓸 때보다 화면이 큼직큼직해서 알아보기 쉽네요. 참고로 윈도우 8 스타일 앱은 기본적으로 동작하는 해상도가 풀스크린입니다. 물론 데스크탑모드에서는 창모드를 지원합니다. 이것때문에 소프트웨어 개발사쪽에서 조금 말이 많았지요. 왜 창모드를 지원해주지 않느냐 말입니다. 뭐 MS측에서는 풀스크린 지원을 통해서 어플에 대한 몰입감을 부여한다는 이야기가 있었는데 어느 것이 유리한지는 아직도 감이 안잡히네요.

 자 그럼 지금까지 배운 내용을 토대로 복습을 해볼까요? StackPanel안에 StackPanel을 넣고 Vertical로 나란하게 배열해보겠습니다.

지금까지 다룬 내용이라면 여러분들도 얼마든지 이 StackPanel을 자유롭게 다룰 수 있을거라고 생각합니다. 아니면 간단한 게임을 만들 수 있을지도요.