아코디언 메뉴 구성
화면을 터치하면 숨겨진 콘텐츠가 표시되는 아코디언 메뉴를 만들 수 있습니다.
표시 유형 애니메이션이 있는 레이아웃 개체의 표시/축소를 변경하면 스위치 개체의 위치가 스택 패널로 자동 조정되고 개체 표시가 변경됩니다.
숨겨진 개체를 화면에 표시하는 기능에 관한 자세한 내용은 다음을 참조하십시오.
동작 예제
스택 패널의 스위치를 터치하면 축소된 레이아웃 개체가 표시됩니다. 그러면 정렬된 개체가 아래쪽으로 이동합니다. 스위치를 다시 터치하면 레이아웃 개체가 축소됩니다.
워크플로우 설정
이 설정 예에서는 “화면을 여러 섹션으로 구성하기” 방법으로 만든 화면 외에 아코디언 메뉴를 설정하는 절차를 설명합니다.
화면을 여러 섹션으로 구성하기
변수 추가
레이아웃 개체의 [가시] 속성을 저장하는 변수를 추가합니다.
프로젝트 익스플로러: [변수] → [모든 변수]
아래 변수를 추가합니다.
변수 속성
[이름] |
[데이터 종류] |
[초기 값] |
Var2 |
[INT] | 2 |
Var3 |
[INT] | 2 |
콘텐츠 추가
프로젝트 익스플로러: [화면 디자인] → [콘텐츠]
아래 콘텐츠를 추가합니다.
콘텐츠 속성
[콘텐츠 ID] |
[화면 종류] |
2 |
[캔버스 스크롤] |
3 |
[캔버스 스크롤] |
4 |
[캔버스 스크롤] |
콘텐츠 색을 설정하려면 문서 보기에서 그리기 영역을 클릭하고 속성 창에서 설정합니다.
색을 ID로 지정할 때 표시되는 색은 [도구 서랍장]의 [색상 그룹]에 따라 달라집니다.
색상 그룹
프로젝트 탐색기: [화면 디자인] → [콘텐츠] → [Content2]
캔버스 스크롤 속성
탭 |
속성 |
값 |
||
[기본] |
[채우기] | [색] | [값] | ID: 26 |
프로젝트 탐색기: [화면 디자인] → [콘텐츠] → [Content3]
캔버스 스크롤 속성
탭 |
속성 |
값 |
||
[기본] |
[채우기] | [색] | [값] | ID: 27 |
프로젝트 탐색기: [화면 디자인] → [콘텐츠] → [Content4]
캔버스 스크롤 속성
탭 |
속성 |
값 |
||
[기본] |
[채우기] | [색] | [값] | ID: 28 |
파트/레이아웃 설정
프로젝트 탐색기: [화면 디자인] → [화면] → [Screen2]
다음 개체를 [도구 서랍장]에서 레이아웃 개체 - 스택 패널(이름: StackPanel1)로 끌어서 놓습니다.
- 스위치 오브젝트(이름: Switch2)
- 레이아웃 개체 - 스택 패널(이름: StackPanel2)
- 스위치 오브젝트(이름: Switch3)
- 레이아웃 개체 - 스택 패널(이름: StackPanel3)
스위치 개체(이름: 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 |
|||
[오브젝트 배치] |
[수평] |
오른쪽 맞춤 |
||