# 여러 섹션으로 화면 구성

조정 가능한 창이 여러 개이고 애플리케이션 사용자 인터페이스와 유사한 화면을 생성할 수 있습니다.

표시 유형 애니메이션이 있는 레이아웃 개체의 표시/축소를 전환하면 콘텐츠 표시 개체와 스위치 개체의 크기와 위치가 고정 패널로 자동 조정되고 창 표시가 변경됩니다.

여러 개의 창으로 구성된 화면의 구성에 사용되는 기능에 관한 자세한 내용은 다음을 참조하십시오.

도크 패널

애니메이션이란?

가시성 애니메이션이 설정된 경우의 작업

## 동작 예제

고정 패널의 스위치를 터치하여 레이아웃 개체(왼쪽 창)를 축소합니다. 그러면 정렬된 콘텐츠 표시 개체(기본 창)가 확장되어 해당 공간을 채웁니다. 스위치를 다시 터치하면 레이아웃 개체가 표시됩니다.

## 설정 워크플로우

1. 변수 추가
2. 화면 추가
3. 콘텐츠 추가
4. 레이아웃 개체/파트 설정

## 변수 추가

레이아웃 개체의 [가시] 속성을 저장하는 변수를 추가합니다.

### 프로젝트 익스플로러: [변수] → [모든 변수]

아래 변수를 추가합니다.

#### 변수 속성

[이름] | [데이터 종류]
Var1 | [INT]

## 화면 추가

### 프로젝트 익스플로러: [화면 디자인] → [화면]

아래 화면을 추가합니다.

#### 화면 속성

[화면 ID] | [화면 종류]
2 | [도크 패널]

### 프로젝트 탐색기: [화면 디자인] → [화면] → [Screen2]

색 같은 화면 설정을 정의하려면 문서 보기에서 그리기 영역을 클릭하고 속성 창에서 설정을 정의합니다.

#### 고정 패널 속성

탭 | 속성 | 값
[기본] | [채우기] | [색] | [값] | ID: 14

### 프로젝트 익스플로러: [시스템 아키텍처] → [Target01]

아래 속성을 설정합니다.

#### Target01 속성

탭 | Sub | 속성 | 값
[펑션] | [기본] | [기본 설정] | [초기 화면 ID] | 2

메모: 이 속성은 이 설정 예에서 구성된 화면(화면 ID: 2)이 런타임 시작 후 가장 먼저 표시되도록 설정합니다.

## 콘텐츠 추가

### 프로젝트 익스플로러: [화면 디자인]→ [콘텐츠]

아래 콘텐츠를 추가합니다.

#### 콘텐츠 속성

[콘텐츠 ID] | [화면 종류]
1 | [캔버스 스크롤]

### 프로젝트 탐색기: [화면 디자인] → [콘텐츠] → [Content1]

콘텐츠 같은 화면 설정을 정의하려면 문서 보기에서 그리기 영역을 클릭하고 속성 창에서 설정을 정의합니다.

메모: 색을 ID로 지정할 때 표시되는 색은 [도구 서랍장]의 [색상 그룹]에 따라 달라집니다.
색상 그룹

#### 캔버스 스크롤 속성

탭 | 속성 | 값
[기본] | [채우기] | [색] | [값] | ID: 25

## 레이아웃 개체/파트 설정

### 프로젝트 탐색기: [화면 디자인] → [화면] → [Screen2]

다음 오브젝트를 [도구 서랍장]에서 화면으로 드래그 & 드롭합니다.

메모: 개체 정렬 순서는 [객체 리스트]으로 변경할 수 있습니다.

1. 레이아웃 개체 - 캔버스(이름: Canvas1)
2. 레이아웃 개체 - 스택 패널(이름: StackPanel1)
3. 스위치 오브젝트(이름: Switch1)

4. 콘텐츠 표시(이름: ContentDisplay1)

메모: 개체를 정렬할 때는 개체를 레이아웃 개체의 바깥쪽이나 화면 영역 바깥쪽으로 끌어서 놓아 서로 겹치지 않게 하십시오. 화면에 선택된 개체가 없는 경우 [도구 서랍장]에서 해당 개체를 두 번 클릭해서도 겹치지 않게 정렬할 수 있음을 참고하십시오.

#### 레이아웃 개체 - 캔버스(이름: Canvas1) 속성

탭 | 속성 | 값
[기본] | [경로] | [고정] | [위]
[높이] | 80
[채우기] | [색] | [값] | ID: 14

#### 레이아웃 개체 - 스택 패널(이름: StackPanel1) 속성

탭 | 속성 | 값
[기본] | [방향] | [수직]
[경로] | [고정] | [왼쪽]
[폭] | 250
[채우기] | [색] | [값] | ID: 11
[가시] | [변수] [이름]: Var1

메모: 아코디언 메뉴를 스택 패널에 설치하십시오. 아코디언 메뉴에 관한 자세한 내용은 다음을 참조하십시오.
아코디언 메뉴 구성

#### 스위치 오브젝트(이름: Switch1) 속성

이 스위치로 창 표시가 변경됩니다. 스위치를 터치하면 레이아웃 개체 - 스택 패널(이름: StackPanel1)의 [가시] 속성이 0(표시) 또는 2(축소)로 변경됩니다.

탭 | 하위 탭 | 속성 | 값 | 탭
[펑션] | [터치] | [동작] | [종류] | [워드]
[동작] | [XOR]
[소스] | 2
[대상] | [변수] [이름]: Var1
[모양] | [크기/위치] | [경로] | [고정] | [왼쪽]
[폭] | 25
[높이] | 50

#### 콘텐츠 표시(이름: ContentDisplay1) 속성

탭 | 하위 탭 | 속성 | 값
[펑션] | [기본] | [콘텐츠 ID] | 1