본문 바로가기

silverlight

Layout Panel #1 (Canvas)

Layout Panel : 콘텐트를 배치하기 위해 사용되는 엘리먼트
Layout Panel 내 추가 할 콘텐트 엘리먼트들은 UIElement 형식으로 파생된 엘리먼트이어야만 한다.
왜냐하면, Layout Panel들은 System.Windows.Controls.Panel을 상속 받고 있으며, 추가 할 콘텐트 엘리먼트들은 UIElementCollection형의 Children property에 추가 되기 때문이다.
따라서, UIElement형의 모든 콘텐트 엘리먼트들은 Layout Panel  내 추가 할 수 있다.

Canvas
Canvas 는 ElementPoint를 사용하여 엘리먼트들을 원하는 위치에 배치 할 수 있는 기능을 제공하는 Layout Panel이다.

Canvas에 콘텐트 엘리먼트를 추가 하는 방법은 두 가지 방법이 있다.
1. Attached Property를 사용하여 ElementPoint를 지정하여 배치.
<Canvas Background="White">
            <Rectangle Width="50" Height="50" Fill="Blue" Canvas.Left="0" Canvas.Top="0"/>
            <Rectangle Width="50" Height="50" Fill="Red" Canvas.Left="100" Canvas.Top="0"/>
            <Rectangle Width="50" Height="50" Fill="Black" Canvas.Left="0" Canvas.Top="100"/>
            <Rectangle x:Name="myRect"  Width="50" Height="50" Fill="Yellow" Canvas.Left="100" Canvas.Top="100"/>
</Canvas>
위와 같이 Canvas의 Attached Property인 Left, Top 을 사용하여, 추가 될 콘텐트 엘리먼트의 ElementPoint인 (Left, Top) 을 설정하여 배치하면 된다. 또한, 이는 런타임에도 설정할 수 있다.
double left = Canvas.GetLeft(this.myRect);
Canvas.SetLeft(this.myRect, left - 15);
double top = Canvas.GetTop(this.myRect);
Canvas.SetTop(this.myRect, top - 15);
Canvas class에서 GetLeft, GetTop 함수를 제공하며, Canvas 내 배치 된 UIElement를 파라미터로 넘기면, 파라미터로 넘겨 준 UIElement의 Canvas 내 Left 속성과 Top 속성 값을 가져온다.
마찬가지로, Canvas class에서 제공하는 SetLeft, SetTop 함수를 사용하면, Canvas 내 배치 된 UIElement의 Canvas 내 Left속성과 Top 속성 값을 변경 할 수 있다.

위 코드를 실행하면 다음과 같이 마지막 Rectangle UIElement 가 Left , Top 각각 -15만큼 이동 된다.


2. Canvas에 추가 된 순서대로 콘텐트 엘리먼트를 배치. 그리고 ZIndex
<Canvas Background="White">
            <Rectangle Width="50" Height="50" Fill="Blue" Canvas.Left="10" Canvas.Top="10"/>
            <Rectangle x:Name="myRect"  Width="50" Height="50" Fill="Red" Canvas.Left="40" Canvas.Top="20"/>
            <Rectangle Width="50" Height="50" Fill="Black" Canvas.Left="80" Canvas.Top="30"/>
            <Rectangle Width="50" Height="50" Fill="Yellow" Canvas.Left="60" Canvas.Top="60"/>
        </Canvas>
위와 같이 Canvas 내 배치 된 콘텐트를 겹치도록 해 보면, 나중에 추가 된 콘텐트가 이전에 추가 된 콘텐트보다 상위에 표시 되게 된다. 이것은, Canvas에 추가 된 순서대로 콘텐트가 배치 되기 때문이다.
또 한가지, ZIndex 가 지정 되지 않아서 모두 Default 값인 0으로 설정 되 있기 때문이다.
ZIndex 속성 또한 Canvas의 Attached Property이고, ZIndex 값의 변경으로 콘텐트의 배치를 다른 콘텐트 보다 앞으로 혹은 뒤로 변경 할 수 있다. 물론 XMAL에서도 런타임에서도 모두 가능하다.
int zindex = Canvas.GetZIndex(this.myRect2);
Canvas.SetZIndex(this.myRect2, 1);
Canvas class에서 GetZIndex 함수를 제공하며, Canvas 내 배치 된 UIElement를 파라미터로 넘기면, 파라미터로 넘겨 준 UIElement의 Canvas 내 ZIndex 속성 값을 가져온다.
마찬가지로, Canvas class에서 제공하는 SetZIndex 함수를 사용하면, Canvas 내 배치 된 UIElement의 Canvas 내 ZIndex 값을 변경 할 수 있다.
ZIndex 값이 상대적인 다른 콘텐트의 ZIndex 값 보다 작으면, 뒤로 배치되고, 반대의 경우 앞으로 배치 된다.

위 코드를 실행하면 다음과 같이 myRect UIElement 가 가장 앞으로 배치 되게 된다.



Canvas 의 장점
Canvas는 콘텐트를 ElementPoint로 고정시키기만 할 뿐, 재조정 하지 않기 때문에, 임의의 어떤 콘텐트의 위치가 변경 되어야 할 때마다 다른 콘텐트들의 배치를 위한 계산이 수행되거나 하지 않아, 계산의 횟수를 최소화 하기 때문에 성능상으로 빠르다는 이점이 있다.

'silverlight' 카테고리의 다른 글

Style 정의하기  (0) 2009.06.16
VisualStateManager  (0) 2009.06.15
Storyboard (Animation in Silverlight)  (0) 2009.06.15
Layout Panel #5 (WrapPanel)  (0) 2009.06.12
Layout Panel #4 (DockPanel)  (0) 2009.06.12
Layout Panel #3 (StackPanel)  (0) 2009.06.12
Layout Panel #2 (Grid)  (0) 2009.06.11
Coposition에서의 ViewPort, AspectRatio, 좌표계, ElementalPoint, LogicalPoint  (0) 2009.06.10
Deepzoom Composer로 Export 된 결과물  (0) 2009.06.09
Deepzoom  (0) 2009.06.09