레이아웃 <Canvas>

WPF 의 레이아웃 시스템은 아주 유연하고 강력한 기능을 제공한다.

 

WPF 는 패널(Panel)이라고 부르는 기본적인 하지만 강력한 레이아웃 요소를 제공한다.

이 패널들은 자신만의 기본적인 레이아웃 시스템(정렬 규칙)을 가지고 있으며

패널은 자식 요소를 가질 수 있고 또 자식 요소들은 컨텐츠나 또 다른 패널을 가질 수 있으므로

강력한 레이아웃을 구성할 수 있다.

 

패널	특징	자식 요소 겹침
Canvas	가장 기본적인 패널로 자식 요소를 원하는 위치에 배치 할수 있다.	O
StackPanel	가로나 세로 방향으로 자식 요소를 일렬로 정렬한다.	X
WrapPanel	StackPanel 과 비슷하지만 자식 요소를 왼쪽에서 오른쪽으로 차례로 배치하며 크기를 벗어나면 다음 줄에 배치한다	X
DockPanel	각 지정 방향에 자식 요소를 배치한다	X
Grid	가장 강력한 패널로 표 형태로 자식 요소를 배치한다	O

---

01. Canvas 패널

가장 기본적인 패널로 자식 요소를 원하는 위치(절대 위치)에 배치한다.  사용하기 가장 단순하다.

 

Canvas 패널은 윈폼의 그리기 영역과 가장 유사한 패널로 일반적으로 그래픽 콘텍츠를 배치(그리기)하고자 할 때 유용하게 사용할 수 있다.

 

핵심 속성은 Canvas.Left, Canvas.Top, Canvas.Right, Canvas.Bottom 이다.

 

 

 

 

 

각각 크기를 줄였을 때의 윈도우를 보인 것이다.

 

두 번째 그림에서 Button 은 왼쪽, 위를 기준으로 Ellipse 요소는 오른쪽, 위를 기준으로 배치되어 있으므로 각각을 기준으로 자식 요소들이 크기에 따라 배치되며

 

XAML 코드에서 Button 보다 Ellipse 를 아래에 정의하여 Ellipse 가 화면 위쪽에 보이는 것을 볼 수 있다.

 

또 위쪽을 기준으로 배치되어 있으므로 자식 요소들이 윈도우가 작아지면 아래 자식 요소들이 잘려 보이는 모습을 볼 수 있다.

자식 요소는 Width 와 Height 을 결정하고 부모의 어떤 곳에 놓일 것인지를 Canvas.Left, Canvas.Top 속성을 이용하여 지정한다.

잘 보면 알겠지만 자식 요소 Button 에서()는 부모 요소의 속성인 Canvas.Left 와 Canvas.Top 을 사용한다는 것을 알 수 있다.

이 문법을 XAML 의 결합 속성 문법이라 부르며 WPF 의 의존 속성으로 가능한 것이다.

WPF 요소의 대부분의 속성은 의존 속성으로 정의되어 있으며 기존에 알고 있는 .Net 속성과는 다른 개념으로 정의된다.

 

간단하게 의존 속성은 여러 가지(데이터 바이딩, 스타일, 에니메이션 등) WPF 만의 기능을 구축하기 위해 새로 만들어낸 속성 개념이다.