ゲームパッドとリモコンの操作Gamepad and remote control interactions

キーボードとゲームパッドのイメージ

多くの相互作用のエクスペリエンスは、ゲーム パッド、リモート制御、およびキーボードの間で共有されます。Many interaction experiences are shared between gamepad, remote control, and keyboard

アプリが利用でき、入力の型と同じように、両方の従来入力の種類の Pc、ラップトップ、およびタブレット (マウス、キーボード、タッチ、およびなど) からアクセスできることを確認するユニバーサル Windows プラットフォーム (UWP) アプリケーションの相互作用のエクスペリエンスを構築します。テレビ、Xbox の一般的な10-footゲームパッド、リモート制御などが発生します。Build interaction experiences in your Universal Windows Platform (UWP) applications that ensure your app is usable and accessible through both the traditional input types of PCs, laptops, and tablets (mouse, keyboard, touch, and so on), as well as the input types typical of the TV and Xbox 10-foot experience, such as the gamepad and remote control.

参照してくださいXbox やテレビの設計で UWP アプリケーションで一般的な設計のガイダンスについて、 10-footが発生します。See Designing for Xbox and TV for general design guidance on UWP applications in the 10-foot experience.

概要Overview

このトピックでは、について説明しますとする必要があり、について検討する、対話デザイン (またはしないか、プラットフォームの後に次の場合)、ガイダンス、推奨事項、およびに関係なく使用する快適に利用される UWP アプリケーションを構築するための推奨事項を提供デバイス、入力の型またはユーザー機能および設定します。In this topic, we discuss what you should consider in your interaction design (or what you don't, if the platform looks after it for you), and provide guidance, recommendations, and suggestions for building UWP applications that are enjoyable to use regardless of device, input type, or user abilities and preferences.

最後の行で直感的なとで簡単に使用、アプリケーションをする必要があります、 2 フィートとして、環境が、 10-foot環境 (その逆)。Bottom line, your application should be as intuitive and easy to use in the 2-foot environment as it is in the 10-foot environment (and vice versa). ユーザーの任意のデバイスのサポートは、実行に必要なものに集中明確かつ異質、ナビゲーションは一貫性があり、予測可能なために、コンテンツを配置および最短パスをユーザーに付与の UI を可能します。Support the user's preferred devices, make the UI focus clear and unmistakable, arrange content so navigation is consistent and predictable, and give users the shortest path possible to what they want to do.

注意

このトピックで示すコード スニペットはほとんどが XAMLで/c# ですが、基本原則と概念はすべての UWP アプリに共通です。Most of the code snippets in this topic are in XAML/C#; however, the principles and concepts apply to all UWP apps. Xbox 向けの HTML/JavaScript UWP アプリを開発している場合は、GitHub の TVHelpers ライブラリを参照することをお勧めします。If you're developing an HTML/JavaScript UWP app for Xbox, check out the excellent TVHelpers library on GitHub.

2 フィートと 10 フィート エクスペリエンスの最適化します。Optimize for both 2-foot and 10-foot experiences

少なくとも、お勧めします 2 フィートと 10-foot の両方のシナリオで正常に動作することを確認して、アプリケーションをテストすることと、すべての機能が検出および Xbox にアクセスできるゲームパッドとリモート制御します。At a minimum, we recommend that you test your applications to ensure they work well in both 2-foot and 10-foot scenarios, and that all functionality is discoverable and accessible to the Xbox gamepad and remote-control.

すべての入力デバイス (各ここでは、該当するセクションにリンク) を使用して 2 フィートと 10 フィート エクスペリエンスで使用するためにアプリを最適化する他のいくつかの方法を示します。Here are some other ways you can optimize your app for use in both 2-foot and 10-foot experiences and with all input devices (each links to the appropriate section in this topic).

注意

Xbox ゲームパッドとリモコンは、多くの UWP のキーボード動作とエクスペリエンスをサポートして、ために、これらの推奨事項は、両方の入力の種類に適しています。Because Xbox gamepads and remote controls support many UWP keyboard behaviors and experiences, these recommendations are appropriate for both input types. 参照してくださいの相互作用をキーボードキーボード情報の詳細。See Keyboard interactions for more detailed keyboard info.

機能Feature 説明Description
お客様 xy のところフォーカスのナビゲーションと相互作用XY focus navigation and interaction お客様 xy のところフォーカスのナビゲーションユーザーがアプリの UI を移動できるようにします。XY focus navigation enables the user to navigate around your app's UI. ただし、ユーザーの移動は上下左右に制限されます。However, this limits the user to navigating up, down, left, and right. このセクションでは、この点に対応するための推奨事項とその他の考慮事項について説明します。Recommendations for dealing with this and other considerations are outlined in this section.
マウス モードMouse mode お客様 xy のところフォーカスのナビゲーションは、実用的でも、可能性もいくつかの種類のマップまたは描画とペイント アプリなどのアプリケーションがありません。XY focus navigation isn't practical, or even possible, for some types of applications, such as maps or drawing and painting apps. このような場合は、マウス モードゲームパッドまたはリモート コントロール、ユーザーが自由に移動できますが、PC 上のマウスと同様です。In these cases, mouse mode lets users navigate freely with a gamepad or remote control, just like a mouse on a PC.
フォーカス ビジュアルFocus visual フォーカスのビジュアルでは、現在フォーカスがある UI 要素を強調表示する罫線です。The focus visual is a border that highlights the currently focused UI element. これにより、ユーザーの間の移動またはとの対話は、UI をすばやく識別できます。This helps the user quickly identify the UI they are navigating through or interacting with.
フォーカス engagementFocus engagement フォーカス engagement には、キーを押すユーザーが必要があります、する/選択ゲームパッドまたは UI 要素にフォーカスがある場合は、対話するために、リモート コントロールのボタン。Focus engagement requires the user to press the A/Select button on a gamepad or remote control when a UI element has focus in order to interact with it.
ハードウェア ボタンHardware buttons ゲームパッド、リモート_コントロールは、非常にさまざまなボタンと構成を提供します。The gamepad and remote control provide very different buttons and configurations.

ゲームパッドとリモート制御Gamepad and remote control

PC でキーボードやマウス、電話とタブレットでタッチを使うように、10 フィート エクスペリエンスではゲームパッドとリモコンがメイン入力デバイスになります。Just like keyboard and mouse are for PC, and touch is for phone and tablet, gamepad and remote control are the main input devices for the 10-foot experience. このセクションでは、ハードウェア ボタンとはどのようなもので何に使うかについて説明します。This section introduces what the hardware buttons are and what they do. XY フォーカス ナビゲーションと操作」と「マウス モード」では、これらの入力デバイスを使うときにアプリを最適化する方法について学びます。In XY focus navigation and interaction and Mouse mode, you will learn how to optimize your app when using these input devices.

設定なしの場合のゲームパッドとリモコンの動作の品質は、アプリでキーボードがどの程度サポートされているかによって異なります。The quality of gamepad and remote behavior that you get out-of-the-box depends on how well keyboard is supported in your app. アプリがゲームパッドとリモコンでうまく動作することを確認する良い方法は、アプリが PC でキーボードを使ってうまく動作するか確認してから、ゲームパッドとリモコンでテストして UI で不十分な箇所を見つけることです。A good way to ensure that your app will work well with gamepad/remote is to make sure that it works well with keyboard on PC, and then test with gamepad/remote to find weak spots in your UI.

ハードウェア ボタンHardware buttons

このドキュメントでは、次の図に示すボタン名を使っています。Throughout this document, buttons will be referred to by the names given in the following diagram.

ゲームパッドとリモコンのボタンの図

図からわかるように、ゲームパッドでサポートされているボタンのいくつかはリモコンでサポートされておらず、逆に、リモコンでサポートされているボタンのいくつかはゲームパッドでサポートされていません。As you can see from the diagram, there are some buttons that are supported on gamepad that are not supported on remote control, and vice versa. 1 つの入力デバイスのみでサポートされているボタンを使って UI の移動を速くすることもできますが、そのようなボタンを重要な操作に使うように設計してしまうと、ユーザーが一部の UI を操作できなくなる可能性があることに注意してください。While you can use buttons that are only supported on one input device to make navigating the UI faster, be aware that using them for critical interactions may create a situation where the user is unable to interact with certain parts of the UI.

次の表に、UWP アプリでサポートされているすべてのハードウェア ボタンと、各ボタンがサポートされている入力デバイスを示します。The following table lists all of the hardware buttons supported by UWP apps, and which input device supports them.

ButtonButton ゲームパッドGamepad リモコンRemote control
A/[選択] ボタンA/Select button Yes Yes
B/[戻る] ボタンB/Back button Yes Yes
方向パッドDirectional pad (D-pad) Yes Yes
メニュー ボタンMenu button Yes Yes
表示ボタンView button Yes Yes
X ボタン、Y ボタンX and Y buttons Yes XNo
左スティックLeft stick Yes XNo
右スティックRight stick Yes いいえNo
左トリガー、右トリガーLeft and right triggers Yes いいえNo
L ボタン、R ボタンLeft and right bumpers Yes XNo
OneGuide ボタンOneGuide button XNo Yes
[音量] ボタンVolume button XNo Yes
チャネル ボタンChannel button XNo Yes
メディア コントロール ボタンMedia control buttons XNo Yes
[ミュート] ボタンMute button XNo Yes

組み込みボタンのサポートBuilt-in button support

UWP は、既存のキーボード入力動作をゲームパッドとリモコンの入力に自動的にマップします。The UWP automatically maps existing keyboard input behavior to gamepad and remote control input. 次の表に、これらの組み込みのマッピングを示します。The following table lists these built-in mappings.

キーボードKeyboard ゲームパッド/リモコンGamepad/remote
方向キーArrow keys 方向パッド (ゲームパッドの左スティックも同じ)D-pad (also left stick on gamepad)
Space キーSpacebar A/[選択] ボタンA/Select button
以下にEnter A/[選択] ボタンA/Select button
Esc キーEscape B/[戻る] ボタン*B/Back button*

*どちらの場合、 KeyDownKeyUp B ボタンのイベントは、アプリによって処理されます、 SystemNavigationManager.BackRequestedをする、イベントは発生します。背面に、アプリ内のナビゲーションが発生します。*When neither the KeyDown nor KeyUp events for the B button are handled by the app, the SystemNavigationManager.BackRequested event will be fired, which should result in back navigation within the app. ただし、次のコード スニペットのように、これを自分で実装する必要があります。However, you have to implement this yourself, as in the following code snippet:

// This code goes in the MainPage class

public MainPage()
{
    this.InitializeComponent();

    // Handling Page Back navigation behaviors
    SystemNavigationManager.GetForCurrentView().BackRequested +=
        SystemNavigationManager_BackRequested;
}

private void SystemNavigationManager_BackRequested(
    object sender,
    BackRequestedEventArgs e)
{
    if (!e.Handled)
    {
        e.Handled = this.BackRequested();
    }
}

public Frame AppFrame { get { return this.Frame; } }

private bool BackRequested()
{
    // Get a hold of the current frame so that we can inspect the app back stack
    if (this.AppFrame == null)
        return false;

    // Check to see if this is the top-most page on the app back stack
    if (this.AppFrame.CanGoBack)
    {
        // If not, set the event to handled and go back to the previous page in the
        // app.
        this.AppFrame.GoBack();
        return true;
    }
    return false;
}

注意

B ボタンを使用して戻る場合は、UI に [戻る] ボタンを表示しないでください。If the B button is used to go back, then don't show a back button in the UI. ナビゲーション ビュー を使用している場合、[戻る] ボタンは自動的に非表示になります。If you're using a Navigation view, the back button will be hidden automatically. 前に戻る移動の詳細については、「UWP アプリのナビゲーション履歴と前に戻る移動」をご覧ください。For more information about backwards navigation, see Navigation history and backwards navigation for UWP apps.

Xbox One の UWP アプリでは、メニュー ボタンを押してコンテキスト メニューを開く操作もサポートされています。UWP apps on Xbox One also support pressing the Menu button to open context menus. 詳しくは、「CommandBar と ContextFlyout」をご覧ください。For more information, see CommandBar and ContextFlyout.

アクセラレータのサポートAccelerator support

アクセラレータ ボタンは、UI でナビゲーションを高速化するために使うことができます。Accelerator buttons are buttons that can be used to speed up navigation through a UI. ただし、これらのボタンは特定の入力デバイスにしかない可能性があるため、すべてのユーザーが機能を使用できるとは限らないことに注意してください。However, these buttons may be unique to a certain input device, so keep in mind that not all users will be able to use these functions. 事実、現在 Xbox One で UWP アプリのアクセラレータ機能をサポートしている入力デバイスは、ゲームパッドだけです。In fact, gamepad is currently the only input device that supports accelerator functions for UWP apps on Xbox One.

次の表に、UWP に組み込まれているアクセラレータのサポートと自分で実装することができるアクセラレータのサポートを示します。The following table lists the accelerator support built into the UWP, as well as that which you can implement on your own. 一貫性のあるわかりやすいユーザー エクスペリエンスを提供するために、これらの動作をカスタム UI で利用してください。Utilize these behaviors in your custom UI to provide a consistent and friendly user experience.

操作Interaction キーボード/マウスKeyboard/Mouse ゲームパッドGamepad 組み込み済み:Built-in for: 推奨:Recommended for:
ページ アップ/ダウンPage up/down ページ アップ/ダウンPage up/down 左/右トリガーLeft/right triggers CalendarViewListBoxListViewBaseListViewScrollViewerSelectorLoopingSelectorComboBoxFlipViewCalendarView, ListBox, ListViewBase, ListView, ScrollViewer, Selector, LoopingSelector, ComboBox, FlipView 垂直スクロールをサポートするビューViews that support vertical scrolling
ページの左/右Page left/right なしNone L/R ボタンLeft/right bumpers PivotListBoxListViewBaseListViewScrollViewerSelectorLoopingSelectorFlipViewPivot, ListBox, ListViewBase, ListView, ScrollViewer, Selector, LoopingSelector, FlipView 水平スクロールをサポートするビューViews that support horizontal scrolling
ズーム イン/アウトZoom in/out Ctrl + 正符号 (+)/マイナス記号 (-)Ctrl +/- 左/右トリガーLeft/right triggers なしNone ScrollViewer、拡大縮小をサポートするビューScrollViewer, views that support zooming in and out
ナビゲーション ウィンドウを開く/閉じるOpen/close nav pane なしNone ビューView なしNone ナビゲーション ウィンドウNavigation panes
検索Search なしNone Y ボタンY button なしNone アプリのメインの検索機能へのショートカットShortcut to the main search function in the app
コンテキスト メニューを開くOpen context menu 右クリックRight-click メニュー ボタンMenu button ContextFlyoutContextFlyout コンテキスト メニューContext menus

XY フォーカス ナビゲーションと操作XY focus navigation and interaction

アプリがキーボードの適切なフォーカス ナビゲーションをサポートしている場合、ゲームパッドとリモコンでも適切にサポートされます。If your app supports proper focus navigation for keyboard, this will translate well to gamepad and remote control. 方向キーを使ったナビゲーションは方向パッド (とゲームパッドの左スティック) にマップされ、UI 要素の対話式操作は Enter/[選択] キーにマップされます (「ゲームパッドとリモコン」を参照してください)。Navigation with the arrow keys is mapped to the D-pad (as well as the left stick on gamepad), and interaction with UI elements is mapped to the Enter/Select key (see Gamepad and remote control).

多くのイベントやプロパティがキーボードとゲームパッドの両方で使用されます。キーボードとゲームパッドはいずれも KeyDown イベントと KeyUp イベントを発生させ、IsTabStop="True" プロパティと Visibility="Visible" プロパティを持つコントロール間のみを移動します。Many events and properties are used by both keyboard and gamepad—they both fire KeyDown and KeyUp events, and they both will only navigate to controls that have the properties IsTabStop="True" and Visibility="Visible". キーボードの設計ガイダンスについては、「キーボード操作」をご覧ください。For keyboard design guidance, see Keyboard interactions.

キーボードのサポートが適切に実装されている場合、アプリはかなり適切に機能します。ただし、すべてのシナリオをサポートするためには追加の作業が必要になります。If keyboard support is implemented properly, your app will work reasonably well; however, there may be some extra work required to support every scenario. 最適なユーザー エクスペリエンスを提供するために、アプリ固有のニーズについて考えてください。Think about your app's specific needs to provide the best user experience possible.

重要

マウス モードは、Xbox One で実行されている UWP アプリでは既定で有効です。Mouse mode is enabled by default for UWP apps running on Xbox One. マウス モードを無効にし、XY フォーカス ナビゲーションを有効にするには、Application.RequiresPointerMode=WhenRequested を設定します。To disable mouse mode and enable XY focus navigation, set Application.RequiresPointerMode=WhenRequested.

フォーカスの問題のデバッグDebugging focus issues

FocusManager.GetFocusedElement メソッドによって、現在、どの要素にフォーカスがあるかがわかります。The FocusManager.GetFocusedElement method will tell you which element currently has focus. これは、フォーカス表示の場所が明確ではない場合に便利です。This is useful for situations where the location of the focus visual may not be obvious. この情報は、Visual Studio の出力ウィンドウに次のように記録できます。You can log this information to the Visual Studio output window like so:

page.GotFocus += (object sender, RoutedEventArgs e) =>
{
    FrameworkElement focus = FocusManager.GetFocusedElement() as FrameworkElement;
    if (focus != null)
    {
        Debug.WriteLine("got focus: " + focus.Name + " (" +
            focus.GetType().ToString() + ")");
    }
};

XY ナビゲーションが期待どおりに動作しない場合の一般的な理由には、次の 3 つがあります。There are three common reasons why XY navigation might not work the way you expect:

  • IsTabStop プロパティまたは Visibility プロパティが正しく設定されていません。The IsTabStop or Visibility property is set wrong.
  • フォーカスを取得するコントロールが、実際には想定以上の大きさです。XY ナビゲーションでは、関心のあるものをレンダリングするコントロールの部分だけでなく、コントロールの合計サイズ (ActualWidthActualHeight) が考慮されます。The control getting focus is actually bigger than you think—XY navigation looks at the total size of the control (ActualWidth and ActualHeight), not just the portion of the control that renders something interesting.
  • フォーカス対応コントロールが別のコントロールの上に配置されています。XY ナビゲーションでは、重なり合ったコントロールはサポートされません。One focusable control is on top of another—XY navigation doesn't support controls that are overlapped.

これらの問題を解決しても XY ナビゲーションが引き続き機能しない場合は、「既定のナビゲーションのオーバーライド」で説明されている方法を使って、フォーカスを取得する要素を手動で指定できます。If XY navigation is still not working the way you expect after fixing these issues, you can manually point to the element that you want to get focus using the method described in Overriding the default navigation.

XY ナビゲーションは意図したとおりに動作するが、フォーカス表示が表示されない場合は、次のいずれかの問題が原因である可能性があります。If XY navigation is working as intended but no focus visual is displayed, one of the following issues may be the cause:

  • コントロールを再テンプレート化しましたが、フォーカス表示を含めていませんでした。You re-templated the control and didn't include a focus visual. UseSystemFocusVisuals="True" を設定するか、フォーカス表示を手動で追加します。Set UseSystemFocusVisuals="True" or add a focus visual manually.
  • Focus(FocusState.Pointer) を呼び出してフォーカスを移動しました。You moved the focus by calling Focus(FocusState.Pointer). FocusState パラメーターによって、フォーカス表示の処理を制御できます。The FocusState parameter controls what happens to the focus visual. 一般的には、これを FocusState.Programmatic に設定してください。これにより、フォーカスが以前に表示されていた場合は表示され、以前に非表示であった場合は非表示になります。Generally you should set this to FocusState.Programmatic, which keeps the focus visual visible if it was visible before, and hidden if it was hidden before.

このセクションの残りの部分では、XY ナビゲーションを使用する場合の一般的な設計上の課題と、その解決方法のいくつかについて詳しく説明します。The rest of this section goes into detail about common design challenges when using XY navigation, and offers several ways to solve them.

アクセスできない UIInaccessible UI

XY フォーカス ナビゲーションはユーザーの動作を上下左右への移動に制限しているため、UI の一部にアクセスできなくなる可能性があります。Because XY focus navigation limits the user to moving up, down, left, and right, you may end up with scenarios where parts of the UI are inaccessible. 次の図は、XY フォーカス ナビゲーションでサポートされていない UI レイアウトの例を示します。The following diagram illustrates an example of the kind of UI layout that XY focus navigation doesn't support. 垂直および水平方向ナビゲーションが優先され、中央の要素はフォーカスを獲得できるほど優先順位が高くないため、ゲームパッド/リモコンを使って中央の要素にアクセスできないことに注意してください。Note that the element in the middle is not accessible by using gamepad/remote because the vertical and horizontal navigation will be prioritized and the middle element will never be high enough priority to get focus.

4 隅の要素と、アクセスできない中央の要素

何らかの理由で UI の配置を変更できない場合は、次のセクションで説明する手法のいずれかを使って、フォーカスの既定の動作をオーバーライドします。If for some reason rearranging the UI is not possible, use one of the techniques discussed in the next section to override the default focus behavior.

既定のナビゲーションのオーバーライド Overriding the default navigation

ユニバーサル Windows プラットフォームは、方向パッド/左スティックによるナビゲーションがユーザーにとって意味のあるものであることを確認しようとしますが、アプリの目的に沿って最適化された動作を保証することはできません。While the Universal Windows Platform tries to ensure that D-pad/left stick navigation makes sense to the user, it cannot guarantee behavior that is optimized for your app's intentions. ナビゲーションがアプリ用に最適化されていることを確認する最善の方法は、ゲームパッドを使ってナビゲーションをテストし、アプリのシナリオにとって適切な方法でユーザーがすべての UI 要素にアクセスできることを確認することです。The best way to ensure that navigation is optimized for your app is to test it with a gamepad and confirm that every UI element can be accessed by the user in a manner that makes sense for your app's scenarios. アプリのシナリオで、提供されている XY フォーカス ナビゲーションでは実現できない動作が必要となる場合は、次のセクションの推奨事項に従ったり、動作をオーバーライドして適切な項目にフォーカスを設定したりことを検討してください。In case your app's scenarios call for a behavior not achieved through the XY focus navigation provided, consider following the recommendations in the following sections and/or overriding the behavior to place the focus on a logical item.

次のコード スニペットは、XY フォーカス ナビゲーションの動作をオーバーライドする方法を示しています。The following code snippet shows how you might override the XY focus navigation behavior:

<StackPanel>
    <Button x:Name="MyBtnLeft"
            Content="Search" />
    <Button x:Name="MyBtnRight"
            Content="Delete"/>
    <Button x:Name="MyBtnTop"
            Content="Update" />
    <Button x:Name="MyBtnDown"
            Content="Undo" />
    <Button Content="Home"  
            XYFocusLeft="{x:Bind MyBtnLeft}"
            XYFocusRight="{x:Bind MyBtnRight}"
            XYFocusDown="{x:Bind MyBtnDown}"
            XYFocusUp="{x:Bind MyBtnTop}" />
</StackPanel>

この場合、フォーカスが Home ボタンにある状態でユーザーが左に移動すると、フォーカスは MyBtnLeft ボタンに移ります。ユーザーが右に移動すると、フォーカスは MyBtnRight ボタンに移ります (以下、同様です)。In this case, when focus is on the Home button and the user navigates to the left, focus will move to the MyBtnLeft button; if the user navigates to the right, focus will move to the MyBtnRight button; and so on.

フォーカスが特定の方向でコントロールから移動することを防ぐには、XYFocus* プロパティを使ってそのコントロールで方向を指定します。To prevent the focus from moving from a control in a certain direction, use the XYFocus* property to point it at the same control:

<Button Name="HomeButton"  
        Content="Home"  
        XYFocusLeft ="{x:Bind HomeButton}" />

これらの XYFocus プロパティを使用して、コントロールの親は、次のフォーカスの候補がビジュアル ツリー外である場合、子のナビゲーションを強制することができます。ただし、フォーカスを持つ子が同じ XYFocus プロパティを使用している場合を除きます。Using these XYFocus properties, a control parent can also force the navigation of its children when the next focus candidate is out of its visual tree, unless the child who has the focus uses the same XYFocus property.

<StackPanel Orientation="Horizontal" Margin="300,300">
    <UserControl XYFocusRight="{x:Bind ButtonThree}">
        <StackPanel>
            <Button Content="One"/>
            <Button Content="Two"/>
        </StackPanel>
    </UserControl>
    <StackPanel>
        <Button x:Name="ButtonThree" Content="Three"/>
        <Button Content="Four"/>
    </StackPanel>
</StackPanel>

上記のサンプルでは、フォーカスが Button Two にあり、ユーザーが右に移動した場合、最適なフォーカスの候補は Button Four ですが、フォーカスは Button Three に移動します。これは、親の UserControl で、ビジュアル ツリー外である場合はその場所に移動するように強制されているためです。In the sample above, if the focus is on Button Two and the user navigates to the right, the best focus candidate is Button Four; however, the focus is moved to Button Three because the parent UserControl forces it to navigate there when it is out of its visual tree.

最小回数のクリック数Path of least clicks

ユーザーが最も一般的なタスクを最小クリック回数で実行できるようにしてください。Try to allow the user to perform the most common tasks in the least number of clicks. 次の例では、(最初にフォーカスがある) 再生ボタンとよく使われる要素の間に TextBlock が配置されているため、優先順位の高いタスクの間に不要な要素が入り込んでいます。In the following example, the TextBlock is placed between the Play button (which initially gets focus) and a commonly used element, so that an unnecessary element is placed in between priority tasks.

ナビゲーションのベスト プラクティスは最小限のクリックのパスを提供すること

次の例では、TextBlock再生ボタンの上に配置されています。In the following example, the TextBlock is placed above the Play button instead. 優先順位の高いタスクの間に不要な要素が配置されないように UI を並べ替えるだけで、アプリの操作性が大幅に向上します。Simply rearranging the UI so that unnecessary elements are not placed in between priority tasks will greatly improve your app's usability.

優先順位の高いタスクの間から再生ボタンの上に移動した TextBlock

CommandBar と ContextFlyoutCommandBar and ContextFlyout

使用する場合、 CommandBarで説明したように、一覧をスクロールの問題に留意問題。UI 要素が時間の長いスクロール リスト/グリッドの後にあるします。When using a CommandBar, keep in mind the issue of scrolling through a list as mentioned in Problem: UI elements located after long scrolling list/grid. 次の図は、CommandBar がリストやグリッドの下にある UI レイアウトです。The following image shows a UI layout with the CommandBar on the bottom of a list/grid. ユーザーはリストやグリッド全体をスクロールしなければ CommandBar に到達できません。The user would need to scroll all the way down through the list/grid to reach the CommandBar.

リストやグリッドの下にある CommandBar

配置する場合、 CommandBar リスト/グリッドでしょうか。What if you put the CommandBar above the list/grid? リストやグリッドを下へスクロールしたユーザーは CommandBar に戻るために上へスクロールして戻る必要がありますが、前の構成よりもナビゲーションはわずかに少なくなります。While a user who scrolled down the list/grid would have to scroll back up to reach the CommandBar, it is slightly less navigation than the previous configuration. ただし、これは、アプリの最初のフォーカスが CommandBar の横または上に配置されている場合です。最初のフォーカスがリストやグリッドの下にある場合、この方法はうまく機能しません。Note that this is assuming that your app's initial focus is placed next to or above the CommandBar; this approach won't work as well if the initial focus is below the list/grid. これらの CommandBar 項目があまりアクセスする必要のないグローバルな操作の項目の場合 (同期 ボタンなど)、リストやグリッドの上に置いても問題ありません。If these CommandBar items are global action items that don't have to be accessed very often (such as a Sync button), it may be acceptable to have them above the list/grid.

CommandBar の項目を縦方向に重ねることはできませんが、UI レイアウトで適切な場合はスクロール方向と異なる向き (たとえば、縦方向にスクロールするリストの左右や、横方向にスクロールするリストの上下) に項目を配置することも検討できます。While you can't stack a CommandBar's items vertically, placing them against the scroll direction (for example, to the left or right of a vertically scrolling list, or the top or bottom of a horizontally scrolling list) is another option you may want to consider if it works well for your UI layout.

ユーザーが項目に簡単にアクセスできる必要がある CommandBar をアプリで使う場合、それらの項目を ContextFlyout 内に配置して CommandBar から削除することを検討できます。If your app has a CommandBar whose items need to be readily accessible by users, you may want to consider placing these items inside a ContextFlyout and removing them from the CommandBar. ContextFlyout プロパティであるUIElementであり、コンテキスト メニューその要素に関連付けられています。ContextFlyout is a property of UIElement and is the context menu associated with that element. PC では、ContextFlyout を持つ要素を右クリックすると、そのコンテキスト メニューがポップアップ表示されます。On PC, when you right-click on an element with a ContextFlyout, that context menu will pop up. Xbox One では、このような要素にフォーカスがあるときにメニュー ボタンを押すと、コンテキスト メニューがポップアップ表示されます。On Xbox One, this will happen when you press the Menu button while the focus is on such an element.

UI レイアウトの問題UI layout challenges

XY フォーカス ナビゲーションの特性により、一部の UI レイアウトは設定が難しく、状況ごとに評価が必要です。Some UI layouts are more challenging due to the nature of XY focus navigation, and should be evaluated on a case-by-case basis. "正解" は 1 つではなく、どの解決策を選ぶかはアプリのニーズ次第ですが、優れたテレビ エクスペリエンスを提供するために利用できる方法がいくつかあります。While there is no single "right" way, and which solution you choose is up to your app's specific needs, there are some techniques that you can employ to make a great TV experience.

このことをさらに理解するために、架空のアプリでこれらの問題のいくつかとそれを克服する手法を見てみましょう。To understand this better, let's look at an imaginary app that illustrates some of these issues and techniques to overcome them.

注意

この架空のアプリは、UI の問題とその解決策を示すことを目的としており、実際のアプリの最適なユーザー エクスペリエンスを示すものではありません。This fake app is meant to illustrate UI problems and potential solutions to them, and is not intended to show the best user experience for your particular app.

次の架空の不動産アプリは、販売中の家の一覧、地図、不動産の説明などの情報を表示するものです。The following is an imaginary real estate app which shows a list of houses available for sale, a map, a description of a property, and other information. このアプリでは、次の方法で克服できる 3 つの課題が生じます。This app poses three challenges that you can overcome by using the following techniques:

架空の不動産アプリ

問題: 時間スクロール リスト/グリッドの後にある UI 要素 Problem: UI elements located after long scrolling list/grid

次の図に示すプロパティの ListView は、非常に長いスクロールをするリストです。The ListView of properties shown in the following image is a very long scrolling list. この ListViewエンゲージメントが要求されない場合、ユーザーがリストに移動するとフォーカスはリストの最初の項目に設定されます。If engagement is not required on the ListView, when the user navigates to the list, focus will be placed on the first item in the list. ユーザーが [前へ] または [次へ] ボタンにアクセスするには、リスト内のすべての項目を移動する必要があります。For the user to reach the Previous or Next button, they must go through all the items in the list. このような、リスト全体を移動する必要がある設計は、ユーザーがそのエクスペリエンスを許容できるほどリストが短くなければ煩わしくなるため、その他のオプションを検討することをお勧めします。In cases like this where requiring the user to traverse the entire list is painful—that is, when the list is not short enough for this experience to be acceptable—you may want to consider other options.

不動産アプリ: 50 個の項目があるリストは、下のボタンに移動するまでに 51 回のクリックが必要

解決策Solutions

UI の再配置 UI rearrange

最初のフォーカスがページの下部に設定されない限り、通常、長いスクロールをするリストの上に配置した UI 要素の方が、下に配置した場合よりも簡単にアクセスできます。Unless your initial focus is placed at the bottom of the page, UI elements placed above a long scrolling list are typically more easily accessible than if placed below. この新しいレイアウトが他のデバイスでも有効な場合、Xbox One のためだけに UI に特別な変更を行うのでなく、すべてのデバイス ファミリ用にレイアウトを変更する方が、低コストのアプローチになる可能性があります。If this new layout works for other devices, changing the layout for all device families instead of doing special UI changes just for Xbox One might be a less costly approach. また、スクロール方向と異なる向き (縦方向にスクロールするリストでは横方向、横方向にスクロールするリストでは縦方向) に UI 要素を配置すると、アクセシビリティがさらに向上します。Additionally, placing UI elements against the scrolling direction (that is, horizontally to a vertically scrolling list, or vertically to a horizontally scrolling list) will make for even better accessibility.

不動産アプリ: 長いスクロールをするリストの上にボタンを配置

フォーカス engagement Focus engagement

エンゲージメントが要求される場合、ListView 全体が 1 つのフォーカスの対象になります。When engagement is required, the entire ListView becomes a single focus target. ユーザーはリストの内容をバイパスして、フォーカス可能な次の要素にアクセスできます。The user will be able to bypass the contents of the list to get to the next focusable element. エンゲージメントをサポートしているコントロールとその使用方法について詳しくは、「フォーカス エンゲージメント」をご覧ください。Read more about what controls support engagement and how to use them in Focus engagement.

不動産アプリ: エンゲージメントの要求を設定して 1 クリックのみで [前へ]/[次へ] ボタンにアクセス

問題: フォーカスを設定できる任意の要素を使用せずに ScrollViewerProblem: ScrollViewer without any focusable elements

XY フォーカス ナビゲーションは、フォーカス可能な UI 要素に 1 回で移動できることを前提としているため、フォーカス可能な要素を 1 つも含まない ScrollViewer (この例ではテキストのみの要素) は、ユーザーが ScrollViewer のすべてのコンテンツを表示することができない状況を招く可能性があります。Because XY focus navigation relies on navigating to one focusable UI element at a time, a ScrollViewer that doesn't contain any focusable elements (such as one with only text, as in this example) may cause a scenario where the user isn't able to view all of the content in the ScrollViewer. この問題の解決策とその他の関連するシナリオについては、「フォーカス エンゲージメント」をご覧ください。For solutions to this and other related scenarios, see Focus engagement.

不動産アプリ:テキストのみのある ScrollViewer

問題: 無料のスクロール UIProblem: Free-scrolling UI

描画面や次の例にある地図など、アプリに自由スクロール UI が必要な場合、XY フォーカス ナビゲーションのみでは機能しません。When your app requires a freely scrolling UI, such as a drawing surface or, in this example, a map, XY focus navigation simply doesn't work. このような場合は、マウス モードをオンにして、ユーザーが UI 要素内を自由に移動できるようにします。In such cases, you can turn on mouse mode to allow the user to navigate freely inside a UI element.

マウス モードを使う地図の UI 要素

[マウス モード]Mouse mode

XY フォーカス ナビゲーションと対話式操作」で説明するとおり、Xbox One でフォーカスを移動するには、XY ナビゲーション システムを使います。ユーザーは、フォーカスを上下左右に動かしてコントロール間を移動できます。As described in XY focus navigation and interaction, on Xbox One the focus is moved by using an XY navigation system, allowing the user to shift the focus from control to control by moving up, down, left, and right. ただし、WebViewMapControl などの一部のコントロールでは、ユーザーがコントロールの境界内でポインターを自由に動かせる、マウスのような対話式操作が必要です。However, some controls, such as WebView and MapControl, require a mouse-like interaction where users can freely move the pointer inside the boundaries of the control. また、ユーザーがページ全体でポインターを動かせるようにして、PC でマウスを使うときと同じようなエクスペリエンスをゲームパッド/リモコンで体験できるようにする必要があるアプリもあります。There are also some apps where it makes sense for the user to be able to move the pointer across the entire page, having an experience with gamepad/remote similar to what users can find on a PC with a mouse.

このような場合、ページ全体に対して、または、ページ内のいずれかのコントロールに対して、ポインター (マウス モード) を要求する必要があります。For these scenarios, you should request a pointer (mouse mode) for the entire page, or on a control inside a page. たとえば、アプリのページで WebView コントロールを使い、そのコントロール内ではマウス モード、それ以外はすべて XY フォーカス ナビゲーションを使うことができます。For example, your app could have a page that has a WebView control that uses mouse mode only while inside the control, and XY focus navigation everywhere else. ポインターを要求する場合、コントロールまたはページが有効になったとき、またはページにフォーカスがあるときのどちらでポインターを要求するかを指定できます。To request a pointer, you can specify whether you want it when a control or page is engaged or when a page has focus.

注意

コントロールにフォーカスがある場合にポインターを要求することはサポートされていません。Requesting a pointer when a control gets focus is not supported.

Xbox One で実行されている XAML アプリとホスト型 Web アプリのいずれの場合も、マウス モードがアプリ全体で既定で有効になっています。For both XAML and hosted web apps running on Xbox One, mouse mode is turned on by default for the entire app. これを無効にして、XY ナビゲーション用にアプリを最適化することを強くお勧めします。It is highly recommended that you turn this off and optimize your app for XY navigation. これを行うには、Application.RequiresPointerMode プロパティを WhenRequested に設定して、コントロールやページから呼び出された場合にのみマウス モードを有効にします。To do this, set the Application.RequiresPointerMode property to WhenRequested so that you only enable mouse mode when a control or page calls for it.

XAML アプリでこれを行うには、App クラスで次のコードを使います。To do this in a XAML app, use the following code in your App class:

public App()
{
    this.InitializeComponent();
    this.RequiresPointerMode =
        Windows.UI.Xaml.ApplicationRequiresPointerMode.WhenRequested;
    this.Suspending += OnSuspending;
}

HTML/JavaScript のサンプル コードなどの詳細情報については、「マウス モードを無効にする方法」をご覧ください。For more information, including sample code for HTML/JavaScript, see How to disable mouse mode.

次の図は、マウス モードでのゲームパッド/リモコンのボタンのマッピングを示しています。The following diagram shows the button mappings for gamepad/remote in mouse mode.

マウス モードでのゲームパッド/リモコンのボタンのマッピング

注意

マウス モードは Xbox One のゲームパッド/リモコンのみでサポートされています。Mouse mode is only supported on Xbox One with gamepad/remote. その他のデバイス ファミリや入力タイプでは自動的に無視されます。On other device families and input types it is silently ignored.

コントロールまたはページでマウス モードをアクティブ化するには、そのコントロールまたはページで RequiresPointer プロパティを使います。Use the RequiresPointer property on a control or page to activate mouse mode on it. このプロパティには Never (既定値)、WhenEngagedWhenFocused の 3 つの値があります。This property has three possible values: Never (the default value), WhenEngaged, and WhenFocused.

コントロールでのマウス モードのアクティブ化Activating mouse mode on a control

RequiresPointer="WhenEngaged" の状態でユーザーがコントロールを使うと、ユーザーが解除するまでコントロールでマウス モードがアクティブ化されます。When the user engages a control with RequiresPointer="WhenEngaged", mouse mode is activated on the control until the user disengages it. 次のコード スニペットは、使用時にマウス モードをアクティブ化する単純な MapControl を示します。The following code snippet demonstrates a simple MapControl that activates mouse mode when engaged:

<Page>
    <Grid>
        <MapControl IsEngagementRequired="true"
                    RequiresPointer="WhenEngaged"/>
    </Grid>
</Page>

注意

コントロールを使うときにマウス モードをアクティブ化する場合、IsEngagementRequired="true" も指定する必要があります。そうしないと、マウス モードがアクティブ化されません。If a control activates mouse mode when engaged, it must also require engagement with IsEngagementRequired="true"; otherwise, mouse mode will never be activated.

コントロールがマウス モードになると、そのコントロールの入れ子になったコントロールもマウス モードになります。When a control is in mouse mode, its nested controls will be in mouse mode as well. その子の要求モードは無視されます。親をマウス モードにして子はマウス モードにしないということはできません。The requested mode of its children will be ignored—it's impossible for a parent to be in mouse mode but a child not to be.

また、コントロールの要求モードはフォーカスがあるときにのみ調べられます。そのため、フォーカスがある間はモードは動的に変更されません。Additionally, the requested mode of a control is only inspected when it gets focus, so the mode won't change dynamically while it has focus.

ページでのマウス モードのアクティブ化Activating mouse mode on a page

ページに RequiresPointer="WhenFocused" プロパティを設定している場合、フォーカスがあるとページ全体に対してマウス モードがアクティブ化されます。When a page has the property RequiresPointer="WhenFocused", mouse mode will be activated for the whole page when it gets focus. 次のコード スニペットは、ページでこのプロパティを設定する方法を示しています。The following code snippet demonstrates giving a page this property:

<Page RequiresPointer="WhenFocused">
    ...
</Page>

注意

WhenFocused の値は Page オブジェクトでのみサポートされています。The WhenFocused value is only supported on Page objects. コントロールにこの値を設定しようとすると、例外がスローされます。If you try to set this value on a control, an exception will be thrown.

全画面コンテンツのマウス モードの無効化Disabling mouse mode for full screen content

通常、全画面表示でビデオやその他の種類のコンテンツを表示する場合、ユーザーの注意をそらす可能性があるため、カーソルを非表示にします。Usually when displaying video or other types of content in full screen, you will want to hide the cursor because it can distract the user. このシナリオは、アプリの他の部分ではマウス モードを使用するが、全画面コンテンツを表示するときはマウス モードを無効にする必要がある場合に発生します。This scenario occurs when the rest of the app uses mouse mode, but you want to turn it off when showing full screen content. これを実現するには、全画面コンテンツを独自の Page に配置し、次の手順に従います。To accomplish this, put the full screen content on its own Page, and follow the steps below.

  1. App オブジェクトで、RequiresPointerMode="WhenRequested" を設定します。In the App object, set RequiresPointerMode="WhenRequested".
  2. 全画面表示の Page除くすべての Page オブジェクトで、RequiresPointer="WhenFocused" を設定します。In every Page object except for the full screen Page, set RequiresPointer="WhenFocused".
  3. 全画面表示の Page で、RequiresPointer="Never" を設定します。For the full screen Page, set RequiresPointer="Never".

これにより、全画面コンテンツを表示するときに、カーソルは表示されません。This way, the cursor will never appear when showing full screen content.

フォーカスの視覚効果Focus visual

フォーカス表示とは、現在フォーカスがある UI 要素を囲む境界線のことです。The focus visual is the border around the UI element that currently has focus. この機能を使ってユーザーの現在位置をわかりやすく示すことで、ユーザーが自分の位置を見失わずに UI を移動しやすくなります。This helps orient the user so that they can easily navigate your UI without getting lost.

フォーカス表示は、表示が更新され、多数のカスタマイズ オプションが追加されているため、開発者は 1 つのフォーカス表示を用意すれば、PC と Xbox One、さらにはキーボードやゲームパッド/リモコンをサポートするその他の Windows 10 デバイスで正しく動作することを期待できます。With a visual update and numerous customization options added to focus visual, developers can trust that a single focus visual will work well on PCs and Xbox One, as well as on any other Windows 10 devices that support keyboard and/or gamepad/remote.

ただし、異なるプラットフォームで同じフォーカス表示を使うことはできますが、10 フィート エクスペリエンスではフォーカス表示の利用状況がやや異なります。While the same focus visual can be used across different platforms, the context in which the user encounters it is slightly different for the 10-foot experience. この場合、ユーザーはテレビ画面全体に十分注意を払っていないと想定し、ユーザーが表示を探す際にフラストレーションを感じないように、現在フォーカスのある要素を常に明確に表示することが重要です。You should assume that the user is not paying full attention to the entire TV screen, and therefore it is important that the currently focused element is clearly visible to the user at all times to avoid the frustration of searching for the visual.

また、フォーカス表示は、ゲームパッドやリモコンを使うときは既定で表示されますが、キーボードを使うときは既定で表示されないことに注意してください。It is also important to keep in mind that the focus visual is displayed by default when using a gamepad or remote control, but not a keyboard. したがって、実装していなくても Xbox One でアプリを実行すると表示されます。Thus, even if you don't implement it, it will appear when you run your app on Xbox One.

フォーカス表示の初期設定Initial focus visual placement

アプリを起動したりページに移動したりするときは、ユーザーがアクションを実行する最初の要素として意味のある UI 要素にフォーカスを設定します。When launching an app or navigating to a page, place the focus on a UI element that makes sense as the first element on which the user would take action. たとえば、フォト アプリではギャラリー内の最初の項目にフォーカスを設定し、音楽アプリで曲の詳細ビューに移動する場合は音楽を再生しやすいように再生ボタンにフォーカスを設定できます。For example, a photo app may place focus on the first item in the gallery, and a music app navigated to a detailed view of a song might place focus on the play button for ease of playing music.

初期フォーカスは、アプリの左上 (右から左へ移動する場合は右上) の領域に設定するようにしてください。Try to put initial focus in the top left region of your app (or top right for a right-to-left flow). 通常、アプリのコンテンツ フローはそこから開始されるため、ほとんどのユーザーは最初にその隅を意識する傾向があります。Most users tend to focus on that corner first because that's where app content flow generally begins.

フォーカスの明確な表示Making focus clearly visible

ユーザーがフォーカスを探さなくても前回の終了位置を選べるように、1 つのフォーカス表示が常に画面に表示されているようにします。One focus visual should always be visible on the screen so that the user can pick up where they left off without searching for the focus. 同様に、フォーカス可能な項目を常に画面上に表示する必要があります。たとえば、フォーカス可能な要素がない、テキストのみのポップアップを使わないでください。Similarly, there should be a focusable item onscreen at all times—for example, don't use pop-ups with only text and no focusable elements.

このルールの例外は、ビデオの視聴や画像の表示などの全画面表示エクスペリエンスです。この場合、フォーカス表示を行うことは適切ではありません。An exception to this rule would be for full-screen experiences, such as watching videos or viewing images, in which cases it would not be appropriate to show the focus visual.

表示フォーカスReveal focus

表示フォーカスは、ユーザーがゲームパッドやキーボードのフォーカスをフォーカス可能な要素 (ボタンなど) に移動したときに、その要素の境界線をアニメーション化する発光効果です。Reveal focus is a lighting effect that animates the border of focusable elements, such as a button, when the user moves gamepad or keyboard focus to them. フォーカス対象要素の境界線周囲でグローをアニメーション化すると、表示フォーカスにより、フォーカスの位置とフォーカスの方向を把握しやすくなります。By animating the glow around the border of the focused elements, Reveal focus gives users a better understanding of where focus is and where focus is going.

既定では、表示フォーカスは無効になっています。Reveal focus is off by default. 10 フィート エクスペリエンスの場合、アプリ コンストラクターで Application.FocusVisualKind プロパティ を設定して表示フォーカスにオプトインする必要があります。For 10 foot experiences you should opt-in to reveal focus by setting the Application.FocusVisualKind property in your app constructor.

    if(AnalyticsInfo.VersionInfo.DeviceFamily == "Windows.Xbox")
    {
        this.FocusVisualKind = FocusVisualKind.Reveal;
    }

詳しくは、表示フォーカス のガイダンスをご覧ください。For more information see the guidance for Reveal focus.

フォーカスの表示のカスタマイズCustomizing the focus visual

フォーカス表示をカスタマイズする場合は、各コントロールのフォーカス表示に関連するプロパティを変更します。If you'd like to customize the focus visual, you can do so by modifying the properties related to the focus visual for each control. アプリのパーソナル設定に活用できるこのようなプロパティはいくつかあります。There are several such properties that you can take advantage of to personalize your app.

表示状態を使って独自のフォーカス表示を描画することにより、システムが提供するフォーカス表示を除外することもできます。You can even opt out of the system-provided focus visuals by drawing your own using visual states. 詳しくは、「VisualState」をご覧ください。To learn more, see VisualState.

簡易非表示オーバーレイLight dismiss overlay

ユーザーが現在ゲーム コントローラーまたはリモコンで操作している UI 要素にユーザーの注意を引きつけるために、アプリが Xbox One で実行されている場合は、UWP ではポップアップ UI 以外の領域をカバーする「スモーク」レイヤーが自動的に追加されます。To call the user's attention to the UI elements that the user is currently manipulating with the game controller or remote control, the UWP automatically adds a "smoke" layer that covers areas outside of the popup UI when the app is running on Xbox One. このための追加作業は必要ありませんが、UI を設計する際に留意してください。This requires no extra work, but is something to keep in mind when designing your UI. いずれかの FlyoutBaseLightDismissOverlayMode プロパティを設定して、スモーク レイヤーを有効または無効にすることができます。既定の設定は Auto で、Xbox では有効になり、その他の場所では無効になります。You can set the LightDismissOverlayMode property on any FlyoutBase to enable or disable the smoke layer; it defaults to Auto, meaning that it is enabled on Xbox and disabled elsewhere. 詳しくは、「モーダルと簡易非表示」をご覧ください。For more information, see Modal vs light dismiss.

フォーカス エンゲージメントFocus engagement

フォーカス エンゲージメントは、ゲームパッドやリモコンでアプリを操作しやすくするためのものです。Focus engagement is intended to make it easier to use a gamepad or remote to interact with an app.

注意

フォーカス エンゲージメントを設定しても、キーボードなどの他の入力デバイスには影響しません。Setting focus engagement does not impact keyboard or other input devices.

FrameworkElement オブジェクトのプロパティ IsFocusEngagementEnabledTrue に設定すると、コントロールがフォーカス エンゲージメントを要求するよう設定されます。When the property IsFocusEngagementEnabled on a FrameworkElement object is set to True, it marks the control as requiring focus engagement. この場合、コントロールを "獲得" して操作するには、ユーザーが A/[選択] ボタンをクリックする必要があります。This means that the user must press the A/Select button to "engage" the control and interact with it. 終了したら、B/[戻る] ボタンをクリックしてコントロールのエンゲージメントを解除すると、コントロールから移動できるようになります。When they are finished, they can press the B/Back button to disengage the control and navigate out of it.

注意

IsFocusEngagementEnabled は新しい API で、まだ文書化されていません。IsFocusEngagementEnabled is a new API and not yet documented.

フォーカスのトラップFocus trapping

フォーカスのトラップとは、ユーザーがアプリの UI を移動しようとしているときにコントロール内に "捕まる" ことで、そのコントロールの外に移動することが困難または不可能になることです。Focus trapping is what happens when a user attempts to navigate an app's UI but becomes "trapped" within a control, making it difficult or even impossible to move outside of that control.

次の例では、フォーカスのトラップが発生する UI を示します。The following example shows UI that creates focus trapping.

水平方向のスライダーの左右のボタン

ユーザーが左のボタンから右のボタンに移動する場合、方向パッド/左スティックの右を 2 回クリックするだけでよいと考えることは論理的です。If the user wants to navigate from the left button to the right button, it would be logical to assume that all they'd have to do is press right on the D-pad/left stick twice. しかし、Slider がエンゲージメントを必要としない場合、ユーザーが最初に右に押したときにフォーカスは Slider に移動し、もう一度右に押したときに Slider のハンドルが右に移動します。However, if the Slider doesn't require engagement, the following behavior would occur: when the user presses right the first time, focus would shift to the Slider, and when they press right again, the Slider's handle would move to the right. ユーザーはハンドルを右に動かし続けるだけで、ボタンに移ることはできません。The user would keep moving the handle to the right and wouldn't be able to get to the button.

この問題を回避する方法はいくつかあります。There are several approaches to getting around this issue. その 1 つは、「XY フォーカス ナビゲーションと操作」の不動産アプリで [前へ] ボタンと [次へ] ボタンの位置を ListView の上に変更する例のように、別のレイアウトを設計することです。One is to design a different layout, similar to the real estate app example in XY focus navigation and interaction where we relocated the Previous and Next buttons above the ListView. 次の図のように、水平方向ではなく垂直方向にコントロールを重ねて配置すると、問題が解決します。Stacking the controls vertically instead of horizontally as in the following image would solve the problem.

水平方向のスライダーの上下のボタン

これでユーザーは期待どおり、方向パッド/左スティックを上下に押して各コントロールに移動でき、Slider にフォーカスがあるときは左右に押して Slider ハンドルを動かすことができます。Now the user can navigate to each of the controls by pressing up and down on the D-pad/left stick, and when the Slider has focus, they can press left and right to move the Slider handle, as expected.

この問題を解決するためのもう 1 つの方法は、Slider でエンゲージメントを要求することです。Another approach to solving this problem is to require engagement on the Slider. IsFocusEngagementEnabled="True" を設定すると、次の動作が発生します。If you set IsFocusEngagementEnabled="True", this will result in the following behavior.

ユーザーが右側のボタンに移動できるように、スライダーでフォーカス エンゲージメントを要求する

Slider でフォーカス エンゲージメントを要求すると、ユーザーは方向パッド/左スティックを右に 2 回押すだけで右側のボタンに移動できます。When the Slider requires focus engagement, the user can get to the button on the right simply by pressing right on the D-pad/left stick twice. この解決策は、UI の調整なしで予期する動作を実現できるので便利です。This solution is great because it requires no UI adjustment and produces the expected behavior.

項目コントロールItems controls

Slider コントロール以外にもエンゲージメントを要求できるコントロールがあります。Aside from the Slider control, there are other controls which you may want to require engagement, such as:

Slider コントロールと異なり、これらのコントロールはフォーカスを捕捉しませんが、大量のデータを含めると操作性の問題が生じる可能性があります。Unlike the Slider control, these controls don't trap focus within themselves; however, they can cause usability issues when they contain large amounts of data. 次の例は、大量のデータが含まれる ListView です。The following is an example of a ListView that contains a large amount of data.

大量のデータと上下のボタンが含まれる ListView

Slider の例と同様に、ゲームパッド/リモコンで上のボタンから下のボタンに移動してみましょう。Similar to the Slider example, let's try to navigate from the button at the top to the button at the bottom with a gamepad/remote. 上ボタンにフォーカスがある状態で方向パッド/スティックを押すと、ListView の最初の項目 ("Item 1") にフォーカスが設定されます。Starting with focus on the top button, pressing down on the D-pad/stick will place the focus on the first item in the ListView ("Item 1"). ユーザーがもう一度押すと、下にあるボタンではなく、一覧の次の項目がフォーカスを獲得します。When the user presses down again, the next item in the list gets focus, not the button on the bottom. ボタンに移動するには、ユーザーは ListView のすべての項目を移動していく必要があります。To get to the button, the user must navigate through every item in the ListView first. ListView に大量のデータが含まれている場合は、この操作に手間がかかり、最適なユーザー エクスペリエンスになりません。If the ListView contains a large amount of data, this could be inconvenient and not an optimal user experience.

この問題を解決するには、ListView でプロパティ IsFocusEngagementEnabled="True" を設定し、エンゲージメントを要求します。To solve this problem, set the property IsFocusEngagementEnabled="True" on the ListView to require engagement on it. この結果、ユーザーは下に押すだけで ListView まで迅速にスキップできます。This will allow the user to quickly skip over the ListView by simply pressing down. ただし、一覧にエンゲージメントを設定しないと、一覧をスクロールしたり、一覧から項目を選んだりすることはできません。エンゲージメントを設定するには、フォーカスがある状態で A/[選択] ボタンを押します。エンゲージメントを解除するには、B/[戻る] ボタンを押します。However, they will not be able to scroll through the list or choose an item from it unless they engage it by pressing the A/Select button when it has focus, and then pressing the B/Back button to disengage.

エンゲージメントが要求される ListView

ScrollViewerScrollViewer

これらのコントロールと少し異なる点は、ScrollViewer です。ScrollViewer には、考慮すべき独自の Quirk があります。Slightly different from these controls is the ScrollViewer, which has its own quirks to consider. フォーカス可能なコンテンツを含む ScrollViewer がある場合、ScrollViewer に移動すると既定でフォーカス可能なコンテンツ間を移動できます。If you have a ScrollViewer with focusable content, by default navigating to the ScrollViewer will allow you to move through its focusable elements. ListView の場合と同様に、ScrollViewer 以外の場所に移動するには、各項目をスクロールする必要があります。Like in a ListView, you must scroll through each item to navigate outside of the ScrollViewer.

ScrollViewer にフォーカス可能なコンテンツがない場合 (テキストのみが含まれる場合など)、ユーザーが A/[選択] ボタンを使って ScrollViewer にエンゲージメントを設定できるように、IsFocusEngagementEnabled="True" を設定できます。If the ScrollViewer has no focusable content—for example, if it only contains text—you can set IsFocusEngagementEnabled="True" so the user can engage the ScrollViewer by using the A/Select button. エンゲージメントの設定後、方向パッド/左スティックを使ってテキストをスクロールできます。作業が終わったら、B/[戻る] ボタンを押してエンゲージメントを解除できます。After they have engaged, they can scroll through the text by using the D-pad/left stick, and then press the B/Back button to disengage when they're finished.

別の方法としては、ユーザーがコントロールにエンゲージメントを設定しなくてすむように ScrollViewerIsTabStop="True" を設定します。ScrollViewer 内にフォーカス可能な要素がない場合にも、D パッド/左スティックを使って、単にフォーカスしてからスクロールできます。Another approach would be to set IsTabStop="True" on the ScrollViewer so that the user doesn't have to engage the control—they can simply place focus on it and then scroll by using the D-pad/left stick when there are no focusable elements within the ScrollViewer.

フォーカス エンゲージメントの既定値Focus engagement defaults

一部のコントロールでは、フォーカスのトラップがよく発生するため、既定の設定でフォーカス エンゲージメントを要求する方が良い場合があります。また、コントロールによっては既定でフォーカス エンゲージメントが無効になっていますが、有効にする方が良い場合があります。Some controls cause focus trapping commonly enough to warrant their default settings to require focus engagement, while others have focus engagement turned off by default but can benefit from turning it on. 次の表は、これらのコントロールと、既定のフォーカス エンゲージメントの動作を示します。The following table lists these controls and their default focus engagement behaviors.

コントロールControl フォーカス エンゲージメントの既定値Focus engagement default
CalendarDatePickerCalendarDatePicker オンOn
FlipViewFlipView オフOff
GridViewGridView オフOff
ListBoxListBox オフOff
ListViewListView オフOff
ScrollViewerScrollViewer オフOff
SemanticZoomSemanticZoom オフOff
スライダーSlider オンOn

他のすべての UWP コントロールは、IsFocusEngagementEnabled="True" のとき、動作の変更または視覚的な変更はありません。All other UWP controls will result in no behavioral or visual changes when IsFocusEngagementEnabled="True".

概要Summary

特定のデバイスやエクスペリエンス、用に最適化された UWP アプリケーションを構築することができます。 が、ユニバーサル Windows プラットフォームでは 2 フィートと 10-foot の両方のエクスペリエンスでは入力に関係なく、デバイス間で正常に使用できるアプリを構築することもできます。デバイスまたはユーザーの権限です。You can build UWP applications that are optimized for a specific device or experience, but the Universal Windows Platform also enables you to build apps that can be used successfully across devices, in both 2-foot and 10-foot experiences, and regardless of input device or user ability. この記事では、推奨事項を使用して、アプリが、テレビと PC の両方で可能な限り適切ことを確認できます。Using the recommendations in this article can ensure that your app is as good as it can be on both the TV and a PC.