Focus

Keyboard focus forwards hardware key messages to the correct user interface element in your application. For example, the user can press the arrow keys on the keyboard to move a slider or press the Enter key to click a button.

Kanzi organizes nodes in focus scopes. Focus scopes are nodes which assist in focus chain navigation handling. They group the child nodes and drive the focus navigation within that group. They also act like a focus proxy, forwarding the focus to one of their focusable child nodes. When you move the focus away from a focus scope, that scope remembers the last-focused child node.

These are the main concepts behind how focus works in Kanzi:

  • Focusable node is a node that has the Focusable property enabled. A focusable node can receive keyboard input.

  • Focused node is the node that currently receives the keyboard input, and has the read-only Focused property enabled.

    ../../_images/set-the-focus.svg
  • Focus chain is a sequence of nodes which defines the order in which Kanzi sets focus to those nodes. Kanzi includes in the focus chain all focusable nodes in your project.

  • Focus order defines the position of a node in the focus chain based on the position of the node in the node tree or the value of its Focus Order property.

    ../../_images/focus-order.svg
  • Focus scope is a node that helps navigation handling in a focus chain. You can set a node to be a focus scope to forward the focus from that node to a child node.

    ../../_images/focus-scope.svg

    These are the focus scope types in Kanzi:

    • Focus group is a focus scope which forms a group of focusable nodes. When a focus group node receives focus, Kanzi forwards the focus to the focus node of that focus scope.

      You can move focus within the boundaries of a focus group and outside of a focus group.

      ../../_images/focus-group.gif
    • Focus fence is a focus scope that keeps the focus chain navigation inside the scope and does not allow the focus chain navigation to enter or leave that scope. A focus fence allows the user to navigate the content within the scope boundaries.

      ../../_images/focus-fence.gif
    • These popup-type focus scopes:

      • Modal scope blocks the key and touch input that comes from outside of the popup window and keeps the focus navigation within the boundaries of the modal scope node.

        ../../_images/focus-scope-modal.svg../../_images/focus-scope-modal.gif
      • Popup scope allows the popup window to lose focus when the key and touch input comes from outside of the boundaries of the popup scope node.

        ../../_images/focus-scope-popup.svg../../_images/focus-scope-popup.gif

To learn more about creating focus navigation for your application, see Using focus.