본문 바로가기

silverlight

Layout Panel #3 (StackPanel)

StackPanel : 콘텐트 엘리먼트들을 Stack처럼 순서대로 차곡차곡 쌓아 배치하는 Layout Panel.
(Stack처럼 배치 되긴 하나, Data structure의 Stack 구조처럼 LIFO(Last In First Out)로 콘텐트 엘리먼트를 삭제하는 것은 아니다. 다른 Layout Panel과 마찬가지로, Children property(UIElementCollection)에 보관하며, RemoveAt으로 임의의 콘텐트를 삭제할 수도 있다.)

StackPanel 에 콘텐트 엘리먼트를 추가하면, 순서대로 배치 되며, 배치 방향은 Default로 Vertical이 된다.
<StackPanel x:Name="myStackPanel">
<Button Content="First"/>
<Button Content="Second"/>
<Button Content="Third"/>
</StackPanel>

콘텐트 엘리먼트의 배치를 가로 방향으로 하고 싶다면, Orientation property를 Horizontal로 하면 된다.
<StackPanel x:Name="myStackPanel" Orientation="Horizontal">
<Button Content="First"/>
<Button Content="Second"/>
<Button Content="Third"/>
</StackPanel>



위 예제에서는 myStackPanel 안에 Button 이 순서대로 배치 된 것을 확인할 수 있다.
또, Button의 Width와 Height를 지정하지 않았기 때문에, Vertical일 경우엔 Width가 Stretch되고 Height는 Content의 픽셀만큼, Horizontal 일 경우에는 Width가 Content의 픽셀만큼, Height가 Stretch된다.
콘텐트 엘리먼트의 Width와 Height property를 지정 가능하며,
Vertical인 경우에는 HorizontalAlignment를
<Button Width="60" Height="60" Content="First" HorizontalAlignment="Left"/>
<Button Width="60" Height="60" Content="Second" HorizontalAlignment="Center"/>
<Button Width="60" Height="60" Content="Third" HorizontalAlignment="Right"/>

Horizontal인 경우에는 VertialAlignment를 지정하여 배치할 수 있다.
<Button Width="60" Height="60" Content="First" VerticalAlignment="Top"/>
<Button Width="60" Height="60" Content="Second" VerticalAlignment="Center"/>
<Button Width="60" Height="60" Content="Third" VerticalAlignment="Bottom"/>

'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 #2 (Grid)  (0) 2009.06.11
Layout Panel #1 (Canvas)  (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