Focus Group

Manage vertical or horizontal focus in your Roku application.

Extends LayoutGroup

Description

Unfortunately, as of 2024, focus management is not built into Roku applications (like we are used to with Apple TV).

This control handles three simple things automatically for you:

1. Display views vertically/horizontally.
2. Handle up and down focus management for vertical orientation.
3. Handle left and right focus management for horizontal orientation.

Examples

<!-- Displays two buttons horizontally, with left/right focus -->
<Rock:FocusGroup layoutDirection="horiz">
    <Rock:Button
        id="exampleButton"
        text="Example Button"
        showFocusFootprint="true"
        rockCommand="pushPage"
        rockPageGuid="4c294b37-fcc1-4432-87ff-3ce73f14a482"
        rockPageCacheControl="personal:600"
        rockPageShowLoading="true"
        minWidth="240"/>

    <Rock:Button
        id="exampleButton2"
        text="Replace Page"
        showFocusFootprint="true"
        rockCommand="replacePage"
        rockPageGuid="4c294b37-fcc1-4432-87ff-3ce73f14a482"
        rockPageCacheControl="personal:600"
        rockPageShowLoading="true"
        minWidth="240"/>
</Rock:FocusGroup>  

<!-- Displays two buttons vertically, with up/down focus -->
<Rock:FocusGroup layoutDirection="vert">
    <Rock:Button
        id="exampleButton"
        text="Example Button"
        showFocusFootprint="true"
        rockCommand="pushPage"
        rockPageGuid="4c294b37-fcc1-4432-87ff-3ce73f14a482"
        rockPageCacheControl="personal:600"
        rockPageShowLoading="true"
        minWidth="240"/>

    <Rock:Button
        id="exampleButton2"
        text="Replace Page"
        showFocusFootprint="true"
        rockCommand="replacePage"
        rockPageGuid="4c294b37-fcc1-4432-87ff-3ce73f14a482"
        rockPageCacheControl="personal:600"
        rockPageShowLoading="true"
        minWidth="240"/>
</Rock:FocusGroup>