キーボード、ゲームパッド、リモコン、アクセシビリティ ツールのフォーカス ナビゲーションFocus navigation for keyboard, gamepad, remote control, and accessibility tools

キーボード、リモート、および方向パッド

フォーカス ナビゲーションを使用すると、キーボードを使い慣れているパワー ユーザーや障碍およびその他のアクセシビリティ要件を持っているユーザーは、総合的で一貫性のあるエクスペリエンスを UWP アプリやカスタム コントロールで利用できるようになります。また、テレビ画面と Xbox One の 10 フィート エクスペリエンスも利用することができます。Use focus navigation to provide comprehensive and consistent interaction experiences in your UWP apps and custom controls for keyboard power users, those with disabilities and other accessibility requirements, as well as the 10-foot experience of television screens and the Xbox One.

概要Overview

フォーカス ナビゲーションとは、キーボード、ゲームパッド、リモコンを使用して、ユーザーが UWP アプリケーションの UI 間を移動したり、これらの UI を操作したりできるようにする基本的なメカニズムです。Focus navigation refers to the underlying mechanism that enables users to navigate and interact with the UI of a UWP application using a keyboard, gamepad, or remote control.

注意

通常、入力デバイスは、ポインティング デバイス (タッチ、タッチパッド、ペン、マウスなど)、および非ポインティング デバイス (キーボード、ゲームパッド、リモコンなど) に分類されます。Input devices are typically classified as pointing devices, such as touch, touchpad, pen, and mouse, and non-pointing devices, such as keyboard, gamepad, and remote control.

このトピックでは、UWP アプリケーションを最適化し、非ポインティングの入力タイプを必要としているユーザー向けにカスタム操作エクスペリエンスを構築する方法について説明します。This topic describes how to optimize a UWP application and build custom interaction experiences for users that rely on non-pointing input types.

PC 上の UWP アプリのカスタム コントロールではキーボード入力に焦点を当てていますが、タッチ キーボードやスクリーン キーボード (OSK) などのソフトウェア キーボード、Windows ナレーターなどのアクセシビリティ ツールのサポート、および 10 フィート エクスペリエンスのサポートのために、適切に設計されたキーボード エクスペリエンスも重要となります。Even though we focus on keyboard input for custom controls in UWP apps on PCs, a well-designed keyboard experience is also important for software keyboards such as the touch keyboard and the On-Screen Keyboard (OSK), supporting accessibility tools such as Windows Narrator, and supporting the 10-foot experience.

ポインティング デバイスのために UWP アプリケーションでカスタム エクスペリエンスを構築する方法のガイダンスについては、「ポインター入力の処理」をご覧ください。See Handle pointer input for guidance on building custom experiences in UWP applications for pointing devices.

キーボード用にアプリとエクスペリエンスを構築する方法の一般的な情報については、「キーボード操作」をご覧ください。For more general information on building apps and experiences for keyboard, see Keyboard Interaction.

一般的なガイドラインGeneral guidance

フォーカス ナビゲーションをサポートする必要があるのは、ユーザーの操作を必要とする UI 要素のみです。操作を必要としない要素 (静的な画像など) では、キーボード フォーカスは必要ありません。Only those UI elements that require user interaction should support focus navigation, elements that don’t require an action, such as static images, do not need keyboard focus. スクリーン リーダー、およびこれに類似したアクセシビリティ ツールでは、こうした静的な要素がフォーカス ナビゲーションの対象となっていない場合でも、これらの要素の読み上げが行われます。Screen readers and similar accessibility tools still announce these static elements, even when they are not included in focus navigation.

マウスやタッチなどのポインター デバイスによるナビゲーションとは異なり、フォーカス ナビゲーションは直線的であることを覚えておくことは大切です。It is important to remember that unlike navigating with a pointer device such as a mouse or touch, focus navigation is linear. フォーカス ナビゲーションを実装するときは、ユーザーがアプリケーションを操作する方法や論理的なナビゲーションについて考慮してください。When implementing focus navigation, consider how a user will interact with your application and what the logical navigation should be. ほとんどの場合、カスタム フォーカス ナビゲーションの動作は、ユーザーのカルチャで適切とされる読み取りパターンに従うようにすることをお勧めします。In most cases, we recommend custom focus navigation behavior follows the preferred reading pattern of the user's culture.

フォーカス ナビゲーションでは、その他に次の点も考慮してください。Some other focus navigation considerations include:

  • コントロールが論理的にグループ化されているか。Are controls grouped logically?
  • これらのコントロールのグループを重視する必要があるか。Are there groups of controls with greater importance?
    • 重視する場合は、これらのグループにサブグループを含めるかどうか。If yes, do those groups contain sub-groups?
  • レイアウトではカスタムの方向ナビゲーション (方向キー) とタブ オーダーが必要となるか。Does the layout require custom directional navigation (arrow keys) and tab order?

Engineering Software for Accessibility eBook (アクセシビリティ ソフトウェアのエンジニアリングに関する eBook) の「Designing the Logical Hierarchy」(論理的な階層の設計) の章では、これらのことがわかりやすく説明されています。The Engineering Software for Accessibility eBook has an excellent chapter on Designing the Logical Hierarchy.

キーボードの 2D 方向ナビゲーション2D directional navigation for keyboard

コントロールやコントロール グループの 2D 内部ナビゲーション領域のことを、"方向領域" と呼びます。The 2D inner navigation region of a control, or control group, is referred to as its "directional area". フォーカがこのオブジェクトに移動すると、キーボードの方向キー (左、右、上、下) を使用して、方向領域内の子要素間を移動することができます。When focus shifts to this object, the keyboard arrow keys (left, right, up, and down) can be used to navigate between child elements within the directional area.

方向性のある領域 2D 内部のナビゲーション領域、またはコントロールのグループの方向の領域directional area 2D Inner navigation region, or directional area, of a control group

XYFocusKeyboardNavigation プロパティ (設定できる値は AutoEnabledDisabled) を使用して、キーボードの方向キーでの 2D 内部ナビゲーションを管理できます。You can use the XYFocusKeyboardNavigation property (which has possible values of Auto, Enabled, or Disabled) to manage 2D inner navigation with the keyboard arrow keys.

注意

タブ オーダーは、このプロパティの影響を受けません。Tab order is not affected by this property. ナビゲーション エクスペリエンスがわかりにくくならないように、アプリケーションのタブ ナビゲーションの順序では、方向領域の子要素を明示的に指定しないことをお勧めします。To avoid a confusing navigation experience, we recommend that child elements of a directional area not be explicitly specified in the tab navigation order of your application. 要素のタブ移動動作について詳しくは、UIElement.TabFocusNavigation プロパティと TabIndex プロパティをご覧ください。See the UIElement.TabFocusNavigation and TabIndex properties for more detail on tabbing behavior for an element.

Auto (既定の動作)Auto (default behavior)

Auto に設定すると、方向ナビゲーションの動作は要素の先祖 (継承階層) に基づいて決まります。When set to Auto, directional navigation behavior is determined by the element’s ancestry, or inheritance hierarchy. すべての先祖が既定のモードになっている場合 (Auto に設定されている場合)、キーボードを使用した方向ナビゲーションはサポートされませんIf all ancestors are in default mode (set to Auto), directional navigation with the keyboard is not supported.

無効になっています。Disabled

XYFocusKeyboardNavigationDisabled に設定すると、コントロールとその子要素への方向ナビゲーションがブロックされます。Set XYFocusKeyboardNavigation to Disabled to block directional navigation to the control and its child elements.

XYFocusKeyboardNavigation 動作を無効になっている XYFocusKeyboardNavigation 動作を無効になっていますXYFocusKeyboardNavigation disabled behavior XYFocusKeyboardNavigation disabled behavior

この例では、プライマリの StackPanel (ContainerPrimary) で XYFocusKeyboardNavigationEnabled に設定されています。In this example, the primary StackPanel (ContainerPrimary) has XYFocusKeyboardNavigation set to Enabled. すべての子要素はこの設定を継承し、方向キーを使用して、これらの子要素への移動が可能になります。All child elements inherit this setting, and can be navigated to with the arrow keys. ただし、B3 要素と B4 要素はセカンダリの StackPanel (ContainerSecondary) 内にあり、その XYFocusKeyboardNavigationDisabled に設定されています。この設定は、プライマリ コンテナーよりも優先され、セカンダリ コンテナー自体への方向キー ナビゲーションとその子要素間の方向キー ナビゲーションは無効になります。However, the B3 and B4 elements are in a secondary StackPanel (ContainerSecondary) with XYFocusKeyboardNavigation set to Disabled, which overrides the primary container and disables arrow key navigation to itself and between its child elements.

<Grid 
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" 
    TabFocusNavigation="Cycle">
    <Grid.RowDefinitions>
        <RowDefinition Height="40"/>
        <RowDefinition Height="75"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <TextBlock Name="KeyPressed"
                Grid.Row="0" 
                FontWeight="ExtraBold" 
                HorizontalTextAlignment="Center"
                TextWrapping="Wrap" 
                Padding="10" />
    <StackPanel Name="ContainerPrimary" 
                XYFocusKeyboardNavigation="Enabled" 
                KeyDown="ContainerPrimary_KeyDown" 
                Orientation="Horizontal" 
                BorderBrush="Green" 
                BorderThickness="2" 
                Grid.Row="1" 
                Padding="10" 
                MaxWidth="200">
        <Button Name="B1" 
                Content="B1" 
                GettingFocus="Btn_GettingFocus" />
        <Button Name="B2" 
                Content="B2" 
                GettingFocus="Btn_GettingFocus" />
        <StackPanel Name="ContainerSecondary" 
                    XYFocusKeyboardNavigation="Disabled" 
                    Orientation="Horizontal" 
                    BorderBrush="Red" 
                    BorderThickness="2">
            <Button Name="B3" 
                    Content="B3" 
                    GettingFocus="Btn_GettingFocus" />
            <Button Name="B4" 
                    Content="B4" 
                    GettingFocus="Btn_GettingFocus" />
        </StackPanel>
    </StackPanel>
</Grid>

EnabledEnabled

XYFocusKeyboardNavigationEnabled に設定すると、コントロールとその UIElement 子オブジェクトそれぞれへの 2D 方向ナビゲーションがサポートされます。Set XYFocusKeyboardNavigation to Enabled to support 2D directional navigation to a control and each of its UIElement child objects.

設定すると、方向キーを使用したナビゲーションは、方向領域内の要素に限定されます。When set, navigation with the arrow keys is restricted to elements within the directional area. タブ ナビゲーションは影響を受けません。これは、すべてのコントロールはタブ オーダー階層を使用してアクセス可能な状態になっているためです。Tab navigation is not affected, as all controls remain accessible through their tab order hierarchy.

XYFocusKeyboardNavigation 動作を有効になっている XYFocusKeyboardNavigation 動作を有効になっています。XYFocusKeyboardNavigation enabled behavior XYFocusKeyboardNavigation enabled behavior

この例では、プライマリの StackPanel (ContainerPrimary) で XYFocusKeyboardNavigationEnabled に設定されています。In this example, the primary StackPanel (ContainerPrimary) has XYFocusKeyboardNavigation set to Enabled. すべての子要素はこの設定を継承し、方向キーを使用して、これらの子要素への移動が可能になります。All child elements inherit this setting, and can be navigated to with the arrow keys. B3 要素と B4 要素はセカンダリの StackPanel (ContainerSecondary) 内にあり、その XYFocusKeyboardNavigation は設定されていません。このため、プライマリ コンテナーの設定が継承されます。The B3 and B4 elements are in a secondary StackPanel (ContainerSecondary) where XYFocusKeyboardNavigation is not set, which then inherits the primary container setting. B5 要素は宣言された方向領域内に存在せず、方向キー ナビゲーションをサポートしていませんが、標準的なタブ ナビゲーションの動作はサポートします。The B5 element is not within a declared directional area, and does not support arrow key navigation but does support standard tab navigation behavior.

<Grid
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
    TabFocusNavigation="Cycle">
    <Grid.RowDefinitions>
        <RowDefinition Height="40"/>
        <RowDefinition Height="100"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <TextBlock Name="KeyPressed"
               Grid.Row="0"
               FontWeight="ExtraBold"
               HorizontalTextAlignment="Center"
               TextWrapping="Wrap"
               Padding="10" />
    <StackPanel Grid.Row="1"
                Orientation="Horizontal"
                HorizontalAlignment="Center">
        <StackPanel Name="ContainerPrimary"
                    XYFocusKeyboardNavigation="Enabled"
                    KeyDown="ContainerPrimary_KeyDown"
                    Orientation="Horizontal"
                    BorderBrush="Green"
                    BorderThickness="2"
                    Padding="5" Margin="5">
            <Button Name="B1"
                    Content="B1"
                    GettingFocus="Btn_GettingFocus" Margin="5" />
            <Button Name="B2"
                    Content="B2"
                    GettingFocus="Btn_GettingFocus" />
            <StackPanel Name="ContainerSecondary"
                        Orientation="Horizontal"
                        BorderBrush="Red"
                        BorderThickness="2"
                        Margin="5">
                <Button Name="B3"
                        Content="B3"
                        GettingFocus="Btn_GettingFocus"
                        Margin="5" />
                <Button Name="B4"
                        Content="B4"
                        GettingFocus="Btn_GettingFocus"
                        Margin="5" />
            </StackPanel>
        </StackPanel>
        <Button Name="B5"
                Content="B5"
                GettingFocus="Btn_GettingFocus"
                Margin="5" />
    </StackPanel>
</Grid>

入れ子になった方向領域を複数レベル設定することができます。You can have multiple levels of nested directional areas. すべての親要素の XYFocusKeyboardNavigation が Enabled に設定されている場合、内部ナビゲーション領域の境界は無視されます。If all parent elements have XYFocusKeyboardNavigation set to Enabled, inner navigation region boundaries are ignored.

2D 方向ナビゲーションを明示的にサポートしていない要素に含まれる、2 つの入れ子になった方向領域の例を次に示します。Here's an example of two nested directional areas within an element that does not explicitly support 2D directional navigation. この場合、2 つの入れ子になった領域間の方向ナビゲーションはサポートされません。In this case, directional navigation is not supported between the two nested areas.

XYFocusKeyboardNavigation が有効になっており、動作を入れ子になった XYFocusKeyboardNavigation が有効になっており、動作を入れ子になったXYFocusKeyboardNavigation enabled and nested behavior XYFocusKeyboardNavigation enabled and nested behavior

3 つの入れ子になった方向領域を使った、より複雑な例を次に示します。Here’s a more complex example of three nested directional areas where:

  • B1 にフォーカスがある場合は、XYFocusKeyboardNavigation が Disabled に設定されている方向領域の境界が存在し、方向キーによって B2、B3、B4 には移動できないため、B5 にのみ移動できます (B5 から B1 への移動も同様)When B1 has focus, only B5 can be navigated to (and vice versa) because there is a directional area boundary where XYFocusKeyboardNavigation set to Disabled, making B2, B3, and B4 unreachable with the arrow keys
  • B2 にフォーカスがある場合は、方向領域の境界によって B1、B4、B5 への方向キー ナビゲーションが禁止されているため、B3 にのみ移動できます (B3 から B2 への移動も同様)。When B2 has focus, only B3 can be navigated to (and vice versa) because the directional area boundary prevents arrow key navigation to B1, B4, and B5
  • B4 にフォーカスがある場合は、コントロール間を移動するために Tab キーを使用する必要がありますWhen B4 has focus, the Tab key must be used to navigate between controls

XYFocusKeyboardNavigation によって有効になり、複雑な入れ子になった動作

XYFocusKeyboardNavigation が有効になっており、複雑な動作を入れ子になったXYFocusKeyboardNavigation enabled and complex nested behavior

タブ ナビゲーションTab navigation

方向キーはコントロールやコントロール グループ内の 2D 方向ナビゲーションで使用できますが、Tab キーを使用すると、UWP アプリケーションのすべてのコントロール間を移動することができます。While the arrow keys can be used for 2D directional navigation witin a control, or control group, the Tab key can be used to navigate between all controls in a UWP application.

すべての対話型のコントロールは、既定で Tab キーによるナビゲーションをサポートしています (IsEnabled プロパティと IsTabStop プロパティが true)。論理的なタブ オーダーは、アプリケーションのコントロール レイアウトからから派生します。All interactive controls support Tab key navigation by default (IsEnabled and IsTabStop property are true), with the logical tab order derived from the control layout in your application. ただし、既定の順序は表示順序と対応するとは限りません。However, the default order does not necessarily correspond to the visual order. 実際の表示位置は親レイアウト コンテナーと特定のプロパティに依存し、それらを子要素で設定することでレイアウトに影響することがあります。The actual display position might depend on the parent layout container and certain properties that you can set on the child elements to influence the layout.

フォーカスがアプリケーション内をジャンプするようなカスタムのタブ オーダーは使用しないでください。Avoid a custom tab order that makes the focus jump around in your application. たとえば、フォーム内のコントロールの一覧には、上から下および左から右へと移動するタブ オーダーが必要です (ロケールによって異なります)。For example, a list of controls in a form should have a tab order that flows from top to bottom and left to right (depending on locale).

このセクションでは、アプリに合わせてこのタブ オーダーを完全にカスタマイズする方法について説明します。In this section we describe how this tab order can be fully customized to suit your app.

タブ ナビゲーションの動作を設定するSet the tab navigation behavior

UIElementTabFocusNavigation プロパティは、オブジェクト ツリー全体 (または方向領域) のタブ ナビゲーションの動作を指定します。The TabFocusNavigation property of UIElement specifies the tab navigation behavior for its entire object tree (or directional area).

注意

ControlTemplate を使わないオブジェクトに対して Control.TabNavigation プロパティの代わりにこのプロパティを使用して、それらのオブジェクトの外観を定義します。Use this property instead of the Control.TabNavigation property for objects that do not use a ControlTemplate to define their appearance.

前のセクションで説明したように、ナビゲーション エクスペリエンスがわかりにくくならないように、アプリケーションのタブ ナビゲーションの順序では、方向領域の子要素を明示的に指定しないことをお勧めします。As we mentioned in the previous section, to avoid a confusing navigation experience, we recommend that child elements of a directional area not be explicitly specified in the tab navigation order of your application. 要素のタブ移動動作について詳しくは、UIElement.TabFocusNavigation プロパティと TabIndex プロパティをご覧ください。See the UIElement.TabFocusNavigation and the TabIndex properties for more detail on tabbing behavior for an element.

Windows 10 Creators Update (ビルド 10.0.15063) より前のバージョンでは、タブ設定は ControlTemplate オブジェクトに制限されていました。For versions older than Windows 10 Creators Update (build 10.0.15063), tab settings were limited to ControlTemplate objects. 詳しくは、Control.TabNavigation をご覧ください。For more info, see Control.TabNavigation.

TabFocusNavigation は、KeyboardNavigationMode 型の値を保持します。設定できる値は次のとおりです (以下の例はカスタム コントロール グループではありません。また、方向キーでの内部ナビゲーションを必要としていません)。TabFocusNavigation has a value of type KeyboardNavigationMode with the following possible values (note that these examples are not custom control groups and do not require inner navigation with the arrow keys):

  • Local (既定)Local (default)
    タブ インデックスは、コンテナー内のローカル サブツリーで認識されます。Tab indexes are recognized on the local subtree inside the container. この例では、タブ オーダーは B1、B2、B3、B4、B5、B6、B7、B1 です。For this example, the tab order is B1, B2, B3, B4, B5, B6, B7, B1.

    "Local" タブ ナビゲーションの動作

    「ローカル」タブ ナビゲーションの動作"Local" tab navigation behavior

  • ある時Once
    コンテナーとすべての子要素は、フォーカスを 1 回だけ受け取ります。The container and all child elements receive focus once. この例では、タブ オーダーは B1、B2、B7、B1 です (方向キーによる内部ナビゲーションも示されています)。For this example, the tab order is B1, B2, B7, B1 (inner navigation with arrow key is also demonstrated).

    "Once" タブ ナビゲーションの動作

    ナビゲーションの動作を「1 回」タブします。"Once" tab navigation behavior

  • サイクル Cycle
    フォーカスは循環して、コンテナー内のフォーカス可能な最初の要素に戻ります。Focus cycles back to the initial focusable element inside a container. この例では、タブ オーダーは B1、B2、B3、B4、B5、B6、B2... です。For this example, the tab order is B1, B2, B3, B4, B5, B6, B2...

    "Cycle" タブ ナビゲーションの動作

    タブ ナビゲーションの動作を「循環」"Cycle" tab navigation behavior

上記の例で使用されるコードを次に示します (TabFocusNavigation ="Cycle")。Here's the code for the preceding examples (with TabFocusNavigation ="Cycle").

<Grid 
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" 
    TabFocusNavigation="Cycle">
    <Grid.RowDefinitions>
        <RowDefinition Height="40"/>
        <RowDefinition Height="300"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <TextBlock Name="KeyPressed"
               Grid.Row="0" 
               FontWeight="ExtraBold" 
               HorizontalTextAlignment="Center"
               TextWrapping="Wrap" 
               Padding="10" />
    <StackPanel Name="ContainerPrimary"
                KeyDown="Container_KeyDown" 
                Orientation="Horizontal" 
                HorizontalAlignment="Center"
                BorderBrush="Green" 
                BorderThickness="2" 
                Grid.Row="1" 
                Padding="10" 
                MaxWidth="200">
        <Button Name="B1" 
                Content="B1" 
                GettingFocus="Btn_GettingFocus" 
                Margin="5"/>
        <StackPanel Name="ContainerSecondary" 
                    KeyDown="Container_KeyDown"
                    XYFocusKeyboardNavigation="Enabled" 
                    TabFocusNavigation ="Cycle"
                    Orientation="Vertical" 
                    VerticalAlignment="Center"
                    BorderBrush="Red" 
                    BorderThickness="2"
                    Padding="5" Margin="5">
            <Button Name="B2" 
                    Content="B2" 
                    GettingFocus="Btn_GettingFocus" 
                    Margin="5"/>
            <Button Name="B3" 
                    Content="B3" 
                    GettingFocus="Btn_GettingFocus" 
                    Margin="5"/>
            <Button Name="B4" 
                    Content="B4" 
                    GettingFocus="Btn_GettingFocus" 
                    Margin="5"/>
            <Button Name="B5" 
                    Content="B5" 
                    GettingFocus="Btn_GettingFocus" 
                    Margin="5"/>
            <Button Name="B6" 
                    Content="B6" 
                    GettingFocus="Btn_GettingFocus" 
                    Margin="5"/>
        </StackPanel>
        <Button Name="B7" 
                Content="B7" 
                GettingFocus="Btn_GettingFocus" 
                Margin="5"/>
    </StackPanel>
</Grid>

TabIndexTabIndex

TabIndex を使用して、ユーザーが Tab キーを使用してコントロール間を移動するときに要素がフォーカスを受け取る順序を指定します。Use TabIndex to specify the order in which elements receive focus when the user navigates through controls using the Tab key. 小さい値のタブ インデックスを持つコントロールは、より大きい値のインデックスを持つコントロールより前にフォーカスを受け取ります。A control with a lower tab index receives focus before a control with a higher index.

コントロールに TabIndex が指定されていない場合、スコープに基づいて、ビジュアル ツリーにあるすべての対話型のコントロールで現在最大の値を持つインデックス (および優先順位が最も低いインデックス) よりも大きなインデックス値が割り当てられます。When a control has no TabIndex specified, it is assigned a higher index value than the current highest index value (and the lowest priority) of all interactive controls in the visual tree, based on scope.

コントロールのすべての子要素がスコープと見なされます。また、こうしたスコープの要素のいずれか 1 つにさらに子要素がある場合、それらの子要素は別のスコープと見なされます。All child elements of a control are considered a scope, and if one of these elements also has child elements, they are considered another scope. スコープのビジュアル ツリーにある最初の要素を選ぶことにより、あいまいさが解決されます。Any ambiguity is resolved by choosing the first element on the visual tree of the scope.

タブ オーダーからコントロールを除外するには、IsTabStop プロパティを false に設定します。To exclude a control from the tab order, set the IsTabStop property to false.

TabIndex プロパティを設定することで、既定のタブ オーダーを上書きできます。Override the default tab order by setting the TabIndex property.

注意

TabIndex は、UIElement.TabFocusNavigation および Control.TabNavigation と同じように動作します。TabIndex works the same way with both UIElement.TabFocusNavigation and Control.TabNavigation.

フォーカス ナビゲーションが特定の要素の TabIndex プロパティによってどのような影響を受けるかを次に示します。Here, we show how focus navigation can be affected by the TabIndex property on specific elements.

TabIndex を使用した "Local" タブ ナビゲーションの動作

「ローカル」タブ TabIndex 動作によるナビゲーション"Local" tab navigation with TabIndex behavior

前の例では、次の 2 つのスコープがあります。In the preceding example, there are two scopes:

  • B1、方向領域 (B2 - B6)、B7B1, directional area (B2 - B6), and B7
  • 方向領域 (B2 - B6)directional area (B2 - B6)

B3 (方向領域内) がフォーカスを取得すると、スコープが変更され、タブ ナビゲーションが方向領域に移動します。この方向領域では、後続のフォーカスについて最適な候補が指定されています。When B3 (in the directional area) gets focus, the scope changes and tab navigation transfers to the directional area where the best candidate for subsequent focus is identified. この場合、B2 の後に B4、B5、B6 が続きます。In this case, B2 followed by B4, B5, and B6. その後で、スコープがもう一度変更され、フォーカスが B1 に移動します。Scope then changes again, and focus moves to B1.

この例のコードを次に示します。Here's the code for this example.

<Grid
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
    TabFocusNavigation="Cycle">
    <Grid.RowDefinitions>
        <RowDefinition Height="40"/>
        <RowDefinition Height="300"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <TextBlock Name="KeyPressed"
               Grid.Row="0"
               FontWeight="ExtraBold"
               HorizontalTextAlignment="Center"
               TextWrapping="Wrap"
               Padding="10" />
    <StackPanel Name="ContainerPrimary"
                KeyDown="Container_KeyDown"
                Orientation="Horizontal"
                HorizontalAlignment="Center"
                BorderBrush="Green"
                BorderThickness="2"
                Grid.Row="1"
                Padding="10"
                MaxWidth="200">
        <Button Name="B1"
                Content="B1"
                TabIndex="1"
                ToolTipService.ToolTip="TabIndex = 1"
                GettingFocus="Btn_GettingFocus"
                Margin="5"/>
        <StackPanel Name="ContainerSecondary"
                    KeyDown="Container_KeyDown"
                    TabFocusNavigation ="Local"
                    Orientation="Vertical"
                    VerticalAlignment="Center"
                    BorderBrush="Red"
                    BorderThickness="2"
                    Padding="5" Margin="5">
            <Button Name="B2"
                    Content="B2"
                    GettingFocus="Btn_GettingFocus"
                    Margin="5"/>
            <Button Name="B3"
                    Content="B3"
                    TabIndex="3"
                    ToolTipService.ToolTip="TabIndex = 3"
                    GettingFocus="Btn_GettingFocus"
                    Margin="5"/>
            <Button Name="B4"
                    Content="B4"
                    GettingFocus="Btn_GettingFocus"
                    Margin="5"/>
            <Button Name="B5"
                    Content="B5"
                    GettingFocus="Btn_GettingFocus"
                    Margin="5"/>
            <Button Name="B6"
                    Content="B6"
                    GettingFocus="Btn_GettingFocus"
                    Margin="5"/>
        </StackPanel>
        <Button Name="B7"
                Content="B7"
                TabIndex="2"
                ToolTipService.ToolTip="TabIndex = 2"
                GettingFocus="Btn_GettingFocus"
                Margin="5"/>
    </StackPanel>
</Grid>

キーボード、ゲームパッド、リモコンの 2D 方向ナビゲーション2D directional navigation for keyboard, gamepad, and remote control

非ポインターの入力タイプ (キーボード、ゲームパッド、リモコン、および Windows ナレーターなどのアクセシビリティ ツール) では、UWP アプリケーションの UI 間を移動したり、これらの UI を操作したりするための、一般的で基本的なメカニズムを共有します。Non-pointer input types such as keyboard, gamepad, remote control, and accessibility tools like Windows Narrator, share a common, underlying mechanism for navigating and interacting with the UI of your UWP application.

このセクションでは、お勧めのナビゲーション方法をどのように指定するかについて説明します。また、フォーカス ベースである非ポインターの入力タイプすべてをサポートする一連のナビゲーション方法のプロパティを使用して、アプリケーション内でのフォーカス ナビゲーションを細かく調整する方法についても説明します。In this section, we cover how to specify a preferred navigation strategy and fine tune focus navigation within your application through a set of navigation strategy properties that support all focus-based, non-pointer input types.

Xbox/TV のアプリおよびエクスペリエンスの構築に一般的な情報は、次を参照してくださいキーボードの相互作用Xbox やテレビの設計、およびゲームパッド、リモート_コントロールの相互作用.For more general information on building apps and experiences for Xbox/TV, see Keyboard Interaction, Designing for Xbox and TV, and Gamepad and remote control interactions.

ナビゲーション方法は、キーボード、ゲームパッド、リモコン、およびさまざまなアクセシビリティ ツールに適用できます。Navigation strategies are applicable to keyboard, gamepad, remote control, and various accessibility tools.

次のナビゲーション方法のプロパティを使用すると、方向キーや方向パッド (D パッド) ボタン、または類似した押下操作に基づいて、どのコンピューターがフォーカスを受け取るかを制御することができます。The following navigation strategy properties let you influence which control receives focus based on the arrow key, directional pad (D-pad) button, or similar pressed.

  • XYFocusUpNavigationStrategyXYFocusUpNavigationStrategy
  • XYFocusDownNavigationStrategyXYFocusDownNavigationStrategy
  • XYFocusLeftNavigationStrategyXYFocusLeftNavigationStrategy
  • XYFocusRightNavigationStrategyXYFocusRightNavigationStrategy

これらのプロパティに設定できる値は、Auto (既定)、NavigationDirectionDistanceProjectionRectilinearDistance です。These properties have possible values of Auto (default), NavigationDirectionDistance, Projection, or RectilinearDistance .

Auto に設定された場合、要素の動作は要素の先祖に基づいて決まります。If set to Auto, the behavior of the element is based on the ancestors of the element. すべての要素が Auto に設定されている場合、Projection が使用されます。If all elements are set to Auto, Projection is used.

注意

前にフォーカスがあった要素やナビゲーション方向の軸までの近さなど、その他の要因により、結果が影響を受ける場合があります。Other factors, such as the previously focused element or proximity to the axis of the navigation direction, can influence the result.

ProjectionProjection

Projection 方法を使うと、現在フォーカスがある要素の端をナビゲーションの方向に投影するときに接触した最初の要素にフォーカスが移動します。The Projection strategy moves focus to the first element encountered when the edge of the currently focused element is projected in the direction of navigation.

この例では、各フォーカス ナビゲーションの方向は Projection に設定されます。In this example, each focus navigation direction is set to Projection. フォーカスが B3 をバイパスして、B1 から B4 にどのように移動するかについて注意してください。Notice how focus moves down from B1 to B4, bypassing B3. こうした移動は、B3 が射影ゾーンにないことが原因です。This is because, B3 is not in the projection zone. また、B1 から左に移動するときに、フォーカス候補がどうして識別されないのかについても注意してください。Also notice how a focus candidate is not identified when moving left from B1. これは、B1 に対する B2 の相対的な位置によって、B3 が候補から除外されるためです。This is because the position of B2 relative to B1 eliminates B3 as a candidate. B3 が B2 と同じ行にあれば、B3 は左側へのナビゲーションに対して有効な候補となります。If B3 was in the same row as B2, it would be a viable candidate for left navigation. B2 のナビゲーション方向の軸までの近さには遮るものがないため、B2 は有効な候補となります。B2 is a viable candidate due to its unobstructed proximity to the axis of navigation direction.

Projection によるナビゲーション方法

プロジェクション ナビゲーション戦略Projection navigation strategy

NavigationDirectionDistance 方法では、ナビゲーション方向の軸に最も近い要素にフォーカスが移動します。The NavigationDirectionDistance strategy moves focus to the element closest to the axis of the navigation direction.

ナビゲーション方向に対応する境界の四角形の端が拡張され、投影されて、ターゲットとなる候補が識別されます。The edge of the bounding rect corresponding to the navigation direction is extended and projected to identify candidate targets. 最初に接触した要素がターゲットとして識別されます。The first element encountered is identified as the target. 複数の候補がある場合は、最も近い要素がターゲットとして識別されます。In the case of multiple candidates, the closest element is identified as the target. さらに複数の候補がある場合には、最も上で最も左の要素が候補として識別されます。If there are still multiple candidates, the topmost/leftmost element is identified as the candidate.

NavigationDirectionDistance によるナビゲーション方法

NavigationDirectionDistance ナビゲーション戦略NavigationDirectionDistance navigation strategy

RectilinearDistanceRectilinearDistance

RectilinearDistance 方法では、2D 直線距離に基づいて最も近い要素にフォーカスが移動します (タクシー幾何学)。The RectilinearDistance strategy moves focus to the closest element based on 2D rectilinear distance (Taxicab geometry).

潜在的な各候補までのプライマリ距離とセカンダリ距離を加算することによって、最適な候補が識別されます。The sum of the primary distance and the secondary distance to each potential candidate is used to identify the best candidtate. TIE では、要求された方向が上または下の場合は左方向の最初の要素が選択され、要求された方向が左または右の場合は上方向の最初の要素が選択されます。In a tie, the first element to the left is selected if the requested direction is up or down, and the first element to the top is selected if the requested direction is left or right.

RectilinearDistance によるナビゲーション方法

RectilinearDistance ナビゲーション戦略RectilinearDistance navigation strategy

この画像は、B1 にフォーカスがあり、要求された方向が下の場合に、B3 がどのようにして RectilinearDistance のフォーカス候補となるかを示しています。This image shows how, when B1 has focus and down is the requested direction, B3 is the RectilinearDistance focus candidate. これは、この例における次の計算に基づいています。This is based on the following calcualations for this example:

  • 距離 (B1、B3、下) は 10 + 0 = 10Distance (B1, B3, Down) is 10 + 0 = 10
  • 距離 (B1、B2、下) は 0 + 40 = 30Distance (B1, B2, Down) is 0 + 40 = 30
  • 距離 (B1、D、下) は 30 + 0 = 30Distance (B1, D, Down) is 30 + 0 = 30