레이아웃 컨테이너

퓨즈[Fuse]의 레이아웃을 구성하는 컨테이너 요소들과 사용법입니다. 컨테이너란 자식 요소들을 내부에 포함할 수 있는 컴포넌트(컨트롤)들을 말합니다.

[[ Panel ]]
기본 컨테이너입니다. 포토샵의 레이어처럼 위쪽 레이어에 의해 아래쪽 레이어는 가려집니다.

1
2
3
4
5
6
7
<App Theme="NativeWithFallback">
    <Panel>
        <Button Text="1" />
        <Button Text="2" />
        <Button Text="3" />
    </Panel>
</App>

layout01

[[ StackPanel ]]
자식 오브젝트들을 순서대로 쌓아서 정렬하는 컨테이너입니다.
방향은 Orientation 속성(기본 Vertical)을 이용할 수 있으며, ItemSpacing 속성으로 자식간의 간격을 조절할 수 있습니다. 기본값은 12pt입니다.

1
2
3
4
5
6
7
<App Theme="NativeWithFallback">
    <StackPanel Orientation="Horizontal" ItemSpacing="-11pt">
        <Button Text="1" />
        <Button Text="2" />
        <Button Text="3" />
    </StackPanel>
</App>

layout02

[[ WrapPanel ]]
웹브라우저의 창 크기를 조절하다 보면 블럭(div)이 아래로 떨어지는 경우를 볼 수 있습니다. 그와 같이 레이아웃의 크기에 따라 한 줄에 보여줄 자식들의 갯수를 자동으로 조절하고 싶은 경우에 사용할 수 있습니다. FlowDirection 속성을 이용하면 기준 방향을 조절할 수 있습니다. Orientation의 기본값은 ‘Horizontal’ 이고, ItemWidth와 ItemHeight로 자식들의 최대 크기를 지정할 수 있습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<App Theme="NativeWithFallback">
    <WrapPanel FlowDirection="RightToLeft">
        <Button Text="1" />
        <Button Text="2" />
        <Button Text="3" />
        <Button Text="4" />
        <Button Text="5" />
        <Button Text="6" />
        <Button Text="7" />
        <Button Text="8" />
        <Button Text="9" />
        <Button Text="10" />
    </WrapPanel>
</App>

layout03

[[ DockPanel ]]
한쪽 벽에 붙이는 기능인 Dock을 가능하게 하는 컨테이너입니다. 어떤 벽에 붙을지는 컨테이너가 아닌 자식들에 속성을 지정합니다. Dock 속성은 다른 패널들에는 적용되지 않습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<App Theme="NativeWithFallback">
    <DockPanel>
        <Button Text="1" Dock="Left" />
        <Button Text="2" Dock="Top" />
        <Button Text="3" Dock="Top" />
        <Button Text="4" Dock="Right" />
        <Button Text="5" Dock="Fill" />
        <Button Text="6" Dock="Top" />
        <Button Text="7" Dock="Right" />
        <Button Text="8" Dock="Top" />
        <Button Text="9" Dock="Bottom" />
        <Button Text="10" Dock="Right" />
    </DockPanel>
</App>

layout04

[[ Grid ]]
격자 모양으로 레이아웃을 구성할 수 있는 컨테이너입니다. RowCount와 ColumnCount를 이용해서 격자를 구성하고 Rows와 Columns를 이용해서 크기를 조절합니다. *는 %라고 생각하면 되는데, 각 숫자들을 더한 값으로 나누게 됩니다. 즉, 1*,3*,2*는 1/5,3/5,2/5입니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<App Theme="NativeWithFallback">
    <Grid RowCount="3" ColumnCount="4" Rows="1*,3*,2*">
        <Button Text="1" />
        <Button Text="2" />
        <Button Text="3" />
        <Button Text="4" />
        <Button Text="5" />
        <Button Text="6" />
        <Button Text="7" />
        <Button Text="8" />
        <Button Text="9" />
        <Button Text="10" />
    </Grid>
</App>

layout05

레이아웃 샘플 코드 ::
https://www.fusetools.com/examples/layout

[[ 동영상 강좌(재생 목록 버튼을 누르세요) ]]

Was this article helpful?

Related Articles