# 아코디언 메뉴 구성

화면을 터치하면 숨겨진 콘텐츠가 표시되는 아코디언 메뉴를 만들 수 있습니다.

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

숨겨진 개체를 화면에 표시하는 기능에 관한 자세한 내용은 다음을 참조하십시오.

스택 패널

애니메이션이란?

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

## 동작 예제

스택 패널의 스위치를 터치하면 축소된 레이아웃 개체가 표시됩니다. 그러면 정렬된 개체가 아래쪽으로 이동합니다. 스위치를 다시 터치하면 레이아웃 개체가 축소됩니다.

## 워크플로우 설정

메모: 이 설정 예에서는 “화면을 여러 섹션으로 구성하기” 방법으로 만든 화면 외에 아코디언 메뉴를 설정하는 절차를 설명합니다.
화면을 여러 섹션으로 구성하기

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

## 변수 추가

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

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

아래 변수를 추가합니다.

#### 변수 속성

[이름] | [데이터 종류] | [초기 값]
Var2 | [INT] | 2
Var3 | [INT] | 2

## 콘텐츠 추가

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

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

#### 콘텐츠 속성

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

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

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

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

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

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

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

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

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

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

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

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

## 파트/레이아웃 설정

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

다음 개체를 [도구 서랍장]에서 레이아웃 개체 - 스택 패널(이름: StackPanel1)로 끌어서 놓습니다.

1. 스위치 오브젝트(이름: Switch2)
2. 레이아웃 개체 - 스택 패널(이름: StackPanel2)
3. 스위치 오브젝트(이름: Switch3)
4. 레이아웃 개체 - 스택 패널(이름: StackPanel3)

5. 스위치 개체(이름: Switch4에서 Switch7로)

메모: 스위치 개체(이름: Switch3)와 스택 패널(이름: StackPanel3)을 정렬할 때는 스택 패널(이름: StackPanel2)의 바깥쪽으로 끌어서 놓아 서로 겹치지 않게 하십시오. 스택 패널(이름: StackPanel1)을 선택한 상태에서 [도구 서랍장]에서 관련 개체를 두 번 클릭하여 겹치지 않게 정렬합니다.

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

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

탭 | 하위 탭 | 속성 | 값
[펑션] | [터치] | [동작] | [종류] | [워드]
[동작] | [XOR]
[소스] | 2
[대상] | [변수] [이름]: Var2

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

탭 | 속성 | 값
[기본] | [방향] | [수직]
[높이] | 100
[가시] | [변수] [이름]: Var2

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

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

탭 | 하위 탭 | 속성 | 값
[펑션] | [터치] | [동작] | [종류] | [워드]
[동작] | [XOR]
[소스] | 2
[대상] | [변수] [이름]: Var3

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

탭 | 속성 | 값
[기본] | [방향] | [수직]
[높이] | 100
[가시] | [변수] [이름]: Var3

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

레이아웃 개체 - 스택 패널(이름: StackPanel2) 상단의 스위치를 정렬합니다.

탭 | 하위 탭 | 속성 | 값
[펑션] | [터치] | [동작] | [종류] | [워드]
[동작] | [설정]
[소스] | 1
[대상] | [그래픽 객체] [화면/컨텐츠]: ContentDisplay1 [소스 속성]: ScreenId
[모양] | [크기/위치] | [폭] | 200
[높이] | 50
[오브젝트 배치] | [수평] | 오른쪽 맞춤

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

레이아웃 개체 - 스택 패널(이름: StackPanel2) 상단의 스위치를 정렬합니다.

탭 | 하위 탭 | 속성 | 값
[펑션] | [터치] | [동작] | [종류] | [워드]
[동작] | [설정]
[소스] | 2
[대상] | [그래픽 객체] [화면/컨텐츠]: ContentDisplay1 [소스 속성]: ScreenId
[모양] | [크기/위치] | [폭] | 200
[높이] | 50
[오브젝트 배치] | [수평] | 오른쪽 맞춤

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

레이아웃 개체 - 스택 패널(이름: StackPanel3) 상단의 스위치를 정렬합니다.

탭 | 하위 탭 | 속성 | 값
[펑션] | [터치] | [동작] | [종류] | [워드]
[동작] | [설정]
[소스] | 3
[대상] | [그래픽 객체] [화면/컨텐츠]: ContentDisplay1 [소스 속성]: ScreenId
[모양] | [크기/위치] | [폭] | 200
[높이] | 50
[오브젝트 배치] | [수평] | 오른쪽 맞춤

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

레이아웃 개체 - 스택 패널(이름: StackPanel3) 상단의 스위치를 정렬합니다.

탭 | 하위 탭 | 속성 | 값
[펑션] | [터치] | [동작] | [종류] | [워드]
[동작] | [설정]
[소스] | 4
[대상] | [그래픽 객체] [화면/컨텐츠]: ContentDisplay1 [소스 속성]: ScreenId
[모양] | [크기/위치] | [폭] | 200
[높이] | 50
[오브젝트 배치] | [수평] | 오른쪽 맞춤