List Box ノード¶
List Box ノードを使用して、スクロール可能なリスト内にアイテムを配置します。たとえば、List Box ノードを使用して、連絡先リスト、メディアプレーヤーのアルバムリスト、または車の設定リストを作成します。レイアウトコントロールノードはアイテムを静的なレイアウトで配置しますが、List Box ノードは、ユーザーが一度に一定数のアイテムのみを表示できるリストにアイテムを配置します。より多くのアイテムにアクセスするには、ユーザーはリストボックスをスクロールします。レイアウトコントロール (Layout control) ノード を参照してください。
格子状に配置され、スクロール可能なアイテムのリストを作成するには、Grid List Box ノードを使用します。 
|
3D空間で軌跡に沿って配置されたスクロール可能なアイテムのリストを作成するには、Trajectory List Box 3D ノードを使用します。 Trajectory List Box 3D ノードについて学ぶ > 
|
リストボックス内で現在選択されているアイテムの見た目を変更するには、List Box Item Container プレハブを使用します。 List Box Item Container プレハブについて学ぶ > 
|
表示領域のサイズを設定する¶
List Box ノード内のアイテムが表示される領域のサイズを設定するには、次のプロパティを使用します。
Grid List Box または Trajectory List Box 3D ノードの表示領域の高さを設定するための Layout Height。
Grid List Box または Trajectory List Box 3D ノードの表示領域の幅を設定するための Layout Width。
Trajectory List Box 3D ノードの表示領域の深さを設定するための Layout Depth。
アイテムを選択し、その選択動作を定義する¶
List Box ノード内でどのアイテムが選択されているか、またユーザーがアイテムを選択したときにどのように反応するかを設定できます。たとえば、選択されたアイテムをリストボックスの表示領域の中央に持ってくることができます。
リストボックス内で選択されるアイテムを設定するには、Selected Item Index プロパティを使用します。インデックスは0から始まります。
Selected Item Index プロパティの値をバインディングで更新するには、to-source または双方向バインディングを使用します。Kanzi は内部的に Selected Item Index プロパティを対象とする一方向バインディングをオーバーライドします。バインディング (Bindings) を参照してください。
例えば、List Box ノード内のアイテムをクリックするか、スライダーを使用して選択できるようにユーザーを有効にすることができます。双方向バインディングの作成 を参照してください。
ユーザーがアイテムを選択したときに、そのアイテムをリストボックスエリアの中央に持ってくるようにリストボックスを設定するには、Selection Behavior プロパティを使用します。選択したアイテムを Grid List Box の中心に持ってくる と Trajectory List Box 3D ノードを使用する を参照してください。
アイテムの数と位置へのアクセス¶
List Box ノード内のアイテムの数と位置を取得するには、次の読み取り専用プロパティを使用します。
List Box > Item Count を使用して、仮想アイテムを含むリストボックス内のアイテム数を取得します。
例えば、Item Count プロパティを使用して、ユーザーが使用できる Slider の最大値を設定します。
List Box ノードでアイテムを選択します。双方向バインディングの作成 を参照してください。
Grid List Box ノードをスクロールします。スライダーで Grid List Box ノードをスクロールする を参照してください。
List Box Item Container > Item Index を使用して、リストボックス内のアイテムの位置を取得します。インデックスは0から始まります。
例えば、Item Index プロパティを使用して、選択されたアイテムからの距離に基づいてリストボックスアイテムの外観を設定するバインディングを使用します。選択されたアイテムのインデックスを取得するには、List Box > Selected Item Index プロパティを使用します。このアプローチを使用して、選択されたアイテムから遠いアイテムのサイズと不透明度を減少させることができます。
List Box ノードのアイテムを定義する¶
リストボックスアイテムのコンテンツがどこから来るか、またそのコンテンツをどのように表示するかを定義できます。例えば、各アイテムの外観を設定するアイテムテンプレートを使用し、アイテムのデータをデータソースから取得することができます。データソースを使用する を参照してください。
List Box ノード内のアイテムにデータを提供するデータオブジェクトを設定するには、Items Source プロパティを使用します。リストデータオブジェクトの使用 を参照してください。
List Box ノードがリスト内のアイテムに使用するプレハブテンプレートを設定するには、Item Template プロパティを使用します。リストデータオブジェクトの使用 を参照してください。
リストボックス内のアイテム間で機能を共有するには、Item Container Template プロパティを使用します。Item Container Template プロパティを設定すると、リストボックス内の各アイテムは List Box Item Container プレハブから機能を継承します。例えば、Item Container Template はリストボックス内の選択されたアイテムのスケールを変更するステートマネージャーを含むことができます。この方法により、各アイテムに対して機能を設定する必要がありません。List Box Item Container プレハブを使用する を参照してください。
表示されているアイテムの周囲で、一度にいくつのアイテムをワーキングメモリにロードしたままにするかを設定するには、Keep Alive Item Count プロパティを使用します。
Keep Alive Item Count プロパティに設定する値が小さいほど、他のタスクのために作業メモリを多く解放します。これにより、リストボックスを素早くスクロールした場合、リストボックス内のアイテムの表示が遅れることがあります。
List Box ノードが使用中かどうかを制御する¶
List Box ノードが使用中かどうかを制御するには、Input > Enabled プロパティを使用します。無効化された List Box ノードはユーザー入力に反応しません。List Box ノードを無効化すると、Kanzi は進行中のジェスチャーを停止し、その List Box ノードの選択されたアイテムとスクロール位置を保持します。
ノードの Enabled プロパティを無効にすると、そのノードとその子孫ノードが同じオーバーレイフォーカススコープ内で実質的に無効になります。
ノードが効果的に有効になっているかどうかを確認するには、ステートマネージャーまたはバインディングで Input > Effectively Enabled プロパティを使用します。たとえば、ノードが使用中であるかどうかをユーザーに視覚的に示すために、ステートマネージャーを作成し、そのコントローラープロパティとして Effectively Enabled プロパティを使用します。
ノードが入力にどのように反応するかを制御する を参照してください。
List Box ノードでのキー入力フォーカスの処理¶
List Box でのキーフォーカスのナビゲーション¶
Kanzi Studio で作成する List Box ノードでは、Focus Scope Type プロパティがデフォルトで Group に設定されています。つまり、List Box ノードはフォーカススコープであり、デフォルトでキーフォーカスとキー入力を処理します。フォーカス を参照してください。
List Box アイテム内のいずれかのノードで Focus > Focusable プロパティを有効にすると、そのアイテムがフォーカス可能になり、ユーザーはキー入力でそのアイテムにナビゲートできるようになります。
これらのノードは Focusable プロパティが有効になっており、デフォルトでフォーカスを受け取ることができます。
Kanzi Engine APIまたは Kanzi Studio を使用して作成する Button、Toggle Button、Slider、および Text Box ノード。
Kanzi Studio を使用して作成する Scroll View ノード。
List Box ノードにフォーカスがあるとき、次のデフォルトのキーボードキーを使用して、フォーカス可能なリストアイテム間をナビゲートできます。
↑ と ↓：y 軸方向にスクロールする List Box 内のフォーカス可能なアイテム間でフォーカスを移動します。
→ と ←：x 軸方向にスクロールする List Box 内のフォーカス可能なアイテム間でフォーカスを移動します。
Home：最初のフォーカス可能なアイテムにフォーカスを移動します。
End：最後のフォーカス可能なアイテムにフォーカスを移動します。
Page Up と Page Down：Grid List Box ノードで、フォーカスを1ページ分後方または前方に移動します。1ページは、Grid List Box ノードの表示領域のサイズに相当します。
Kanzi は、フォーカスされたアイテムをリストボックス領域の中央に持ってきます。
各リストボックスアイテム内では、フォーカス可能なノード間を次のようにナビゲートできます。
Tab キーを押して前方に進む
BackTab キーまたは Shift Tab キーを押して後方に移動
例えば、このビデオは、安全制御設定のリストを表示する例の Grid List Box 2D ノードを示しています。各リスト項目には、Toggle Button ノードと情報アイコンを表示する Button ノードが含まれています。キーのフォーカスがあるノードは、灰色のアウトラインで視覚化されます。その要素にフォーカスがあるときにユーザーインターフェース要素の外観を変更する方法については、ユーザーインターフェース要素にフォーカスがあることを表示する を参照してください。
ユーザーがリストを閲覧する場合:
アプリケーションのキーフォーカスがリストボックス内にあるときにユーザーが ↓ キーまたは ↑ キーを押すと、フォーカスはリストアイテム間を移動します。
アプリケーションのキーフォーカスがリストアイテム内にあるときにユーザーが Tab キーを押すと、フォーカスはそのリストアイテム内のフォーカス可能なノード間を移動します。
ユーザーがリストアイテムをクリックして選択すると、そのアイテム内の最初のフォーカス可能なノードがキーフォーカスを取得し、ユーザーはキー入力でそのノードを操作できるようになります。
例えば、ユーザーは Enter キーを押して Toggle Button を切り替えたり、Button を押したりすることができます。
リストボックスのアイテム選択とキーフォーカスの同期¶
Kanzi は List Box ノード内のアイテム選択とキーフォーカスを同期し、次のように動作させます。
キーのフォーカスがリストアイテムに移動すると、Kanzi がそのリストアイテムを選択済みに設定します。
アプリケーションのキーフォーカスがリストボックスノード内にあり、そのリストボックス内のフォーカス可能なアイテムが選択されると、そのアイテムがキーフォーカスを取得します。
仮想化されたリストアイテムはフォーカスを取得できないことに注意してください。
ヒント
アプリケーション内の任意の場所からユーザーが押したノードにキーのフォーカスを移動するには、Focus > Focus On Press プロパティを使用できます。ユーザーが押したノードにフォーカスを設定する を参照してください。
リストボックストリガー¶
List Box トリガーを使用して、ユーザーが List Box ノードと対話したときに反応します。たとえば、ユーザーがそのノードをスクロールしたときに、List Box ノードの外観を設定できます。ユーザーが Grid List Box ノードと対話したときの反応 と ユーザーが Trajectory List Box 3D ノードと対話したときの反応 を参照してください。
関連項目¶
Trajectory List Box 3D ノードを使用する
List Box Item Container プレハブを使用する