アコーディオンメニューの設定
画面にタッチすることで、隠れている内容が表示されるアコーディオンメニューを作成することができます。
レイアウトオブジェクトの表示 / 縮小を可視アニメーションで変更した後、スタックパネルによってスイッチオブジェクトの位置が自動的に調整され、オブジェクトの表示が変わります。
非表示オブジェクトを画面に表示する機能についての詳細は、以下を参照してください。
動作例
スタックパネルのスイッチをタッチすると、縮小されたレイアウトオブジェクトが表示されます。その後に並ぶオブジェクトは下方に移動します。レイアウトオブジェクトを縮小するには、もう一度スイッチをタッチします。
設定の流れ
この設定例では、「画面を複数の区画で構成したい」で作成した画面に加え、アコーディオンメニューを設定する手順を説明します。
画面を複数の区画で構成したい
変数の追加
レイアウトオブジェクトの [可視] プロパティを格納する変数を追加します。
プロジェクトエクスプローラー: [変数] → [すべての変数]
以下の変数を追加します。
変数のプロパティ
[名前] |
[データの種類] |
[初期値] |
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 |
|||
[オブジェクトの配置] |
[水平] |
右に整列 |
||