[ 레이아웃(Layout) ] Canvas

Canvas는, 앞에서 정의 내린 것처럼 '어떤 레이아웃 로직도 실행하지 않는다. 자식 요소를 원하는 곳에 배치할 수 있으며, 개발자가 직접 레이아웃 프로세스를 제어해야 한다.' 는 것이 바로 Canvas이다.

 

Canvas는 가장 단순한 패널이다. 이는 자식 요소들의 위치를 캔버스의 각 면에 대해 정밀하게 지정할 수 있다. Canvas는 실제로 어떤 레이아웃도 수행하지 않으며, 다만 여러분이 말한 곳에 요소들을 위치시키는 일만 한다. 또한 Canvas는 요소가 사용 가능한 공간을 채우도록 크기를 조정하지도 않으며, 모든 자식 요소는 콘텐츠의 크기에 맞추어 크기가 지정된다.

 

Canvas를 사용할 때는 반드시 각 자식 요소의 위치를 지정해야 한다. 만일 그렇게 하지 않으면 모든 요소는 왼쪽 상단에 몰리게 될 것이다. Canvas는 자식 요소의 위치를 지정하기 위한 4개의 결합 속성을 제공한다. 수직 위치는 Top과 Bottom 속성에 의해 결정되며, 수평 위치는 Left와 Right 속성에 의해 결정된다.

 

 

 

 

 

 

첫번째 TextBlock 요소는 Canvas의 왼쪽 상단을 기준으로 위치가 지정되어 왼쪽으로부터 10 pixel, 위쪽으로부터 20 pixel 떨어진 곳에 텍스트가 나타난다.

두번째 TextBlock 요소는 화면의 오른쪽 아래를 기준으로 위치가 지정되는데, 이는 Canvas의 크기가 재조정되더라도 여전히 텍스트가 오른쪽 아래에 나타난다는 것을 의미한다.

 

 

[ 실행 결과 ]