[WPF] Canvas 사용법

Canvas

• Canvas를 이용하면 자식 컨트롤에 특정 좌표를 할당하여 레이아웃을 제어할 수 있습니다.
• 도형 그릴 때 많이 사용됩니다.

1.Canvas 사용법

<Canvas>
    <Button Canvas.Left="10">Top left</Button>
    <Button Canvas.Right="10">Top right</Button>
    <Button Canvas.Left="10" Canvas.Bottom="10">Bottom left</Button>
    <Button Canvas.Right="10" Canvas.Bottom="10">Bottom right</Button>
</Canvas>

• Canvas 속성은 모서리를 기준으로 위치를 지정합니다.

2.Z-Index

• Canvas 내의 두 컨트롤이 겹치면 마지막으로 정의된 컨트롤이 맨 위로 오게 됩니다.
• ZIndex 속성을 사용하면 이 순서를 변경할 수 있습니다.

  <Canvas>
    <Ellipse Fill="Gainsboro" Canvas.Left="25" Canvas.Top="25" Width="200" Height="200" />
    <Rectangle Fill="LightBlue" Canvas.Left="25" Canvas.Top="25" Width="50" Height="50" />
    <Rectangle Fill="LightCoral" Canvas.Left="50" Canvas.Top="50" Width="50" Height="50" />
    <Rectangle Fill="LightCyan" Canvas.Left="75" Canvas.Top="75" Width="50" Height="50" />
  </Canvas>

  
• 각 직사각형이 원보다 나중에 정의되기 때문에, 서로 겹쳐서 가장 나중의 사각형이 맨 위에 나옵니다.

  <Canvas>
    <Ellipse Fill="Gainsboro" Panel.ZIndex="2" Canvas.Left="25" Canvas.Top="25" Width="200" Height="200"/>
    <Rectangle Fill="LightBlue" Panel.ZIndex="3" Canvas.Left="25" Canvas.Top="25" Width="50" Height="50"/>
    <Rectangle Fill="LightCoral" Panel.ZIndex="2" Canvas.Left="50" Canvas.Top="50" Width="50" Height="50"/>
    <Rectangle Fill="LightCyan" Panel.ZIndex="3" Canvas.Left="75" Canvas.Top="75" Width="50" Height="50"/>
  </Canvas>

  
• Panel.ZIndex로 순서를 지정해 줄수 있습니다.

참고 사이트

WPF Tutorial