티스토리 뷰

반응형

지난 시간 클립아트 조립 시간을 가져 보았지요.
거기서 z-order를 언급한걸 보았습니다.
왜 가르쳐 주지도 않은걸 말하면서 그냥 넘어가지 하셨죠?
훗...이제 말할려구요.

z-order를 클릭해서 위키피디아는 가보셨나요? 2차원이 어쩌고 저쩌고 하지요?
자 그럼 이제 알아봅시다.

아래 샘플은 여러개의 그림 객체를 z-order를 사용한 XAML 파일입니다.
WPF 베타2부터 ZIndex라는 속성이 생겼는데요, Panel이나 Canvas, Grid, StackPanel에도 모두 쓸 수 있습니다.

ZIndex 속성 사용하기
아래 소스를 봅시다.

<Canvas Background="Ivory"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation">


 
<Canvas>
    <Rectangle Height="60" Width="60" Fill="Gold"/>
    <Rectangle Height="50" Width="70" Fill="Coral"/>
    <Rectangle Height="40" Width="80" Fill="Teal"/>
    <Rectangle Height="30" Width="90" Fill="Black"/>
  </Canvas>

  <Canvas Canvas.Left="120">
    <Rectangle Canvas.ZIndex="99" Height="60" Width="60" Fill="Gold"/>
    <Rectangle Canvas.ZIndex="98" Height="50" Width="70" Fill="Coral"/>
    <Rectangle Canvas.ZIndex="97" Height="40" Width="80" Fill="Teal"/>
    <Rectangle Canvas.ZIndex="96" Height="30" Width="90" Fill="Black"/>
  </Canvas>

</Canvas>

두번째 Rectangle 객체를 보면 Zindex값을 주었죠. 그리하여 아래의 그림이 나옵니다.

Default and explicit Z-order

기본적으로 default값으로 잡힌 z-order는 순서대로 나아갑니다.
즉, 먼저 생성한놈이 제일 아래 위치하게 되는거죠. 쌓아가는 느낌처럼 말이죠.

그리고 두번째는 우리가 임의로 ZIndex값을 주었죠. 99부터 주었습니다.
높은 숫자가 위로 가는거죠.
그럼 default는 뭐였을가요?

default값은 0입니다
수치가 같다면 먼저 생성한 놈이 아래 깔리는 겁니다. ^^;
간단하죠?

물론 -99같은 음수도 사용가능합니다.
결국 높은값일수록 화면가까이 위로 올라오는것이고
낮은값일수록 멀리 저~~ 뒤로 가게 됩니다.
Z-order aligns along the z-axis
Relationship of z-order to z-axis

런타임시에 ZIndex 값 부여하기
GetZIndex
메소드로 zorder값을 가져 올수 있는데요
int zOrder = Canvas.GetZIndex(object);


당연히, 줄수도 있겠죠? get가져왔으니, set으로 주겠죠 모  ^^
Canvas.SetZIndex(object, (int)99);

참고할 사항은
이미 다 생성되어 있는놈들에게 index값 부여해봤자 바뀌지 않습니다.
객체를 지울때, 아니면 재추가 할때 그럴때 index값을 바꿔야 적용이 됩니다.

- Lorin 씀

반응형
댓글