'Panel'에 해당되는 글 5건

  1. 2009.06.12 Layout Panel #5 (WrapPanel)
  2. 2009.06.12 Layout Panel #4 (DockPanel)
  3. 2009.06.12 Layout Panel #3 (StackPanel)
  4. 2009.06.11 Layout Panel #2 (Grid)
  5. 2009.06.11 Layout Panel #1 (Canvas)
Silverlight2009.06.12 16:21

WrapPanel은 System.Windows.Controls 어셈블리를 참조 추가하고, 네임스페이스를 참조하기 위한 접두사를 사용하여 쓸 수 있다. (참고 : 2009/06/12 - [Control/Layout Panel] - Layout Panel #4 (DockPanel))

WrapPanel 
StackPanel과 같이 추가 되는 콘텐트 엘리먼트의 순서에 따라 차곡차곡 배치하는 Layout Panel.

WrapPanel과 StackPanel
WrapPanel 에 콘텐트 엘리먼트를 추가하면, 추가 된 순서대로 배치 되며, 배치 방향은 Default로 Horizontal이 된다.
<controls:WrapPanel Width="160" Height="160">
<Button Content="#1" Width="40" Height="40">
<Button Content="#2" Width="40" Height="40">
<Button Content="#3" Width="40" Height="40">
<Button Content="#4" Width="40" Height="40">
</controls:WrapPanel>

StackPanel도 WrapPanel과 같은 Horizontal로 배치 해 보면,
<StackPanel Width="160" Height="160" Orientation="Horizontal">
<Button Content="#1" Width="40" Height="40">
<Button Content="#2" Width="40" Height="40">
<Button Content="#3" Width="40" Height="40">
<Button Content="#4" Width="40" Height="40">
</StackPanel>

다음과 같이, 배치 된다.

StackPanel의 Button 들의 VerticalAlignment 를 Top으로 한다면, WrapPanel과 똑같은 형태로 배치 될 것이다.

WrapPanel 과 StackPanel의 차이점은 무엇인가?
WrapPanel의 이름에서 유추 할 수 있듯이 배치 되는 콘텐트 엘리먼트가 늘어나면서, WrapPanel의 너비나 높이에 꽉 찬다면, 다음 행이나 열로 넘어가서 다시 배치되게 된다.

위 코드에서 Button을 더 추가해 보면,
<Button Content="#5" Width="40" Height="40">
<Button Content="#6" Width="40" Height="40">
<Button Content="#7" Width="40" Height="40">
<Button Content="#8" Width="40" Height="40">
<Button Content="#9" Width="40" Height="40">
<Button Content="#10" Width="40" Height="40">
<Button Content="#11" Width="40" Height="40">
<Button Content="#12" Width="40" Height="40">
<Button Content="#13" Width="40" Height="40">
<Button Content="#14" Width="40" Height="40">

다음과 같이 배치된다.

StackPanel은 추가 된 버튼을 화면에 표시 하지 못하고 잘린 반면, WrapPanel은 버튼이 추가 되면서, 너비에 꽉 차면 다음 행으로 내려와 다음 버튼을 다시 배치하고 있다.
이때, Orientation을 Vertical로 둔다면,

WrapPanel은 버튼이 추가 되면서, 높이에 꽉 차면 다음 열로 넘어와 다음 버튼을 다시 배치하고 있다.

콘텐트 엘리먼트의 Alignment 조절하기
WrapPanel도 StackPanel과 같이 WrapPanel 에 배치 된 콘텐트 엘리먼트에서 HorizontalAlignment, VerticalAlignment를 지정 할 수 있다.
<controls:WrapPanel Width="160" Height="160" Orientation="Vertical">
<Button Content="#3" Width="80" Height="40"/>

<controls:WrapPanel Width="160" Height="160">
<Button Content="#6" Width="40" Height="80"/>


Orientation = "Vertical" 인 경우, Button 3의 Width를 변경하여 Button 1,2,4의 Horizontal 쪽으로 여백이 생겼고,
Orientation = "Horizontal"인 경우, Button 6의 Height를 변경하여 Button 5,7,8의 Vertical 쪽으로 여백이 생겼다.

이 여백 에 HorizontalAlignment, VerticalAlignment를 변경하여 다음과 같이 배치 할 수 있다.
<Button Content="#1" Width="40" Height="40" HorizontalAlignment="Left"/>
<Button Content="#2" Width="40" Height="40" HorizontalAlignment="Center"/>
<Button Content="#3" Width="80" Height="40"/>
<Button Content="#4" Width="40" Height="40" HorizontalAlignment="Right"/>

<Button Content="#5" Width="40" Height="40" VerticalAlignment="Top"/>
<Button Content="#6" Width="40" Height="80"/>
<Button Content="#7" Width="40" Height="40" VerticalAlignment="Center"/>
<Button Content="#8" Width="40" Height="40" VerticalAlignment="Bottom"/>
Posted by Min-gu, Kim
Silverlight2009.06.12 12:28
DockPanel을 사용하려면, System.Windows.Control 어셈블리 내 컨트롤을 사용하기 위해서는 우선 참조를 추가하고, XAML 상단에 네임스페이스를 참조하기 위한 접두사를 사용해야 한다.



xmlns:controls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"

DockPanel
DockPanel 은 Docking 될 위치를 설정하여, 설정 된 위치에 고정시켜 배치 하는 Layout Panel이다.
Docking 될 위치를 지정하는 방법은, 콘텐트 엘리먼트에서 DockPanel의 Attached-Property인 Dock를 사용하면 되고, Dock은 Left, Right, Top, Bottom 네 가지가 있다. (배치 되는 콘텐트 엘리먼트의 Dock 위치를 설정하지 않으면 Default로 Left로 Docking 시킨다.)
<controls:DockPanel x:Name="myDockPanel" LastChildFill="False">
            <Button controls:DockPanel.Dock="Top" Content="Top"/>
            <Button controls:DockPanel.Dock="Left" Content="Left"/>
            <Button controls:DockPanel.Dock="Right" Content="Right"/>
            <Button controls:DockPanel.Dock="Bottom" Content="Bottom"/>
</controls:DockPanel>

DockPanel.LastChildFill property를 True로 하게 되면, 마지막으로 배치 되는 콘텐트 엘리먼트는 지정 된 Dock property와 상관없이 다른 콘텐트 엘리먼트가 고정되고 남은 부분을 꽉 채우게 된다.


Docking 은 먼저 설정 된 콘텐트가 우선한다.
예를 들어, 위 코드에서 처럼 Dock = "Top" 을 먼저 하고 Dock = "Left" 를 그 뒤에 지정했기 때문에, Top과 Left가 겹치는 부분에서는 Top이 그 공간을 차지하게 된다. 반대로, Dock = "Left"를 먼저 지정 한다면, Left가 그 공간을 차지하게 된다.
<Button controls:DockPanel.Dock="Left" Content="Left"/>
<Button controls:DockPanel.Dock="Top" Content="Top"/>



위와 같이, DockPanel 내 배치 될 콘텐트 엘리먼트의 구조를 미리 생각하고, 겹치는 부분을 잘 처리하기 위해 순서에 유의해야 한다.


<Button controls:DockPanel.Dock="Left" Content="#1"/>
<Button controls:DockPanel.Dock="Top" Content="#2"/>
<Button controls:DockPanel.Dock="Right" Content="#3"/>
<Button controls:DockPanel.Dock="Bottom" Content="#4"/>
<Button controls:DockPanel.Dock="Left" Content="#5"/>
<Button controls:DockPanel.Dock="Top" Content="#6"/>
<Button controls:DockPanel.Dock="Right" Content="#7"/>
<Button controls:DockPanel.Dock="Bottom" Content="#8"/>
<Button controls:DockPanel.Dock="Left" Content="#9"/>
<Button controls:DockPanel.Dock="Top" Content="#10"/>
<Button controls:DockPanel.Dock="Right" Content="#11"/>
<Button controls:DockPanel.Dock="Bottom" Content="#12"/>
<Button controls:DockPanel.Dock="Left" Content="#13"/>
<Button controls:DockPanel.Dock="Top" Content="#14"/>
<Button controls:DockPanel.Dock="Right" Content="#15"/>
<Button controls:DockPanel.Dock="Bottom" Content="#16"/>

Posted by Min-gu, Kim
Silverlight2009.06.12 11:06
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 #3 (StackPanel)  (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
Posted by Min-gu, Kim
Silverlight2009.06.11 17:20
Grid : 테이블 형식으로 콘텐트를 구성하여 배치 할 수 있도록 하는 Layout Panel.

테이블 형식의 콘텐트를 구성하기 위한 Grid 설정하기
Grid에는 RowDefinitions와 ColumnDefinitions 두 가지 컬렉션 property가 있다. 두 property는 각각 행과 열을 관리하는 컬렉션이다. 원하는 행,열 만큼 각각의 컬렉션에 RowDefisnition과 ColumnDefinition을 추가하여 설정한다.
예를 들어, 3x3 (행,열)의 테이블 형식으로 Grid 를 구성하려 한다면,
<Grid x:Name="myGrid" Grid.Row="2" ShowGridLines="True">
<Grid.RowDefinitions>
                <RowDefinition/>
                <RowDefinition/>
                <RowDefinition/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition/>
                <ColumnDefinition/>
                <ColumnDefinition/>
            </Grid.ColumnDefinitions>
</Grid>
위와 같이 RowDefinitions에 RowDefinition을 3개, ColumnDefinitions에 ColumnDefinition을 3개씩 추가하면 된다.

물론, XMAL 뿐 아니라 런타임에도 행과 열을 추가 삭제 할 수 있다.
this.myGrid.ShowGridLines = true;
this.myGrid.RowDefinitions.Add(new RowDefinition());
this.myGrid.ColumnDefinitions.RemoveAt(0);

위 코드를 실행하면, 3x3 (행,열)로 구성 된 Grid가 4x2 (행,열)로 변경 되는 것을 확인 할 수 있다.


Grid에는 ShowGridLines 라는 Boolean 형태의 property가 있다. ShowGirdLines 속성을 True, False로 변경 하면, Grid가 구성 된 행과 열을 보여주거나 감출 수 있다. (XAML, 런타임 모두 가능)

콘텐트 엘리먼트의 배치
Grid 에는 Row, Column, RowSpan, ColumnSpan 네 가지의 Attached Property가 있어, 이것들을 사용하여 콘텐트 엘리먼트들을 배치할 수 있다.
<Rectangle Width="Auto" Height="Auto" Fill="Blue"
                       Grid.Row="0" Grid.Column="0"/>
<Rectangle Width="Auto" Height="Auto" Fill="Yellow"
                       Grid.Row="1" Grid.Column="1"/>
<Rectangle Width="Auto" Height="Auto" Fill="Red"
                       Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="2"/>
<Rectangle Width="Auto" Height="Auto" Fill="Green"
                       Grid.Row="1" Grid.Column="3" Grid.RowSpan="2"/>
3x3 (행,열)로 구성 된 Grid에 위와 같이 콘텐트 엘리먼트들을 추가 할 수 있다.
Grid.Row와 Grid.Column 값으로 위치 될 행과 열을 지정하고,
Grid.RowSpan 으로 행의 확장을, Grid.ColumnSpan으로 열의 확장을 지정할 수 있다.

위 코드를 실행하면 다음과 같이 콘텐트 엘리먼트들이 배치 된 것을 확인 할 수 있다.


셀 크기 변경
RowDefinition과 ColumnDefinition을 추가 할 때, 각각 행의 높이, 열의 너비를 지정 할 수 있다.
셀 크기 변경에는 고정 값을 지정하는 방법과, * 을 이용하는 방법, Auto 를 이용하여 자종 크기를 지정하는 3가지 방법이 있다.
<Grid.RowDefinitions>
                <RowDefinition Height="50"/>   고정 값을 지정하는 방법
                <RowDefinition Height="2*"/>   *을 이용하는 방법 (50을 제외한 부분의 2/5)
                <RowDefinition Height="3*"/>   *을 이용하는 방법 (50을 제외한 부분의 3/5)
</Grid.RowDefinitions>
고정 값을 지정 하는 경우 Row의 Height나 Column의 Width가 지정 된 픽셀만큼으로 지정된다.
*을 이용하여 지정하는 경우에는 다른 지정방법에 의해서 사용되고 남은 공간이 얼마나 있는지를 계산 한 뒤, 그 결과에 따라서 결정된다. 위 경우에는 50을 지정하고 남은 공간을 5등분 하여, 두번째 Row는 2/5만큼, 세번째 Row는 3/5만큼의 크기로 결정된다.

Grid의 Height가 200이라면, 첫 번째 Row의 Height는 50, 두 번째 Row의 Height는 60, 세 번째는 90이 된다.

<Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
           
<Rectangle Width="50" Fill="Blue" Grid.Column="0"/>
<Rectangle Width="150" Fill="Yellow" Grid.Column="1"/>
<Rectangle Width="200" Fill="Red" Grid.Column="2"/>
또 한가지, Auto를 사용하게 되면, 해당하는 Row나 Column에 배치되는 콘텐트 엘리먼트의 사이즈(Width나 Height)에 따라서 자동으로 Row나 Column의 사이즈가 지정 된다.

위 코드를 실행 한 결과, 첫 번째 Column은 콘텐츠 엘리먼트의 Width 값인 50만큼, 두 번째는 150, 세 번째는 200만큼의 사이즈가 지정 됐다.

GridSplitter를 사용하여, 동적으로 셀의 경계를 조절
System.Windows.Control.dll 어셈블리에는 실버라이트가 제공하는 내장 컨트롤을 보완하기 위한 여러가지 컨트롤이 있다. GridSplitter도 그 중 하나이며, System.Windows.Control 어셈블리 내 컨트롤을 사용하기 위해서는 우선 참조를 추가하고, XAML 상단에 네임스페이스를 참조하기 위한 접두사를 사용해야 한다.
xmlns:controls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"
그리고 동적으로 셀 크기를 변경하고자 하는 위치에 GridSplitter를 배치한 뒤 실행 하면 된다.
<Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
<Rectangle Width="Auto" Fill="Blue" Grid.Column="0"/>
<Rectangle Width="Auto" Fill="Yellow" Grid.Column="1"/>
<Rectangle Width="Auto" Fill="Red" Grid.Column="2"/>
<controls:GridSplitter Width="5" Grid.Column="1"/>
런타임시 GridSplitter를 Mouse로 Drag하면 셀 크기가 동적으로 변경 되는 것을 확인 할 수 있다.

'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
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
Posted by Min-gu, Kim
Silverlight2009.06.11 12:34
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
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
Posted by Min-gu, Kim

티스토리 툴바