[WP7 개발 기초] StackPanel을 활용한 여러가지 실험.

지난 포스팅에서 Grid와 StackPanel에 대한 걸 잠깐 다뤄봤었는데 이번에는 그 중 StackPanel에 대한 내용을 조금 여러가지 실험을 통해서 확인해보고자 합니다.

이 StackPanel에도 Orientation이 있습니다. 보통은 폰 전체의 Orientation을 언급하기도 하지만 stackPanel에서는 폰 전체에서와 다르게 방향과는 전혀 무관하고 내부 컨텐츠의 방향을 결정해줍니다. 물론 이 속성에는 Horizontal과 Vertical이 있겠구요. 그래서 예제로 든 내용이 바로 화면을 건드릴때마다 컨텐츠의 방향이 바뀌는 내용입니다. 

우선 StackPanel을 선택한 상태에서 Properties 창의 Event 항목을 보면 중간에  ManipulationStarted가 있습니다. 이 항목을 더블클릭하면 새로운 이벤트가 형성됩니다.
 

그럼 숨김코드로 되어 있는 cs파일에도 새로운 이벤트가 형성되는데 다음과 같이 채워넣습니다.
 

지금과 같이 짠 것은 Manipulation(여기서는 폰 터치가 되겠지요.)이 되었을때 대한 이벤트 내용을 적는 겁니다. 그래서 StackPanel의 Orientation이 System.Windows.Controls 밑에 있는 Orientation과 비교해서 같을때와 다를때의 조건을 나눠서 처리한겁니다.
사실 원서에서는 OnmanipulationStarted라는 이벤트(위처럼 코드를 자동 생성한게 아니라..)를 직접 만들어서 코드를 처리하게되어있지만 어찌된건지 결과는 똑같더군요. 일단 실행결과는 다음과 같습니다.
 

결과와 같이 StackPanel에 대한 Orientation도 변화를 시킬 수 있습니다. Vertical일때와 Horizontal일때의 결과물이 다르게 보입니다. 특이한 점이라면 검은 부분을 클릭하면 StackPanel의 Orientation이 변화하지 않는다는 점입니다. 물론 이 부분은 당연히 StackPanel에 속하지 않기 때문에 터치했을때의 조건문이 실행되지 않는거겠지요.그런데 보다보시면 느끼시는게 몇가지 요소가 무시된다는 겁니다. 저번에는 Ellipse 부분이 무시되었는데 이번에는 터치시 첫번째 TextBlock이 사라졌습니다. 저번에도 언급드린 내용이지만 StackPanel내에서는 모든 개체가 독립적인 공간을 가지기 때문에 다 표현을 할 수 없는 겁니다.
 그리고 또 한가지 기본적으로 StackPanel에 아무 설정하지 않았을경우의 배치는 아래처럼 Stretch로 되어 있습니다. 이값들을 수정하면 ContentPanel내에서도 StackPanel 자체의 위치를 바꿀 수 있습니다.
 

참고로 HorizontalAlignement의 효과는 해보니까 없네요. 오직 VerticalAlignment의 값을 변화시켰을때만 영향이 나타납니다. 

자 이번에는 StackPanel내의 개체 중 문자를 연결하는 것을 확인해보고자 합니다.
새로운 프로젝트를 열고 다음과 같이 작성합니다.

원래 StackPanel상에 넣지 않고 그냥 ContentPanel상에 넣었을때는 TextBlock이 따로 놀았습니다. 지금의 결과는 

와 같이 하나의 개체로 묶이는 겁니다.재미있는 건 Text를 삽입하면 그 StackPanel도 같이 늘어난다는 겁니다. 당연히 지금까지 다뤘던 StackPanel의 특성상 각자의 TextBlock은 독립적인 공간을 가지기 때문에 만드면 만들수록 StackPanel의 크기도 늘어나는 겁니다. 문자도 이렇게 붙여주고요..

그럼 저 BackGround에 Padding이나 모양을 변화시킬 수 있을까요? 이때는 StackPanel에서 조절하는게 아니라 지난 번에 다뤘던 Border라는 개체를 사용해야 합니다. 그래서 그안에 StackPanel을 삽입하는 형식을 갖춰야 하는 것이지요.
(StackPanel 자체가 Padding속성을 지원하지 않습니다.)

이렇게 취해준다면 Background는 유지되면서 여백이 형성되겠지요.

 찰스 페졸드 책이 좋은 이유는 내용이 이야기가 흘러가듯이 진행되는 것도 있지만 앞에서 다뤘던 내용을 복습할 수 있는 기회를 가지는 것도 있습니다. 위에서 언급한 Border속성도 이렇게 이용하는 데 사용되는 것이지요.

또 다뤄볼 StackPanel의 특성은 StackPanel끼리 중첩될 수있다느 겁니다. 또 새로운 프로젝트를 열고 다음과 같이 작성합니다.
 

여기까지는 결과가 우리가 아는 당연한 결과겠지요.
 

그런데 여기에 이런 StackPanel을 오른쪽에 하나 더 삽입할 수 있습니다. 사이에 Margin을 삽입하고 똑같은 StackPanel을 삽입합니다.
 

그럼 아래와 같이 하나의 표 형태처럼 배열됩니다.

사실 어떻게 보면 높이가 자동으로 형성되기 때문에 이를 이용해서 표를 만들 수 있겠다하겠지만
잘 못 사용하면 이는 독이 될 수 있습니다. 아까 말씀드렸던 것처럼 StackPanel의 개체는 각각이 독립적이기 때문에 하나의 크기가 다른 TextBlock과 다르다면 전체적인 크기는 제각기 달라지겠지요. 가령 맨 마지막 Grid의 텍스트를 키워보면

와 같이 텍스트가 잘리는 현상이 발생할 수도 있다는 거지요. 이전 포스팅에서 Ellipse가 사라진 것처럼 말이죠.

여기까지가 다양하게 StackPanel의 성질을 다뤄본 내용이었습니다.