フォーカスの使用¶
キーのフォーカスは、ハードウェアキーのメッセージをアプリケーション内の正しいユーザーインターフェース要素に転送します。例えば、ユーザーはキーボードの矢印キーを押してスライダーを動かしたり、Enter キーを押してボタンをクリックしたりできます。
アプリケーション内のどのユーザーインターフェース要素がフォーカスを受け取ることができるかを設定し、Kanzi がフォーカスを移動するために使用するデフォルトのキーを使用するか、特定のキーを設定することができます。
Kanzi は、フォーカスチェーンにすべてのフォーカススコープノードと、Focusable プロパティを有効にしたノードを含めます。
Kanzi Studio で作成する List Box ノードと List Box Item Container プレハブは、デフォルトでフォーカススコープです。
これらのノードでは、Focusable プロパティはデフォルトで有効になっています。
Button
Toggle Button
Slider
Text Box
Kanzi Studio で作成する Scroll View ノード
Kanzi アプリケーションでフォーカスを処理するには、次のことができます。
特定のユーザーインターフェース要素にフォーカスを設定します。フォーカスを設定する を参照してください。
ユーザーインターフェース要素がフォーカスを受け取る順序を設定します。フォーカスチェイン内でフォーカスを移動する を参照してください。
ユーザーインターフェース要素内でフォーカスを移動します。ノードのグループ内でフォーカスを移動する を参照してください。
オーバーレイがユーザー入力にどのように反応するかを設定します。オーバーレイを作成する を参照してください。
ユーザーインターフェース要素にフォーカスがあるとき、その要素の外観を変更します。ユーザーインターフェース要素にフォーカスがあることを表示する を参照してください。
アプリケーションのキーボードナビゲーションを定義します。特定のキーを設定してフォーカスを移動する を参照してください。
チュートリアルを完了してフォーカスの使用方法を学びましょう。チュートリアル: アプリケーションのUIナビゲーションを作成する を参照してください。
フォーカスを設定する¶
ノードにフォーカスを設定することで、そのノードが表すユーザーインターフェース要素とユーザーがキーを使って対話できるようにします。
Try Set Focus アクションでフォーカスを設定する¶
Try Set Focus アクションでフォーカスを設定するには:
フォーカスを設定したいノードを選択し、Properties で Focus > Focusable プロパティを追加して有効にします。
これらのノードは Focusable プロパティが有効になっており、デフォルトでフォーカスを受け取ることができます。
Kanzi Engine APIまたは Kanzi Studio を使用して作成する Button、Toggle Button、Slider、および Text Box ノード。
Kanzi Studio を使用して作成する Scroll View ノード。
フォーカスを設定するために使用したいノードを選択し、Node Components でフォーカスを設定するアクションを開始するためのトリガーを作成します。
例えば、Button ノードで Button: Click トリガーを使用します。
トリガー内で、Try Set Focus アクションを作成します。
例えば、Button: Click トリガーで Try Set Focus アクションを作成することにより、ユーザーが Button ノードをクリックしたときにアプリケーションがノードにフォーカスを設定するようにします。
Try Set Focus アクションで、フォーカスを設定したいノードに Target Item を設定します。
ヒント
エイリアスは、フォーカスを設定したいノードを設定するための便利な方法を提供します。エイリアスの使用 を参照してください。
ユーザーが押したノードにフォーカスを設定する¶
ユーザーが押したノードにフォーカスを設定するには:
フォーカスを設定したいノードが、フォーカスと押下を受け取れることを確認してください。
ノードを選択し、Properties で追加して有効にします。
Focus > Focusable
これらのノードは Focusable プロパティが有効になっており、デフォルトでフォーカスを受け取ることができます。
Kanzi Engine APIまたは Kanzi Studio を使用して作成する Button、Toggle Button、Slider、および Text Box ノード。
Kanzi Studio を使用して作成する Scroll View ノード。
Input > Hit Testable
ノードのヒットテストを有効にすることで、ノードが押下を受け取ることができます。
デフォルトで、ヒットテストは Button、Toggle Button、List Box Item Container、Scroll View、Slider、および Text Box ノードに対して有効になっています。
Properties に Focus On Press プロパティを追加し、次のように設定します:
Node はノードにフォーカスを設定しようとし、それが失敗した場合は何もしないようにします。
Node or ancestor はノードにフォーカスを設定しようとし、それが失敗した場合は、ノードの最も近いフォーカス可能な先祖にフォーカスを設定します。
Node or overlay はノードにフォーカスを設定しようとし、それが失敗した場合は、ノードを含むオーバーレイスコープにフォーカスを設定します。オーバーレイスコープノードは、その設定に従ってフォーカスを転送します。
すべての Kanzi アプリケーションには、少なくとも1つのオーバーレイスコープである Screen ノードが含まれています。
ヒント
ノードは、親から Focus On Press プロパティの値を継承します。例えば、アプリケーション画面内のすべてのインタラクティブノードが押下時にフォーカスを受け取るように設定するには、そのアプリケーション画面のルートノードに Focus On Press プロパティを設定するだけで十分です。
Preview で、Focus On Press プロパティを設定したノードをクリックします。たとえば、プレハブでプロパティを設定した場合、そのプレハブを複数回インスタンス化し、インスタンスをクリックします。
ヒント
ユーザーインターフェース要素にフォーカスがあるとき、その要素の外観を変更するには、ステートマネージャーまたはバインディングを使用します。ユーザーインターフェース要素にフォーカスがあることを表示する を参照してください。
フォーカスチェイン内でフォーカスを移動する¶
フォーカスチェーンは、Kanzi がそれらのノードにフォーカスを設定する順序を定義するノードのシーケンスです。Kanzi は、Focusable プロパティが有効になっているプロジェクト内のすべてのノードをフォーカスチェーンに含めます。
これらのノードは Focusable プロパティが有効になっており、デフォルトでフォーカスを受け取ることができます。
Kanzi Engine APIまたは Kanzi Studio を使用して作成する Button、Toggle Button、Slider、および Text Box ノード。
Kanzi Studio を使用して作成する Scroll View ノード。
デフォルトで、フォーカスチェーンはノードツリー内のノードの順序に基づいて各ノードからフォーカスを移動します。
ユーザーが Tab キーを押して前方向にナビゲートする際に、フォーカススコープ内の次のフォーカス可能なノードへ移動します。
ユーザーが BackTab キーまたは Shift Tab キーを押して後方にナビゲートする際、フォーカススコープ内の前のフォーカス可能なノードに移動します。
フォーカスチェインがフォーカスを移動する方法を制御するには、各フォーカス可能なノードに対してフォーカスチェイン内のノードの位置を設定できます。
フォーカスチェーン内のノードの順序を設定する¶
フォーカスチェーン内のノードの順序を手動で設定するには、Node Tree でフォーカスチェーン内の位置を設定したい各ノードを選択し、Properties で Focus Order プロパティを追加して設定します。
ノード間のフォーカスを Focus Order プロパティ値に基づいて移動するように設定します。
ユーザーが前方向にナビゲートする際の昇順で。
例えば、Focus Order プロパティが1に設定されているノードがフォーカスを持っているときに、ユーザーが Tab キーを押すと、フォーカスは Focus Order プロパティが2に設定されているノードに移動します。
ユーザーが逆方向にナビゲートする際の降順で。
ノードのグループ内でフォーカスを移動する¶
ユーザーインターフェース要素を形成するノード間のナビゲーションを処理するために、フォーカスグループを使用します。
ノードをフォーカスグループに設定して、そのノードから子ノードにフォーカスを転送することができます。フォーカスをフォーカスグループに設定すると、Kanzi はそのグループ内のフォーカス可能な子ノードのうち、最小の Focus Order プロパティ値を持つか、ノードツリーで最初に配置されているノードにフォーカスを転送します。フォーカスグループノードからフォーカスを移動すると、そのフォーカスグループは最後にフォーカスされたノードを記憶します。このようにして、そのフォーカスグループが再びフォーカスを受け取ると、Kanzi は最後にフォーカスされたノードにフォーカスを設定します。
フォーカスグループを設定するには:
Node Tree でフォーカスグループとして設定したいノードを選択し、Properties で Focus Scope > Focus Scope Type プロパティを追加し、Group に設定します。
フォーカスグループノードにフォーカスを設定すると、そのフォーカスグループはフォーカスを最初のフォーカス可能な子ノードに転送します。例えば、Toggle Button Group ノードをフォーカスグループとして設定した場合、デフォルトでその Toggle Button Group 内の最初の Toggle Button ノードがフォーカスを受け取ります。Tab と BackTab または Shift Tab キーボードキーを使用して、Toggle Button ノード間でフォーカスを移動することができます。
Kanzi Studio で作成する List Box ノードは、フォーカススコープであり、デフォルトでキーのフォーカスとキー入力を処理します。各リストアイテム内のフォーカス可能なリストアイテムとフォーカス可能なノードをナビゲートできます。
Tab キーを押して前方に進む
BackTab キーまたは Shift Tab キーを押して逆方向に
これらのノードは Focusable プロパティが有効になっており、デフォルトでフォーカスを受け取ることができます。
Kanzi Engine APIまたは Kanzi Studio を使用して作成する Button、Toggle Button、Slider、および Text Box ノード。
Kanzi Studio を使用して作成する Scroll View ノード。
ヒント
ユーザーインターフェース要素にフォーカスがあるとき、その要素の外観を変更するには、ステートマネージャーまたはバインディングを使用します。ユーザーインターフェース要素にフォーカスがあることを表示する を参照してください。
（オプション） フォーカスグループ内でフォーカスを循環的に移動させるには、Properties に Focus Scope > Cyclic Focus Navigation プロパティを追加して有効にします。
Cyclic Focus Navigation プロパティを有効にすると、
ユーザーが Tab キーを押して前方に移動し、フォーカスがフォーカスグループの最後のフォーカス可能なノードに到達すると、フォーカスは最初のフォーカス可能なノードに戻ります。
ユーザーが BackTab または Shift Tab キーを押して後方に移動すると、フォーカスがフォーカスグループの最初のフォーカス可能なノードに到達した場合、フォーカスは最後のフォーカス可能なノードに戻ります。
（オプション） フォーカスグループ内で最初にフォーカスを取得するノードを手動で設定するには、Node Tree でフォーカススコープノードの子ノードを選択し、フォーカスを設定したいノードを選びます。次に、Properties で Focus > Focus Order プロパティを追加し、それを1に設定します。
フォーカスが初めてフォーカスグループノードに移動すると、Focus Order プロパティ値が最小の子ノードがフォーカスを受け取ります。フォーカスグループノードに同じ最小の Focus Order プロパティ値を持つ複数の子ノードがある場合、Kanzi はフォーカススコープのノードツリー内の最初の子ノードにフォーカスを設定します。
フォーカスがフォーカスグループから外れると、フォーカスグループは最後にフォーカスされたノードを記憶します。そのフォーカスグループが再びフォーカスを受け取ると、Kanzi は最後にフォーカスされたノードにフォーカスを設定します。これは、Focus Order プロパティ値が最小のノードではありません。
オーバーレイを作成する¶
アプリケーションの他の部分の上に開くオーバーレイを作成できます。たとえば、ダイアログボックス、通知、およびメニューをオーバーレイとして作成できます。
アクティビティを使用してオーバーレイを作成する¶
Kanzi でオーバーレイを作成する最も便利な方法は、Activity を使用することです。Kanzi は、アクティビティのステータスに基づいて、オーバーレイのキーおよびタッチ入力を自動的に処理します。
アクティビティをアクティブにすると、オーバーレイが開いてフォーカスが当たります。
アクティビティを非アクティブ化すると、オーバーレイが閉じてフォーカスを失います。
アクティビティ を参照してください。
アクティビティを使用してオーバーレイを作成するには:
Parallel Activity Host 内で、オーバーレイとして表示したい Activity を作成します。
たとえば、設定項目のサブメニューを表示するアクティビティを作成します。
ヒント
ユーザーインターフェース要素にフォーカスがあるとき、その要素の外観を変更するには、ステートマネージャーまたはバインディングを使用します。ユーザーインターフェース要素にフォーカスがあることを表示する を参照してください。
Prefabs でオーバーレイとして表示したい Activity プレハブを選択し、Properties で Focus Scope > Focus Scope Type プロパティを追加し、次のように設定します:
Modal は、オーバーレイの外部からの入力をブロックするオーバーレイを作成します。
たとえば、このオーバーレイタイプを使用して、ユーザーがメインのアプリケーション画面に戻る前に操作する必要があるダイアログを作成します。
Modeless は、オーバーレイの外部から来る入力を伝播するオーバーレイを作成します。
例えば、このオーバーレイタイプを使用して、ポップアップを作成し、ポップアップが表示されている間にユーザーがアプリケーションの他の部分と対話できるようにします。
Auto-Closing Modal を作成して、オーバーレイの外側をタッチ入力することで閉じるようにします。
例えば、このオーバーレイタイプを使用して、ユーザーがその通知の外側のアプリケーション画面をタップしたときに閉じる通知を作成します。
Auto-Closing Modeless は、オーバーレイの外側でのタッチ入力で閉じ、入力を伝播するオーバーレイを作成します。
例えば、このオーバーレイタイプを使用して、ユーザーが外側をタップしたときに閉じるメニューを作成します。ユーザーがインタラクティブな要素に触れてメニューを閉じた場合、その要素がタッチを受け取ります。
オーバーレイを開くには、Activity をアクティブにします。アクティビティのアクティベーション を参照してください。
オーバーレイとして設定したアクティビティをアクティブにすると、Kanzi がそのアクティビティにフォーカスを設定します。
例えば、ユーザーがボタンを押したときにオーバーレイを開くには、Prefabs で Button ノードを選択し、Button: Click トリガーで Activity Host: Activate Activity アクションを作成し、そのアクションで次を設定します。
Activity をアクティブにしたい Activity Host を含む Target Item へ。
Activity Host から Activity までのパスを Activation Path にアクティブ化します。
Activity ノードを他のタイプのノードにネストする場合、パスには祖先の Activity ノードのみを含めます。
オーバーレイを閉じるには、Activity を非アクティブにします。
オーバーレイとして設定したアクティビティを非アクティブ化すると、Kanzi はそのアクティビティからフォーカスを外し、非アクティブ化したオーバーレイの下にあるオーバーレイフォーカススコープにフォーカスを戻します。
Focus Scope Type プロパティを Auto-Closing Modal または Auto-Closing Modeless に設定すると、ユーザーはオーバーレイの外側をクリックすることでもオーバーレイを閉じることができます。
例えば、ユーザーが特定のキーを押したときにオーバーレイを閉じるには、
Prefabs で、オーバーレイとして設定した Activity を選択し、Node Components > Input Manipulators で Key Manipulator を作成し、オーバーレイを閉じるために使用したいキーボードキーに Logical Key プロパティを設定します。
例えば、ユーザーが Escape キーを押したときにオーバーレイを閉じるには、Logical Key プロパティを Escape に設定します。
ヒント
アプリケーション内で異なる方向にナビゲートするためにユーザーが使用できるキーを設定するには、Navigation Manipulator を使用します。Navigation Manipulator を使用する を参照してください。
Node Components > Triggers で Key Input: Key Pressed トリガーを Activity Host: Deactivate Activity アクションで作成し、そのアクションで設定します:
Activity を非アクティブ化したい Activity Host を含む Target Item へ。
Activity Host から Activity までのパスで、非アクティブ化したい Activation Path を選択します。
（オプション） Activityの Focus Scope Type プロパティを Auto-Closing Modal または Auto-Closing Modeless に設定する場合は、Activityまたはそのコンテンツに対してヒットテストが有効になっていることを確認してください。これにより、Kanzi がタッチ入力がオーバーレイActivityエリアから来ているのか、オーバーレイの外から来ているのかを検出し、入力がオーバーレイの外から来た場合にオーバーレイを閉じることができます。
オーバーレイのヒットテストを有効にするには、Prefabs でオーバーレイとして設定した Activity を選択し、Properties で Input > Hit Testable プロパティを追加して有効にします。
（オプション） オーバーレイが再び開かれるときに最初のフォーカス可能なノードにフォーカスを設定するには、Prefabs でオーバーレイとして設定した Activity を選択し、Properties で Activity > Save Last Focused Node プロパティを無効にします。
デフォルトで、Kanzi はアクティビティ内で最後にフォーカスされたノードを記憶し、そのアクティビティを再度アクティブにしたときにそのノードにフォーカスを設定します。
Preview で、次のことができるようになりました。
そのオーバーレイを開くためのコントロールとして設定したボタンがフォーカスされているときに、キーボードの Enter キーを押すと、オーバーレイが開きます。
オーバーレイを閉じるには、キーボードの Escape キーを押してください。
Focus Scope Type プロパティを Auto-Closing Modal または Auto-Closing Modeless に設定すると、オーバーレイの外側をクリックすることでオーバーレイを閉じることができます。自動で閉じるモードレスオーバーレイを、そのオーバーレイの外側にあるインタラクティブなユーザーインターフェース要素をクリックして閉じると、Kanzi はそのクリックをクリックした要素に伝播します。
任意のノードを使用してオーバーレイを作成する¶
Kanzi でオーバーレイを作成する最も便利な方法は、Activity を使用することです。アクティビティを使用してオーバーレイを作成する を参照してください。
このセクションでは、アクティビティではないノードを使用してオーバーレイを作成する方法を示します。これには、オーバーレイを表示および非表示にするためのトリガーとアクションを作成する必要があります。
任意のノードを使用してオーバーレイを作成するには:
Node Tree で、オーバーレイとして表示したいノードを作成し、コンテンツを追加します。
たとえば、設定項目のサブメニューを表示するノードを作成します。
ヒント
ユーザーインターフェース要素にフォーカスがあるとき、その要素の外観を変更するには、ステートマネージャーまたはバインディングを使用します。ユーザーインターフェース要素にフォーカスがあることを表示する を参照してください。
Node Tree でオーバーレイとして表示したいノードを選択し、Properties で Focus Scope > Focus Scope Type プロパティを追加し、次のように設定します。
Modal は、オーバーレイの外部からの入力をブロックするオーバーレイを作成します。
たとえば、このオーバーレイタイプを使用して、ユーザーがメインのアプリケーション画面に戻る前に操作する必要があるダイアログを作成します。
Modeless は、オーバーレイの外部から来る入力を伝播するオーバーレイを作成します。
例えば、このオーバーレイタイプを使用して、ポップアップを作成し、ポップアップが表示されている間にユーザーがアプリケーションの他の部分と対話できるようにします。
Auto-Closing Modal を作成して、オーバーレイの外側をタッチ入力することで閉じるようにします。
例えば、このオーバーレイタイプを使用して、ユーザーがその通知の外側のアプリケーション画面をタップしたときに閉じる通知を作成します。
Auto-Closing Modeless は、オーバーレイの外側でのタッチ入力で閉じ、入力を伝播するオーバーレイを作成します。
例えば、このオーバーレイタイプを使用して、ユーザーが外側をタップしたときに閉じるメニューを作成します。ユーザーがインタラクティブな要素に触れてメニューを閉じた場合、その要素がタッチを受け取ります。
Properties で、Node > Visible プロパティを追加して無効にします。
このようにして、アプリケーションが開始するときにオーバーレイを非表示にします。
ノードをオーバレイフォーカススコープに設定し、そのノードが表示されていない場合、フォーカスと入力処理はそのノードを無視します。
オーバーレイを開くためのコントロールを作成します。
Node Tree で、オーバーレイを開くためのコントロールとして使用したいノードを選択し、Node Components でオーバーレイを表示する Set Property アクションを持つトリガーを使用します。
オーバーレイを表示可能にすると、Kanzi が Overlay Brought To Front トリガーを発動し、そのオーバーレイにフォーカスを設定します。
例えば、Button ノードを選択し、Button: Click トリガーで Set Property アクションを作成し、そのアクションで次を設定します。
Target Item をオーバーレイノードに
Target Property から Visible (Node.Visible) へ
Value From から Fixed value へ
Fixed Value を有効にする
オーバーレイを閉じるためのコントロールを作成します。
Node Tree で、オーバーレイを閉じるためのコントロールとして使用したいノードを選択し、Node Components でオーバーレイを不可視にする Set Property アクションを持つトリガーを使用します。
オーバーレイを非表示にすると、Kanzi が Overlay Sent To Back トリガーを発動し、オーバーレイを表示する前にフォーカスがあったノードにフォーカスを設定します。
例：
Node Components > Input Manipulators でオーバーレイノードを選択し、Key Manipulator を作成して、オーバーレイを閉じるために使用するキーボードキーに Logical Key プロパティを設定します。
例えば、ユーザーが Escape キーを押したときにオーバーレイを閉じるには、Logical Key プロパティを Escape に設定します。
Node Components > Triggers で Key Input: Key Pressed トリガーを作成し、Set Property アクションを設定し、そのアクションで次を設定します。
Target Item をオーバーレイノードに
Target Property から Visible (Node.Visible) へ
Value From から Fixed value へ
Fixed Value を無効にする
（オプション） オーバーレイが開いたときに、そのオーバーレイ内の特定のノードにフォーカスを設定します。
デフォルトで、Kanzi はオーバーレイ内で最後にフォーカスされたノードを記憶し、オーバーレイが再び開かれたときにそのノードにフォーカスを設定します。
オーバーレイ内の特定のノードに常にフォーカスを設定するには:
Node Tree でオーバーレイノードを選択し、Node Components で Focus: Overlay Brought To Front トリガーを作成します。
Focus: Overlay Brought To Front トリガーで Try Set Focus アクションを作成し、Target Item をオーバーレイが開いたときにフォーカスを設定したいノードに設定します。
例えば、Target Item をオーバーレイ内の最初のフォーカス可能なノードに設定します。
（オプション） オーバーレイノードの Focus Scope Type プロパティを Auto-Closing Modal または Auto-Closing Modeless に設定する場合、オーバーレイをオーバーレイの外側でのタッチ入力で閉じるように設定します。
Node Tree でオーバーレイノードを選択し、Properties で Input > Hit Testable プロパティを追加して有効にします。
この方法で、Kanzi がタッチ入力がオーバーレイノード領域から来ているのか、オーバーレイの外から来ているのかを検出できるようにします。
Node Components > Triggers で Focus: Input Outside Overlay トリガーを作成します。
Kanzi は、ユーザーがオーバーレイノードの外側のアプリケーションエリアをタップしたときに Focus: Input Outside Overlay トリガーを発動します。
Focus: Input Outside Overlay トリガーで Set Property アクションを作成し、次を設定します。
Target Property から Visible (Node.Visible) へ
Value From から Fixed value へ
Fixed Value を無効にする
この方法で、ユーザーが外側をタップしたときにオーバーレイノードを非表示にします。
Preview で、次のことができるようになりました。
そのオーバーレイを開くためのコントロールとして設定したボタンがフォーカスされているときに、キーボードの Enter キーを押すと、オーバーレイが開きます。
オーバーレイを閉じるには、キーボードの Escape キーを押してください。
Focus Scope Type プロパティを Auto-Closing Modal または Auto-Closing Modeless に設定すると、オーバーレイの外側をクリックすることでオーバーレイを閉じることができます。自動で閉じるモードレスオーバーレイを、そのオーバーレイの外側にあるインタラクティブなユーザーインターフェース要素をクリックして閉じると、Kanzi はそのクリックをクリックした要素に伝播します。
ユーザーインターフェース要素にフォーカスがあることを表示する¶
ユーザーインターフェース要素がフォーカスを持っているとき、またはその子要素のいずれかがフォーカスを持っているときに、その要素の外観を変更するように設定できます。例えば、スライダーがフォーカスを持っているときにスライダーコントロールの色を変更したり、それらのコントロールのいずれかがフォーカスを持っているときにUIコントロールのグループをハイライトしたりすることができます。
これらの Focus プロパティを使用して、ユーザーインターフェース要素にフォーカスがあるかどうかを確認できます。
Focused ブールプロパティは、ノードがキー入力を受け取るキー焦点ノードであるかどうかを報告します。
Focus State 列挙プロパティは、フォーカススコープ内のノードまたはノードのフォーカス状態を報告し、次の値を持つことができます。
列挙値
列挙キー
フォーカス可能なノードの意味
フォーカススコープの意味
No Focus
0
ノードはフォーカスを持っていません。
フォーカススコープ内のノードのいずれもフォーカスを持っていません。
Logical Focus
1
ノードは、オーバーレイタイプのフォーカススコープの論理フォーカスノードです。論理フォーカスノードは、オーバーレイがフォーカスを失う前のキーのフォーカスノードでした。オーバーレイがフォーカスを再取得すると、論理フォーカスノードがキーのフォーカスノードになります。
フォーカススコープ内のノードは、そのスコープが属するオーバーレイの論理フォーカスノードです。
Key Focus
2
ノードはキーのフォーカスノードです。
フォーカススコープ内のノードは、キーのフォーカスノードです。
ユーザーインターフェース要素にフォーカスがあるかどうかを視覚的に示すためには、次のいずれかを行います。
ステートマネージャーを作成し、Focused または Focus State プロパティをそのコントローラープロパティとして使用します。ユーザーインターフェース要素にフォーカスがあることを示すために、ステートマネージャーを使用する を参照してください。
Focused または Focus State プロパティの値に基づいてプロパティを設定するバインディングを作成します。バインディングを使用して、ユーザーインターフェース要素にフォーカスがあるときに表示する を参照してください。
ユーザーインターフェース要素にフォーカスがあることを示すために、ステートマネージャーを使用する¶
ユーザーインターフェース要素にフォーカスがあることを示すためにステートマネージャーを使用することは、複数のプロパティの値を変更してフォーカスを視覚的に示したい場合に便利です。ステートマネージャーを使用すると、外観の変化をアニメーション化することもできます。
この例では、Focus > Focus State プロパティをステートマネージャーのコントローラープロパティとして使用し、そのスライダーがキーのフォーカスを持っているときにスライダーとそのラベルの外観を変更します。
ユーザーインターフェース要素にフォーカスがあることを示すために、ステートマネージャーを使用するには:
フォーカスのビジュアライゼーションを作成したいユーザーインターフェース要素を選択してください。
例えば、スライダーラベルを表示する Slider と Text Block ノードを含むプレハブを作成します。
Properties で、Focus Scope > Focus Scope Type プロパティを追加し、それを Group に設定します。
この方法で、ノードをフォーカススコープにします。Focus State プロパティを使用して、フォーカススコープ内のノードのフォーカス状態を確認できます。
State Tools で、2つの状態を持つステートマネージャーを作成します。1つはノードのいずれもフォーカスされていないときのユーザーインターフェース要素の外観を定義し、もう1つはノードの1つがキーのフォーカスノードであるときのユーザーインターフェース要素を定義します。
例えば、ステートに NoFocus と KeyFocus という名前を付けます。
フォーカスの視覚化を作成するユーザーインターフェース要素で、外観を変更したい各ノードを選択し、ユーザーインターフェース要素内のノードがキーのフォーカスを持つときに変更したいプロパティの値を設定します。
例えば、スライダーがフォーカスを持っているときに、スライダーラベルとスライダーの色を変更します。
State Tools で、
をクリックし、ユーザーインターフェース要素内のノードがキー入力フォーカスを持っているときに、そのユーザーインターフェース要素がどのように見えるかを定義する状態を選択します。これにより、現在のプロパティ値をその状態に保存します。例えば、KeyFocus ステートの下にある
をクリックします。
State Tools で、Controller Property を Focus > Focus State に設定します。
Focus State プロパティは、フォーカススコープのフォーカス状態を報告します。フォーカススコープ内のノードがキーのフォーカスを持っている場合、プロパティの値は Key Focus です。
State Tools で、KeyFocus ステートのコントローラープロパティの値を Key Focus に設定します。NoFocus ステートのコントローラープロパティの値は No Focus に設定されたままにします。
これにより、アプリケーションが次を使用するように設定します:
NoFocus ステートは、ユーザーインターフェース要素内のノードがどれもフォーカスされていないときです。
ユーザーインターフェース要素内のノードがキー入力のフォーカスを持っているときの KeyFocus 状態。
State Tools で、Edit State Manager をクリックして State Tools を非アクティブ化します。
作成したスライダーコントロールプレハブ内のスライダーにフォーカスを設定すると、スライダーとスライダーラベルの外観が変わります。
バインディングを使用して、ユーザーインターフェース要素にフォーカスがあるときに表示する¶
ユーザーインターフェース要素にフォーカスがあることを示すためにバインディングを使用することは、フォーカスを視覚的に示すために1つのプロパティの値だけを変更したい場合に便利です。
バインディングを使用してユーザーインターフェース要素にフォーカスがあることを示す場合、変更は遷移アニメーションなしで即座に行われます。
ユーザーインターフェース要素にフォーカスがあることを示すためにバインディングを使用するには:
フォーカスのビジュアライゼーションを作成したいノードを選択してください。
例えば、フォーカススコープであり、そのフォーカススコープ内のノードがキーのフォーカスを持つときに背景色を変更したいノードを選択します。
Properties で、+ Add Binding をクリックし、Binding Editor で設定します。
Property を、ノードまたはその子孫ノードがフォーカスを持っているときに変更したい値を持つプロパティに設定します。
例えば、それを Background Brush に設定します。
Expression は、フォーカスの状態に応じて Property を異なる値に設定します。
以下の機能を使用できます。
ノードがキーのフォーカスを持っているかどうかを確認するための Focused (
Node::FocusedProperty) ブールプロパティ。ノードまたはフォーカススコープ内のノードのフォーカス状態を確認するための Focus State (
Node::FocusStateProperty) 列挙プロパティ。Focus State プロパティは、次の値を持つことができます。
列挙値
列挙キー
フォーカス可能なノードの意味
フォーカススコープの意味
No Focus
0
ノードはフォーカスを持っていません。
フォーカススコープ内のノードのいずれもフォーカスを持っていません。
Logical Focus
1
ノードは、オーバーレイタイプのフォーカススコープの論理フォーカスノードです。論理フォーカスノードは、オーバーレイがフォーカスを失う前のキーのフォーカスノードでした。オーバーレイがフォーカスを再取得すると、論理フォーカスノードがキーのフォーカスノードになります。
フォーカススコープ内のノードは、そのスコープが属するオーバーレイの論理フォーカスノードです。
Key Focus
2
ノードはキーのフォーカスノードです。
フォーカススコープ内のノードは、キーのフォーカスノードです。
例えば、フォーカススコープノード内のノードがキーのフォーカスを持っているときに、そのフォーカススコープノードでブラシを設定するには:
({@./Node.FocusState} == 2) ? acquire("Medium Gray Color Brush") : acquire("NullBrush")
Save をクリックします。
例えば、UIコントロールを含むフォーカスグループノードにバインディングを追加すると、それらのUIコントロールのいずれかがキーのフォーカスを持つと、そのノードの背景ブラシが変わります。
アクティビティをアクティブ化する際にフォーカスを設定するかどうかを制御する¶
アクティビティがアクティブになるときに、そのアクティビティにキーフォーカスを設定するかどうかを制御できます。
デフォルトで、Kanzi は、そのアクティビティのアクティビティホストがフォーカスを持っている場合にのみ、アクティビティをアクティブにするためにフォーカスを設定しようとします。これは、アプリケーションにフォーカスがない場合、Kanzi はデフォルトでアクティビティをアクティブにするためにフォーカスを設定しないことを意味します。
これらのプロパティを使用して、アクティビティをアクティブ化する際にフォーカスを設定するかどうかを制御します。
Exclusive Activity Host で Focus On Activating Activity プロパティ。
このプロパティの値は、このプロパティを設定したExclusive Activity Host内のすべてのアクティビティに適用されます。
Parallel Activity Host の Activity で Focus On Activation プロパティ。
このプロパティの値は、このプロパティを設定したアクティビティに適用されます。
利用可能なオプションは次のとおりです。
When Host Has Focus は、アクティビティホストがフォーカスを持っている場合、アクティビティをアクティブにしてキーのフォーカスを設定しようとします。
これがデフォルト値です。
Always はアクティビティをアクティブにするためにキーのフォーカスを設定しようとします。
例えば、このオプションを使用して、Kanzi がアプリケーションの起動時にアクティビティにフォーカスを設定することを確認します。
このオプションは、フォーカスがアクティビティをアクティブにするために移動することを保証しません。例えば、アクティビティの前にモーダルオーバーレイがある場合、Kanzi はそのアクティビティにフォーカスを設定できません。モーダルオーバーレイは、その境界外から発生するキー入力をブロックします。アクティビティを使用してオーバーレイを作成する を参照してください。
Never は、アクティブ化しているアクティビティにキーのフォーカスを設定しようとしません。
たとえば、ユーザーの操作を必要としない緊急性の低い通知にこれを使用すると、ユーザーがアプリケーション内の他の要素を操作している間に通知が操作を妨げないようにできます。
特定のキーを設定してフォーカスを移動する¶
アプリケーションのキーナビゲーションを作成する際には、次のものを使用できます。
Key Manipulator は、ユーザーがアプリケーションをナビゲートするために使用できるキーを設定します。デフォルトのフォーカスナビゲーションキーをオーバーライドし、特定のキーを使用してノードにフォーカスを設定したり、オーバーレイを開閉したり、フォーカスチェーン内でフォーカスを移動したりすることができます。Key Manipulator を使用する を参照してください。
Navigation Manipulator は、ユーザーがアプリケーション内の異なる方向にナビゲートするために使用できるキーを設定します。Navigation Manipulator を使用する を参照してください。
APIでのフォーカスの使用¶
詳細については、FocusManager クラスを参照してください。
関連項目¶
チュートリアル: アプリケーションのUIナビゲーションを作成する