ステップ3 - 選択されたアイテムの外観を定義する¶

このステップでは、現在選択されているリストアイテムの外観を定義します。まず、現在選択されている連絡先の矢印の色を変更し、次に現在選択されている連絡先の写真の横に縦のバーを表示します。

List Box Item Container 2D で選択されたアイテムの外観を定義します。¶

このセクションでは、現在選択されているリストアイテムの外観を定義します。List Box Item Container 2D プレハブで選択矢印の色を定義します。

List Box Item Container 2D で選択されたアイテムの外観を定義するには、

Prefabs で List Box Item Container 2D プレハブを選択し、State Tools で Create State Manager をクリックします。
State Tools で Create State を2回クリックして2つのステートを作成し、各ステートの名前をダブルクリックして、ステートの名前を NotSelected と Selected に変更します。

Selected ステートは、ユーザーがリストボックス内のアイテムを選択したときのアプリケーションの状態を定義し、NotSelected ステートはそのアイテムが選択されていないときの状態を定義します。
State Tools で <No Controller Property> ドロップダウンメニューをクリックし、List Box Item Container > Selected プロパティを選択します。

ステートマネージャーでは、Controller Property として選択したプロパティの値が、ステートグループ内の各ステートがアクティブになる条件を定義します。

List Box Item Container > Selected プロパティは、リストボックスアイテムが選択されているかどうかを示します。
State Tools で、各ステートのコントローラープロパティの値を設定します。
- NotSelected ステートでは、値を False に設定したままにしてください。
- Selected ステートの値を True に設定します。
List Box Item Container 2D プレハブの Prefabs で Arrow ノードを選択し、Properties で Image プロパティを ArrowGreen 画像に設定し、State Tools で Selected ステートの下にあるをクリックして、現在の画像をそのステートに保存します。

Grid List Box 2D ノードの選択されたアイテムに緑色の矢印を表示するようにステートマネージャーを設定します。
State Tools で、Edit State Manager をクリックして State Tools を非アクティブ化します。
State Tools で Any -> Any トランジションをクリックし、State Transition Settings で Duration プロパティを0に設定し、Save をクリックします。

ステート遷移の期間を0に設定すると、Kanzi は選択されたステート間を即座に遷移します。

Preview でリストアイテムを選択すると、そのアイテムの矢印が緑色に変わります。

選択されたアイテムの外観を定義するには、アイテムテンプレートを変更します。¶

このセクションでは、現在選択されているリストアイテムの外観を定義します。現在選択されている連絡先の写真の横に縦棒を表示するように、ContactItem プレハブを修正します。

選択されたアイテムの外観を定義するには、アイテムテンプレートを変更します。

ContactItem プレハブの Prefabs 内に Empty Node 2D ノードを作成し、それに SelectionBar という名前を付け、ContactPhoto ノードと ContactName ノードの間にドラッグします。

このノードを使用して、選択した連絡先の連絡先写真の右側に縦棒を表示します。

SelectionBar ノードを ContactPhoto ノードと ContactName ノードの間に配置したいので、List Box Item Container 2D プレハブではなく、ContactItem プレハブに SelectionBar ノードを作成します。
Prefabs で SelectionBar ノードを選択し、Properties で追加して設定します。
- Background Brush から Green Brush へ
- Layout Width から5まで
Prefabs Alt を押しながら右クリックで List Box Item Container 2D プレハブを選択し、Alias を選択します。

Alias を使用して、Kanzi ノードへの一貫したアクセスを得ることができます。エイリアスを使用して、Kanzi Studio 内および Kanzi Engine API を使用してノードにアクセスすることができます。
Prefabs で SelectionBar ノードを選択し、Properties で + Add Binding をクリックし、Binding Editor で設定します。
- Property から Visible へ
- Expression へ
```
{#List Box Item Container 2D/ListBoxItemContainer.Selected}
```
  前のステップで作成したエイリアスを使用して、List Box Item Container 2D プレハブにアクセスします。
Save をクリックします。

SelectionBar ノードの Visible プロパティを List Box Item Container 2D プレハブの Selected プロパティにバインドすることにより、SelectionBar ノードは選択されたアイテムにのみ表示されます。

Preview でリストアイテムを選択すると、そのアイテムに緑色の選択バーが表示されます。

前のステップ

次の作業¶

このチュートリアルでは、Grid List Box ノードを使用して、データソースからデータを受け取るスクロール可能な連絡先リストを作成する方法を学びました。また、List Box Item Container を使用してリストアイテムの外観を設定し、ユーザーがリストで選択したアイテムの外観を変更する方法も学びました。これで、あなたは次のことができます:

データソースの定義方法を学びます。チュートリアル: データソースからアプリケーションデータを取得するを参照してください。
リストアイテムのリソースを非同期でロードする方法を学習する。チュートリアル: リソースを非同期でロードおよびデプロイするを参照してください。
他のチュートリアルを完了してください。チュートリアルを参照してください。

ステップ3 - 選択されたアイテムの外観を定義する¶

List Box Item Container 2D で選択されたアイテムの外観を定義します。¶

選択されたアイテムの外観を定義するには、アイテムテンプレートを変更します。¶

次の作業¶

関連項目¶