リストボックス (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 ノードでのキー入力フォーカスの処理¶
Kanzi Studio で作成する List Box ノードは、デフォルトで Focus Scope Type プロパティが Group に設定されています。これは、List Box ノードがフォーカススコープであり、デフォルトでキーのフォーカスとキー入力を処理することを意味します。フォーカス を参照してください。
フォーカス可能なリストアイテムと各リストアイテム内のフォーカス可能なノードをナビゲートできます。
Tab キーを押して前方に進む
BackTab キーまたは Shift Tab キーを押して逆方向に
リストアイテム内の任意のノードで Focus > Focusable プロパティを有効にすると、それらのノードをフォーカス可能にし、キー入力を受け取ることができるようにします。
これらのノードは Focusable プロパティが有効になっており、デフォルトでフォーカスを受け取ることができます。
Kanzi Engine APIまたは Kanzi Studio を使用して作成する Button、Toggle Button、Slider、および Text Box ノード。
Kanzi Studio を使用して作成する Scroll View ノード。
Kanzi はデフォルトで、List Box ノード内のアイテム選択とキーのフォーカスを同期するため、次のようになります。
アプリケーションの主要なフォーカスが List Box ノードにあり、その List Box 内のフォーカス可能なアイテムが選択されると、そのアイテムが主要なフォーカスを取得します。
仮想化されたリストアイテムはフォーカスを取得できないことに注意してください。
ヒント
アプリケーション内の任意の場所からユーザーが押したノードにキーのフォーカスを移動するには、Focus > Focus On Press プロパティを使用できます。ユーザーが押したノードにフォーカスを設定する を参照してください。
キーのフォーカスがリストアイテムに移動すると、Kanzi がそのリストアイテムを選択済みに設定します。
例えば、このビデオは、安全制御設定のリストを表示する例の Grid List Box 2D ノードを示しています。各リスト項目には、Toggle Button ノードと情報アイコンを表示する Button ノードが含まれています。キーのフォーカスがあるノードは、灰色のアウトラインで視覚化されます。その要素にフォーカスがあるときにユーザーインターフェース要素の外観を変更する方法については、ユーザーインターフェース要素にフォーカスがあることを表示する を参照してください。
ユーザーがリストを閲覧する場合:
アプリケーションの主要なフォーカスが List Box ノードにあり、ユーザーが Tab キーを押すと、Kanzi はリストアイテム内のフォーカス可能なノードを通じてフォーカスを移動します。リストアイテム内の最後のフォーカス可能なノードから、フォーカスは次のリストアイテムに移動し、Kanzi が選択済みとして設定します。
List Box ノードの Selection Behavior プロパティが Bring Center に設定されている場合、Kanzi は選択されたアイテムをリストボックスエリアの中央に持ってきます。
ユーザーがリストアイテムをクリックして選択すると、Kanzi はそのアイテム内の最初のフォーカス可能なノードにキーフォーカスを設定し、ユーザーはキー入力を通じてそのノードと対話できます。
例えば、ユーザーは Enter キーを押して Toggle Button を切り替えたり、Button を押したりすることができます。
リストボックストリガー¶
List Box トリガーを使用して、ユーザーが List Box ノードと対話したときに反応します。たとえば、ユーザーがそのノードをスクロールしたときに、List Box ノードの外観を設定できます。ユーザーが Grid List Box ノードと対話したときの反応 と ユーザーが Trajectory List Box 3D ノードと対話したときの反応 を参照してください。
関連項目¶
Trajectory List Box 3D ノードを使用する
List Box Item Container プレハブを使用する