퓨즈[Fusetools] 문서[Docs] 번역

  1. Home
  2. 퓨즈[Fusetools] 문서[Docs] 번역
  3. 레이아웃
  4. 그리드[Grid]

그리드[Grid]

Grid 클래스

자식들을 격자 모양으로 배치합니다.

RowCount와 ColumnCount 속성

동일한 크기의 행과 열(또는 하나씩)이 필요한 경우 RowCount 및 ColumnCount 속성을 사용할 수 있습니다.

1
<Grid RowCount="4" ColumnCount="2"/>

기본적으로 그리드의 요소는 UX에 나타나는 순서대로 왼쪽에서 오른쪽으로, 위에서 아래로 배치됩니다. 그러나 행(Row)과 열(Column) 속성을 사용하여 배치할 격자 셀을 명시적으로 지정할 수도 있습니다.

1
2
3
4
<Grid RowCount="1" ColumnCount="2">
    <Rectangle Row="0" Column="1" Color="Red"/>
    <Rectangle Row="0" Column="0" Color="Blue"/>
</Grid>

요소가 여러 행이나 열을 차지하도록 하려면 RowSpan 및 ColumnSpan 속성을 사용할 수 있습니다.

1
2
3
<Grid RowCount="2" ColumnCount="2">
    <Rectangle ColumnSpan="2" RowSpan="2" Color="Red"/>
</Grid>

Rows와 Columns 속성

행과 열 크기를 계산하는 방법에 대한 보다 세부적인 제어는 행과 열 속성을 사용하여 수행하는 것입니다. 이러한 속성은 쉼표로 구분된 격자 크기 목록을 받아들이며 몇 가지 형식을 취할 수 있습니다. 값은 절대, 상대 또는 자동이 될 수 있습니다.

10, 10, 50 포인트의 3개의 행과 3개의 열이 있는 그리드의 예는 첫 번째가 사용 가능한 공간의 20%를 차지하고 마지막 행이 60%를 차지합니다.

1
<Grid Rows="10,10,50" Columns="1*,1*,3*"/>

여기서 비례 열 크기는 모든 값(1+1+3 = 5)을 먼저 합산하여 계산됩니다. 그런 다음 그 값을 합계(1/5 = 20%, 1/5 = 20%, 3/5 = 60%)로 나눕니다.

비례 크기는 그리드가 부모 패널을 채우도록 확장되거나 고정된 크기인 경우에만 의미가 있습니다. 내용에 맞게 축소하는 경우 비례 행/열의 크기는 0입니다.

다음 Grid에는 2행이 있는데 첫 번째 행은 해당 행에서 가장 높은 요소의 높이를 가져오고 두 번째 행은 나머지 공간을 차지합니다:

1
<Grid Rows="auto,1*" />

Grid의 인터페이스

링크로 대신합니다: https://www.fusetools.com/docs/fuse/controls/grid#section-table-of-contents

Was this article helpful to you? Yes No

How can we help?