[이 문서는 시험판 문서이며 변경될 수 있습니다.]
Grid 컨테이너 컨트롤을 사용하면 자식 구성 요소를 그리드 패턴으로 레이아웃할 수 있습니다. 행 및 열 측면에서 각 구성 요소가 어디로 가는지 정확하게 제어할 수 있습니다.
이 컨테이너는 CSS 스타일 그리드처럼 작동합니다. 행과 열을 정의하고 해당 속성을 사용하여 각 자식 구성 요소에 대한 정확한 위치를 설정합니다.
중요합니다
- 이 기능은 미리 보기로 제공됩니다.
- 미리 보기 기능은 프로덕션 사용을 위한 것이 아니며 제한된 기능이 있을 수 있습니다. 이러한 기능은 추가 사용 약관의 적용을 받으며, 공식 릴리스 전에 사용할 수 있으므로 고객이 조기에 액세스하고 피드백을 제공할 수 있습니다.
- 이 기능은 롤아웃 과정에 있으며 귀하의 지역에서는 아직 사용하지 못할 수도 있습니다.
Description
Grid 컨테이너 컨트롤은 캔버스 앱에 대한 유연한 레이아웃 시스템을 제공합니다. 다음과 같은 사항을 수행 가능합니다.
- 눈금 패턴에 자식 구성 요소 배치
- 각 자식에 대한 행 및 열 시작 및 끝 지정
- 컨테이너 또는 화면 크기가 변경되면 반응형 조정
- 눈금 내의 맞춤, 간격 및 오버플로 제어
이 방법을 사용하면 각 구성 요소를 수동으로 배치할 필요가 없습니다. 앱의 유지 관리 및 응답성이 높아집니다.
표시 속성
- 간격 – 그리드 내의 자식 구성 요소 사이의 간격(픽셀)입니다.
- 열 – 그리드 레이아웃의 열 수입니다.
- 행 – 그리드 레이아웃의 행 수입니다.
크기 및 위치
- X – 부모 컨테이너의 왼쪽 가장자리에서의 가로 거리(또는 부모가 없는 경우 화면)입니다.
- Y – 부모 컨테이너의 위쪽 가장자리에서 세로 거리(또는 부모가 없는 경우 화면)입니다.
- 너비 – 컨트롤의 왼쪽 가장자리와 오른쪽 가장자리 사이의 거리입니다.
- 높이 – 컨트롤의 위쪽 가장자리와 아래쪽 가장자리 사이의 거리입니다.
- 안쪽 여백 - 컨테이너 가장자리와 해당 자식 구성 요소 간의 간격입니다.
색 및 테두리
- 색 – 컨테이너의 전경색으로, 해당하는 경우 테두리 및 텍스트에 사용됩니다.
-
테두리
- 스타일 – 테두리 유형: 단색, 파선, 점선 또는 없음
- 두께 – 테두리의 너비(픽셀)입니다.
- 색 – 테두리의 색입니다.
- 테두리 반경 – 컨테이너의 모서리가 반올림되는 정도입니다. 이 설정을 모든 모서리에 균일하게 적용하거나 고급 설정의 개별 모서리로 분할할 수 있습니다.
- 그림자 - 컨테이너에 적용된 그림자 효과입니다. 옵션: 없음, 밝게, 중간 또는 무거움.
가시성
- 표시 – 그리드 컨테이너가 표시되는지 여부입니다. 켜기 또는 끄기를 전환합니다.
그리드 레이아웃 속성(자식별)
- 열 시작/열 끝 – 자식 구성 요소의 시작 및 끝 열을 정의합니다.
- 행 시작/행 끝 – 자식 구성 요소의 시작 및 끝 행을 정의합니다.
예시
반응형 레이아웃을 사용하여 빈 캔버스 앱을 처음부터 만듭니다.
새 화면을 만듭니다.
레이아웃 아래의 삽입 창에서 그리드 컨테이너를 선택합니다.
전체 화면을 차지하도록 컨테이너 속성을 설정합니다.
- X = 0
- Y = 0
- 너비 = Parent.Width
- Height = Parent.Height
단추, 텍스트 입력, 아이콘 및 미디어와 같은 여러 자식 구성 요소를 추가합니다. 각 자식에 대해 그리드 배치 속성을 설정합니다.
- 열 시작/종료
- 행 시작/종료
- 셀에 맞춤
F5 키를 눌러 미리 봅니다. 화면 크기를 조정하고 자식 구성 요소가 그리드 위치에 남아 있는 방식을 관찰하고 반응형으로 조정합니다.