이번강좌에서는 StackPanel에 대해서 알아보겠습니다.

StackPanel은 자주 사용되는 패널 중에 하나인데요.
Stack이라는 단어는 쌓다라는 의미를 가지고 있는데 StackPanel의 자식객체들을 자동적으로 쌓아서 정렬을 하는 기능을 가지고 있습니다.

그럼 StackPanel안에 객체들을 넣어보겠습니다.


StackPanel 안에 Button을 넣으면 자동적으로 쌓여 정렬이 됩니다.
세로로 자동정렬이 되는데 가로로도 정렬을 할 수 있습니다.

프로퍼티 패널을 살펴보면 Orientation이라는 옵션을 통해서
Vertical 은 세로
Horizontal은 가로
로 설정을 할 수 있습니다.

Orientation의 속성을 Horizontal 로 바꾼모습




















StackPanel의 이 자동정렬은 편리한 속성인데 몇가지 주지할 사항이 있습니다.

StackPanel의 사이즈가 수치로 입력되있는 경우
자식객체의 사이즈가 StackPanel의 사이즈를 넘어가면 안보이는 현상이 생깁니다.


그래서 자식객체의 사이즈가 StackPanel의 사이즈를 넘어갈수 있는 경우를 대비해서 사이즈를 Auto로 설정하는게 좋습니다.

그리고 StackPanel이 자동정렬되는 속성을 가지고 있지만 레이아웃에 따라 떨어져서 정렬될 필요가 있습니다.
그럴 경우에는 해당 자식객체에 Margin을 설정하면 가능합니다.


StackPanel의 특징을 살펴보았는데 자동정렬 되는 특징을 통해 Icon의 배치 또는 큰 틀에서 그룹들을 쌓아서 레이아웃을 할 수 있습니다.


이런 레이아웃을 StackPanel을 이용해서 만들 수 있습니다(제가 만든게 아니라서 StackPanel만 사용해서 만들었다고 못하겠네요...ㅎㅎ)
StackPanel들을 중첩해서 레이아웃을 만드는게 가능합니다.













구조가 상당히 복잡해지지만 이런식의 레이아웃을 할 수 있습니다.





























StackPanel만 사용해서 레이아웃을 구성했지만 Grid와 다른 레이아웃 패널을 함께 사용하면 더 간결하고 쉬운 레이아웃을 만들 수 있습니다.

StackPanel에 대한 강좌는 여기까지이고 다음 강좌에서는 DockPanel에 대해서 알아보겠습니다.

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

이번 강좌에서는 Border에 대해서 알아보겠습니다.
Border는 활용도가 높은 레이아웃 패널인데 제가 사랑하는(?) 패널입니다..ㅎㅎ

우선 프로퍼티를 살펴보겠습니다.


Brushes를 보면 Grid와 Canvas에서는 없었던 BorderBrush라는 속성이 존재합니다.
BorderBrush는 쉽게 생각하면 Stroke의 개념으로 생각하시면 쉬울 것 같습니다.



BorderThickness는 Border의 상하좌우 각 방향으로 두께를 다르게 가질 수 있습니다.
그리고 CornerRadius라는 속성도 가지고 있는데 각 모서리의 라운드를 조절할 수 있습니다.
순서대로 1,2,3,4 의 순서대로 입력할 수 있어 모서리의 라운드를 각각 다르게 설정할 수 있습니다.

다른 설정에 의한 Border의 모양


Border는 이러한 설정들을 통해 다양한 모양으로 만들 수 있어 활용도가 높습니다.
Rectangle은 모서리에 동일한 라운드만 설정할 수 있어 각각의 모서리에 라운드를 설정할 수 있는 Border를 사용하는 경우가 많습니다.

Border의 중요한 특징 중 하나는 자식 객체를 하나밖에 가질 수 없다는 것 입니다.
자식객체를 가진채 다른 객체를 넣으려고 하면 기존의 객체가 새로운 객체로 대체됩니다.

그래서 Border를 사용하기 위해서는 Border안에 Grid를 넣어서 레이아웃을 하거나 Grid안에 Border를 배경으로 사용합니다.


좌측이 Border안에 Grid를 넣은 것이고 우측이 Grid안에 Border를 넣은 것인데 결과적인 모양은 같지만
레이아웃 패널의 종속은 다른 모습입니다.

어떻게 하느냐는 안에 들어가는 객체들의 레이아웃이나 기타 요인에 의해서 결정할 수 있습니다.
지난번 강좌에서도 말했지만 정답은 없습니다. :)

앞서 설명한 속성들을 이용해서 디자인적으로 활용도가 높아 자주 사용되는데요.
이런 식의 디자인에 많이 사용됩니다.(Border안에 TextBlock을 넣음)


저의 경우 가장 많이 사용하는 레이아웃 패널이 Grid와 Border인데 Grid는 전체적인 틀을 잡는데 많이 사용하고 Border는 디자인적인 부분에 많이 사용합니다.
그리고 Border의 특징 중 하나가 Padding을 설정할 수 있는 것인데 그다지 많이 사용되진 않지만 유용한 특징 중 하나입니다.

Border 안에 컨텐츠로 Rectangle을 넣은 모습인데
푸른색이 Border의 영역이고 초록색이 Ractangle입니다.

Border에 Margin과 Padding을 각각 설정했는데
쉽게 말하면 Maring은 바깥쪽 여백이고
Padding은 안쪽 여백이라고 생각하면 쉽습니다.













그럼 Border에 대한 강좌는 여기까지이고 다음강좌에서는 StackPanel에 대해서 알아보겠습니다.

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

이번 강좌에서는 Canvas에 대해서 알아보겠습니다.
Canva는 일반적인 속성들을 가지고 있는 기본적인 레이아웃패널입니다.

한가지 Tip으로 레이아웃 패널의 전환하는 방법을 통해서 Canvas를 만들어보겠습니다.
블렌드에서 새 프로젝트를 생성하면 항상 LayoutRoot라는 Grid가 생성되는데
LayoutRoot를 선택하고 마우스 오른쪽 버튼을 클릭하면


다음과 같은 메뉴가 나타나고 Change Layout Type이라는 메뉴를 통해서 원하는 레이아웃 패널로 변환을 할 수 있습니다.

그러면 Canvas를 선택하고 프로퍼티를 살펴보겠습니다.










































Brushes는 Grid와 마찬가지로 Background와 OpacityMask 속성을 가지고 있습니다.
보면 알 수 있듯이 큰 특징없이 기본적인 속성만 가지고 있는 걸 알 수 있습니다.

Canvas는 기본적인 레이아웃 패널이지만 한가지 특징을 가지고 있는데
Canvas 안에서 객체의 위치를 절대적인 좌표로 지정할 수 있습니다.

Canvas안에 Button을 하나 위치시키고 프로퍼티를 살펴보면 다음과 같은 속성을 볼 수 있습니다.


Left와 Top에 수치가 입력되어있는데 Canvas 사이즈를 기준으로 좌측과 상단으로부터의 떨어진 거리를 설정할 수 있습니다.


이 설정을 통해서 항상 정해진 위치에 객체들을 위치시킬 수 있습니다.

Xaml 코드를 보면


위와 같이 Canvs.Top과 Canvas.Left를 볼 수 있는데
우측과 하단을 기준으로 위치를 설정하고 싶다면 위의 코드를 Canvas.Bottom과 Canvas.Right로 고쳐서 객체를 위치시킬 수 있습니다.
하지만 유의할 점은 Top과 Bottom, Left와 Right를 동시에 설정할 수는 없습니다.

Canvas는 복잡한 구조가 필요하지않고 몇가지의 객체들을 정해진 위치에 배치할 때 유용하게 사용할 수 있습니다.

그리고 이전 강좌에서 Grid가 가장 유연한 레이아웃패널이라는 설명을 드렸었는데
Grid의 Alignment를 Top과 Left과 설정하고 Margin을 이용하면 Canvas와 같이 이용할 수 있기 때문에 Canvas가 아닌 Grid를
통해서 객체를 Canvas처럼 배치할 수 있습니다.

그러면 Canvas보다는 Grid를 사용하는게 낫겠다고 생각할 수 있는데 Canvas와 Grid간의 차이점이 존재하는데요.

저의 경우 Icon 같은 것들은 여러개의 패스를 가지고 있기 때문에 컨테이너로 Canvas를 사용하는데
Canvas는 Grid와 달리 Alignment를 Stretch로 하고 Size가 Auto로 설정해도 자동적으로 Size가 늘어나지 않아서
디자인이 깨지지 않기 때문에 Canvas를 사용합니다.

다음은 Canvas와 Grid 에 Button을 각각 위치한 모습입니다.


Button에는 다음과 같이 설정을 했습니다.

             <Canvas 안의 Button>                                          <Grid 안의 Button>

동일하게 Width와 Height에 Auto로 설정하고 Alignment도 각각 Stretch로 설정했습니다.
하지만 보시다시피 Button의 모습이 다르게 나타납니다.

Canvas안에 들어가는 객체는 Width와 Height에 Auto로 설정이 되어 있을 경우
자신이 가진 Content에 의해 사이즈가 결정이 되게 됩니다.

Grid안에 객체들을 위치하다보면 사이즈에 Auto가 들어가거나 Alignment에 Stretch로 설정되어
디자인이 의도하지 않게 깨지게 되는 경우가 있는데 Canvas를 사용하면 그런 위험에서 어느정도 벗어날 수 있습니다.

Canvas에 대해서 알아봤는데 레이아웃 패널의 사용은 정답이 있기보다는 개인의 선호도나 취향이기 때문에
각자 생각에 맞춰서 원하는 레이아웃을 만들면 된다고 생각합니다.

다음 강좌에서는 Border에 대해서 알아보겠습니다.

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.