List Box Item Container プレハブを使用する¶
List Box Item Container プレハブを使用して、List Box ノード内のアイテムの外観と動作を設定します。たとえば、List Box Item Container プレハブを使用して、List Box アイテムに装飾要素を追加したり、現在選択されているアイテムの外観を変更したりします。
List Box Item Container 2D プレハブを使用して、Grid List Box 2D ノード内の選択されたアイテムの外観を設定する方法をチュートリアルで学びます。チュートリアル: Grid List Box を使用して連絡先リストを作成する を参照してください。
Trajectory List Box 3D ノードで選択されたアイテムの外観を設定するために List Box Item Container 3D プレハブを使用する方法の例については、トラジェクトリリストボックスの例 (Trajectory list box example) を参照してください。
List Box Item Container プレハブの作成¶
List Box Item Container プレハブを作成するには、以下のようにします。
Prefabs で、
をクリックし、List Box Item Container 2D または List Box Item Container 3D を選択します。List Box Item Container は常にプレハブでなければなりません。ノードプレハブの使用 を参照してください。List Box Item Container 2D を Grid List Box 2D ノードと、List Box Item Container 3D を Grid List Box 3D および Trajectory List Box 3D ノードと一緒に使用します。Grid List Box ノードを使用する と Trajectory List Box 3D ノードを使用する を参照してください。
Node Tree で、List Box Item Container を使用したい List Box ノードを選択します。Properties で、List Box > Item Container Template プロパティを追加し、作成した List Box Item Container プレハブに設定します。
Item Container Template プロパティを使用すると、List Box ノード内のアイテム間で機能を共有できます。Item Container Template プロパティを設定すると、List Box ノード内の各アイテムは List Box Item Container プレハブから機能を継承します。Kanzi はデフォルトで、リストボックスアイテムを List Box Item Container プレハブの子ノードとして配置します。
List Box Item Container 2D プレハブを Grid List Box 2D ノードのセルサイズに合わせてストレッチさせるには、Horizontal Alignment と Vertical Alignment プロパティを Stretch に設定します。
List Box Item Container プレハブでは、すべての List Box アイテムに共通する機能と装飾を設定します。例えば、次のことができます。
List Box Item Container プレハブのノードツリー内でリストボックスアイテムの配置を設定します。List Box Item Container で List Box アイテムの配置を設定する を参照してください。
選択されたリストボックスアイテムの外観を設定します。List Box で選択されたアイテムの外観を設定するために List Box Item Container を使用する を参照してください。
List Box Item Container プレハブはデフォルトでフォーカスグループであり、キーのフォーカスとキー入力を処理します。これにより、Kanzi は List Box Item Container を使用する List Box ノード内でアイテムの選択とキーのフォーカスを同期できます。List Box ノードでのキー入力フォーカスの処理 を参照してください。
List Box Item Container で List Box アイテムの配置を設定する¶
List Box Item Container プレハブを List Box ノードの Item Container Template として設定すると、Kanzi はデフォルトでリストボックスアイテムを List Box Item Container プレハブの子ノードとして配置します。リストボックスアイテムのルートノードとして、List Box Item Container プレハブ内の Content Layout ノードを設定することができます。
List Box Item Container で List Box アイテムの配置を設定するには、
List Box Item Container プレハブを作成します。List Box Item Container プレハブの作成 を参照してください。
List Box Item Container プレハブで、リストボックスアイテムの外観を定義するために使用したいノードと、リストボックスアイテムのルートノードとして使用する Content Layout ノードを作成します。
Kanzi が List Box Item Container プレハブに、リストボックスアイテムのルートノードとして使用する Content Layout ノードを伝えるためのエイリアスを作成します。
Prefabs で、List Box Item Container プレハブを選択します。Dictionaries で、+ Add Resource をクリックし、Create > Alias を選択します。
この方法で、List Box Item Container 2D のリソースディクショナリにエイリアスを作成します。
エイリアス $layout に名前を付け、リストボックスアイテムのルートノードとして使用したい Content Layout ノードを指すように設定します。
この方法で、Kanzi を設定して、リストボックスアイテムを Content Layout ノードに配置します。$layout エイリアスを指定しない場合、Kanzi はリストボックスアイテムを List Box Item Container プレハブの最後の子ノードとして配置します。
List Box で選択されたアイテムの外観を設定するために List Box Item Container を使用する¶
List Box Item Container プレハブを使用して、List Box ノードで現在選択されているアイテムの外観を変更できます。たとえば、選択されたアイテムを強調表示するために、他のアイテムよりも少し大きくしたり、背景色を変更したりできます。
List Box で選択されたアイテムの外観を設定するために List Box Item Container を使用するには、
List Box Item Container プレハブを作成し、それを List Box ノードの Item Container Template として設定します。List Box Item Container プレハブの作成 を参照してください。
例：
List Box Item Container 2D プレハブを作成し、それをアドレス帳の連絡先を表示する Grid List Box 2D ノードの Item Container Template として設定します。
Prefabs で、List Box Item Container 2D プレハブを選択します。Properties で、Horizontal Alignment と Vertical Alignment プロパティを追加し、それらを Stretch に設定します。
この方法で、List Box Item Container 2D プレハブを Grid List Box 2D ノードのセルサイズに合わせてストレッチさせます。
Prefabs で、List Box Item Container プレハブを選択します。State Tools で、2つの状態を持つ State Manager を作成します。ステートマネージャー (State Managers) を使用する場合 を参照してください。
例えば、1つの状態を NotSelected、もう1つを Selected と名付けます。
Selected ステートは、リストボックス内のアイテムが選択されたときのアプリケーションの状態を定義し、NotSelected ステートはアイテムが選択されていないときの状態を定義します。
State Tools で、<No Controller Property> をクリックし、List Box Item Container > Selected プロパティを選択し、Selected ステートのコントローラープロパティの値を True に設定します。
ステートマネージャーでは、Controller Property として選択したプロパティの値が、ステートグループ内の各ステートがアクティブになる条件を定義します。
Prefabs で、List Box Item Container プレハブを選択します。Properties で、リストボックスのアイテムが選択されたときに変更したいプロパティを追加して設定します。各ステートにプロパティの異なる値を保存します。また、List Box Item Container プレハブにノードを追加し、選択されたアイテムにのみ表示されるようにすることもできます。
例えば、選択されたリストボックスアイテムの背景色を変更するには、Background Brush プロパティを追加し、選択されたリストボックスアイテムの背景を塗りつぶすために使用したいカラーブラシに設定します。State Tools で、Selected ステートの下にある
をクリックして、そのステートにプロパティ値を保存します。
State Tools で、Edit State Manager をクリックして State Tools を非アクティブ化します。
Preview で、List Box ノードのアイテムをクリックして選択すると、その外観が変わります。
List Box アイテムにダブルクリックジェスチャーを有効にする¶
List Box ノードにダブルクリックジェスチャをサポートするアイテムを追加する場合、List Box Item Container プレハブでそれらのアイテムに対してダブルクリックジェスチャを有効にする必要があります。
ノードに対してダブルクリックジェスチャーを有効にする方法を学ぶには、ノードにマルチクリックジェスチャーを有効にする を参照してください。
List Box アイテムにダブルクリックジェスチャーを有効にするには：
List Box Item Container プレハブを作成し、それを List Box ノードの Item Container Template として設定します。List Box Item Container プレハブの作成 を参照してください。
Prefabs で、List Box Item Container プレハブを選択します。Properties で、Input > Double-Click Enabled プロパティを追加して有効にします。
Double-Click Enabled プロパティを有効にすると、Kanzi は List Box Item Container プレハブにダブルクリックメッセージを生成するマルチクリックマニピュレータをインストールします。
List Box Item Container 3D プレハブをAPIで使用する¶
詳細については、ListBoxItemContainer3D クラスを参照してください。
List Box Item Container 2D プレハブをAPIで使用する¶
詳細については、ListBoxItemContainer2D クラスを参照してください。
List Box Item Container プロパティタイプ¶
List Box Item Container プレハブで利用可能なプロパティタイプのリストについては、List Box Item Container 2D と List Box Item Container 3D を参照してください。