ゲームパッドとリモート コントロールの操作

マウス、キーボード、タッチに加えて、ゲームパッドやリモコン入力で適切に動作するWindows アプリ SDK アプリで対話エクスペリエンスを構築します。

概要

ゲームパッドとリモコンは、Xbox 10 フィート エクスペリエンスの主要な入力デバイスです。 Windows アプリは、これらの入力の種類と従来の PC 入力の種類を使用して使用でき、アクセスできる必要があります。

10 フィート エクスペリエンスの一般的な設計ガイダンスについては、Xboxとテレビの設計に関するページを参照してください。

主要API

ゲームパッドとリモート コントロール ボタン

次の表に、ハードウェア ボタンと、それらをサポートする入力デバイスを示します。

Button ゲームパッド リモート制御
A/選択 イエス イエス
B/戻る イエス イエス
D-pad イエス イエス
メニュー イエス イエス
表示 イエス イエス
X および Y イエス いいえ
左/右スティック イエス いいえ
左/右トリガー イエス いいえ
左/右バンパー イエス いいえ

組み込みの入力マッピング

Windowsは、キーボード入力をゲームパッドとリモコンに自動的にマップします。

Keyboard ゲームパッド/リモート
方向キー D パッド (ゲームパッドの左スティックも)
スペースバー A/Select ボタン
入力する A/Select ボタン
逃げる B/戻るボタン

XY フォーカス ナビゲーション

XY フォーカス ナビゲーションを使用すると、ユーザーは D パッドまたは左スティックを使用して、アプリの UI を 4 方向 (上、下、左、右) で移動できます。

XY ナビゲーションを有効にする

XY フォーカス ナビゲーションは、XAML フレームワークに組み込まれています。 コンテナーに XYFocusKeyboardNavigation を設定して有効にします。

<StackPanel XYFocusKeyboardNavigation="Enabled">
    <Button Content="Button 1"/>
    <Button Content="Button 2"/>
    <Button Content="Button 3"/>
</StackPanel>

方向ナビゲーションをオーバーライドする

既定のナビゲーション動作をオーバーライドするには、 XYFocusUp、 XYFocusDown、 XYFocusLeft、および XYFocusRight プロパティを使用します。

<Button Content="Button 1"
        XYFocusRight="{x:Bind Button2}"/>
<Button x:Name="Button2" Content="Button 2"
        XYFocusLeft="{x:Bind Button1}"/>

フォーカス ビジュアル

フォーカス ビジュアルは、現在フォーカスされている UI 要素を強調表示する境界線です。 組み込みのフォーカス ビジュアルを使用して、ユーザーがゲームパッドまたはリモート コントロールを使用して移動できるようにします。

WinUI 3 では、 FrameworkElementのプロパティを設定してフォーカス ビジュアルをカスタマイズします。

<Button Content="My Button"
        FocusVisualPrimaryBrush="Red"
        FocusVisualPrimaryThickness="2"
        FocusVisualSecondaryBrush="Yellow"
        FocusVisualSecondaryThickness="1"/>

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

フォーカス エンゲージメントでは、ユーザーが A/Select ボタンを押してフォーカスされたコントロールを操作する必要があります。 これにより、D パッドを使用して移動中に誤ってアクティブ化されるのを防ぐことができます。

この動作の恩恵を受けるコントロールに IsFocusEngagementEnabled を設定します。

<Slider IsFocusEngagementEnabled="True"/>

フォーカス エンゲージメントが有効になっている場合、ユーザーは A/Select キーを押してコントロールを "エンゲージ" し、コントロールと対話し、B キーを押して "解除" します。

[マウス モード]

XY フォーカス ナビゲーションが実用的でないアプリ エクスペリエンス (マップや描画アプリなど) の場合は、マウス モードを有効にします。 これにより、ユーザーはマウスを使用するのと同様に、ゲームパッドを使用して自由に移動できます。

注

UWP は、このシナリオのアプリ全体の Application.RequiresPointerMode プロパティを公開しました。 Microsoft.UI.Xaml.ApplicationWinUI 3 には同等のプロパティがないため、代わりに各RequiresPointerにPageを設定します。

特定のページに対してマウス モードを有効にするには、RequiresPointerにPageを設定します。

<Page RequiresPointer="WhenEngaged">
    <!-- Page content -->
</Page>

CommandBar と ContextFlyout

ContextFlyoutを使用して、ゲームパッドの [メニュー] ボタンからアクセスできるコンテキスト メニューを提供します。

<GridView>
    <GridView.ContextFlyout>
        <MenuFlyout>
            <MenuFlyoutItem Text="Open"/>
            <MenuFlyoutItem Text="Delete"/>
        </MenuFlyout>
    </GridView.ContextFlyout>
</GridView>

ベスト プラクティス

  • 2 フィート (デスクトップ) エクスペリエンスと 10 フィート (テレビ) エクスペリエンスの両方でアプリをテストします。
  • D パッド ナビゲーションのみですべての機能にアクセスできることを確認します。
  • コンテナーで XYFocusKeyboardNavigation を使用して、方向ナビゲーションを有効にします。
  • 最も重要なコンテンツとコントロールをレイアウトの上部または先頭に配置します。
  • 重要な操作のために、1 つの入力デバイスに固有のボタンに依存しないでください。
  • Last updated on