画面を複数の区画で構成したい

複数の伸縮可能な区画 (ペイン) で構成されたアプリケーションのユーザーインターフェイスのような画面が作成できます。

レイアウトオブジェクトの表示 / 縮小を可視アニメーションで切り替えた後、コンテンツ表示器オブジェクトとスイッチオブジェクトのサイズと位置がドックパネルによって自動的に調整され、ペインの表示が変わります。

複数のペインで構成される画面を設定するための機能についての詳細は、以下を参照してください。

動作例

ドックパネルのスイッチをタッチすると、レイアウトオブジェクト (左ペイン) が縮小され、その後に並ぶコンテンツ表示器オブジェクト (メインペイン) がそのスペースを埋めるように展開されます。レイアウトオブジェクトを表示するには、もう一度スイッチをタッチします。

変数の追加

レイアウトオブジェクトの [可視] プロパティを格納する変数を追加します。

プロジェクトエクスプローラー: [変数] → [すべての変数]

以下の変数を追加します。

変数のプロパティ

[名前]	[データの種類]
Var1	[INT]

画面の追加

プロジェクトエクスプローラー: [作画] → [画面]

以下の画面を追加します。

画面のプロパティ

[画面 ID]	[画面の種類]
2	[ドックパネル]

プロジェクトエクスプローラー: [作画] → [画面] → [Screen2]

画面の色などを設定するには、ドキュメントビューで描画領域上をクリックし、プロパティウィンドウで設定します。

ドックパネルのプロパティ

タブ	プロパティ			値
[基本]	[塗り込み]	[色]	[値]	ID: 14

プロジェクトエクスプローラー : [システム設定] → [Target01]

以下のプロパティを設定します。

Target01 のプロパティ

タブ	Sub	プロパティ		値
[機能]	[基本]	[プリファレンス]	[初期画面 ID]	2

MEMO: このプロパティは、この設定例で設定した画面 (画面 ID: 2) をランタイム起動後最初に表示するように設定しています。

コンテンツの追加

プロジェクトエクスプローラー: [作画] → [コンテンツ]

以下のコンテンツを追加します。

コンテンツのプロパティ

[コンテンツ ID]	[画面の種類]
1	[スクロールキャンバス]

プロジェクトエクスプローラー: [作画] → [コンテンツ] → [Content1]

コンテンツの色などを設定するには、ドキュメントビューで描画領域上をクリックし、プロパティウィンドウで設定します。

MEMO: ID で色を指定する場合、[ツールチェスト] の [配色] によって表示される色が異なります。
配色

スクロールキャンバスのプロパティ

タブ	プロパティ			値
[基本]	[塗り込み]	[色]	[値]	ID: 25

レイアウトオブジェクト / 部品の設定

プロジェクトエクスプローラー: [作画] → [画面] → [Screen2]

以下のオブジェクトを [ツールチェスト] から画面にドラッグアンドドロップします。

MEMO: オブジェクトの並び順は、[オブジェクト一覧] で変更できます。

レイアウトオブジェクト - キャンバス (名前: Canvas1)
レイアウトオブジェクト - スタックパネル (名前: StackPanel1)
スイッチオブジェクト (名前: Switch1)
コンテンツ表示器 (名前: ContentDisplay1)

MEMO: オブジェクトを配置する場合、重ならないようにレイアウトオブジェクトまたは画面領域の外側にドラッグアンドドロップしてください。なお、画面上のオブジェクトが選択されていない場合、[ツールチェスト] 内の該当オブジェクトをダブルクリックすることで、重ならないように配置できます。

レイアウトオブジェクト - キャンバス (名前: Canvas1) プロパティ

タブ	プロパティ			値
[基本]	[位置]	[固定]		[上]
	[高さ]			80
	[塗り込み]	[色]	[値]	ID: 14

レイアウトオブジェクト - スタックパネル (名前: StackPanel1) プロパティ

タブ	プロパティ			値
[基本]	[方向]			[垂直]
	[位置]	[固定]		[左]
	[幅]			250
	[塗り込み]	[色]	[値]	ID: 11
	[可視]			[変数] [名前]: Var1

MEMO: アコーディオンメニューはスタックパネルに配置してください。アコーディオンメニューについての詳細は、以下を参照してください。
アコーディオンメニューの設定

スイッチオブジェクト (名前: Switch1) プロパティ

このスイッチはペインの表示を変更します。スイッチをタッチすると、レイアウトオブジェクトの [可視] プロパティ - スタックパネル (名前：StackPanel1) が 0 (表示) または 2 (縮小) に変更されます。

タブ	サブタブ	プロパティ	値	タブ
[機能]	[タッチ]	[オペレーション]	[種類]	[ワード]
			[オペレーション]	[XOR]
			[ソース]	2
			[設定先]	[変数] [名前]: Var1
[図形]	[サイズ / 位置]	[位置]	[固定]	[左]
		[幅]		25
		[高さ]		50

コンテンツ表示器 (名前: ContentDisplay1) プロパティ

タブ	サブタブ	プロパティ	値
[機能]	[基本]	[コンテンツ ID]	1