여러 섹션으로 화면 구성

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

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

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

도크 패널

애니메이션이란?

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

동작 예제

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

변수 추가

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

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

아래 변수를 추가합니다.

변수 속성

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

화면 추가

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

아래 화면을 추가합니다.

화면 속성

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

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

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

고정 패널 속성

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

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

아래 속성을 설정합니다.

Target01 속성

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

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

콘텐츠 추가

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

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

콘텐츠 속성

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

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

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

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

캔버스 스크롤 속성

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

레이아웃 개체/파트 설정

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

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

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

레이아웃 개체 - 캔버스(이름: Canvas1)
레이아웃 개체 - 스택 패널(이름: StackPanel1)
스위치 오브젝트(이름: Switch1)
콘텐츠 표시(이름: ContentDisplay1)

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

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

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

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

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

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

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

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

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

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

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