Layout_01_Canvas

WPF : 2008.09.21 19:23
Tag


Canvas는 WPF에서 사용하는 가장 기본적인 panel이다.
Canvas의 Left, Top, Right, Bottom 같은 속성을 이용하여 Canvas내의 버튼 같은 컨트롤 요소들을 배치 할 수 있다.

바로 기본적인 예제를 하나 살펴보자

<Canvas>

        <Button Background="Red">Left=0, Top=0</Button>
        <Button Canvas.Left="18" Canvas.Top="18"
            Background="Orange">Left=18, Top=18</Button>
        <Button Canvas.Right="18" Canvas.Bottom="18"
            Background="Yellow">Right=18, Bottom=18</Button>
        <Button Canvas.Right="0" Canvas.Bottom="0"
            Background="Lime">Right=0, Bottom=0</Button>
        <Button Canvas.Right="0" Canvas.Top="0"
            Background="Aqua">Right=0, Top=0</Button>
        <Button Canvas.Left="0" Canvas.Bottom="0"
            Background="Magenta">Left=0, Bottom=0</Button>

</Canvas>

Canvas 라는 하나의 layout 패널 안에 6개의 Button 컨트롤이 들어갔다. 각각의 버튼들은
Canvas.Left , Canvas.Right 같은 속성들의 값에 의해 적당한 자리로 배치 되었다.

결과 화면을 보면 다음과 같다.


Canvas.Left, Canvas.Right, Canvas.Top, Canvas.Bottom 같은 속성들을 사용할 경우 한가지 주의 할점은
Left 와 Right 속성을 동시에 사용하거나 Top 과 Bottom 같은 속성을 동시에 사용하면 Right 속성과 Bottom
속성은 무시가 된다.

예를 들어 Canvas.Left="0" Canvas.Right="0"
              Canvas.Top="0" Canvas.Bottom="0" 이런식으로 속성 값을 주면
Canvas.Right 속성과 Canvas.Bottom 속성은 무시 되고 다음과 같은 결과가 나온다.


또한 Canvas의 ZIndex 라는 속성을 사용하여 Canvas내에서 그려지는 컨트롤들의 보여지는 순서를 조정 할 수 있다.
예를 들면 다음과 같다.

<Button Canvas.ZIndex="1" Background="red">On Bottom with Default ZIndex=1</Button>
<Button Background="Orange">On Bottom with Default ZIndex=0</Button>
의 실행 결과는 다음과 같다.


하지만 다음의 실행 결과는 다르다.
<Button Background="red">On Bottom with Default ZIndex=1</Button>
<Button Canvas.ZIndex="1" Background="Orange">On Bottom with Default ZIndex=0</Button>



지금까지 Canvas 라는 Layout Panel에 대해서 알아 보았다.

출처 : Windows Presentation Foundation Unleashed (Adam Nathan)

Posted by JMSOFT

댓글을 달아 주세요

티스토리 툴바