遊戲台與遙控器的互動Gamepad and remote control interactions

鍵盤與遊戲台影像

許多互動體驗會在遊戲台、遠端控制和鍵盤之間共用Many interaction experiences are shared between gamepad, remote control, and keyboard

在您的通用 Windows 平臺 (UWP) 應用程式中建立互動體驗, 確保您的應用程式可供使用, 並可透過傳統輸入類型的電腦、膝上型電腦和平板電腦 (滑鼠、鍵盤、觸控等等) 以及輸入類型來存取電視和 Xbox 10 墊腳的一般經驗, 例如遊戲台和遠端控制。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 和電視的設計, 以取得在10 英尺體驗中 UWP 應用程式的一般設計指引。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 英尺的環境中 (反之亦然)。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 焦點清楚並 unmistakable、排列內容, 讓導覽保持一致且可預測, 以及為使用者提供最短的路徑來進行想要的動作。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 app。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 app,請查看 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英尺的案例中都能正常運作, 而且所有功能都可以探索並可供 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. 在這些情況下,滑鼠模式可讓使用者自由流覽遊戲台或遙控器, 就像在電腦上的滑鼠一樣。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.
專注參與Focus engagement 當 UI 元素具有焦點以與其互動時, 焦點參與需要使用者在遊戲台或遠端控制上按A/Select按鈕。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

就像電腦的鍵盤和滑鼠,以及手機和平板電腦的觸控,遊戲台與遙控器是 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 焦點瀏覽和互動滑鼠模式中,您將了解使用這些輸入裝置時如何最佳化您的 app。In XY focus navigation and interaction and Mouse mode, you will learn how to optimize your app when using these input devices.

遊戲台和遙控器行為的原始品質取決於您的 app 支援鍵盤的程度。The quality of gamepad and remote behavior that you get out-of-the-box depends on how well keyboard is supported in your app. 要確保您的 app 可搭配遊戲台/遙控器正確運作的一個好方式是確定它可搭配電腦的鍵盤正確運作,然後使用遊戲台/遙控器測試來尋找您 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. 雖然您可以使用只在一種輸入裝置上支援的按鈕,讓瀏覽 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 app 支援的所有硬體按鈕,以及哪一種輸入裝置支援這些按鈕。The following table lists all of the hardware buttons supported by UWP apps, and which input device supports them.

按鈕Button 遊戲台Gamepad 遙控器Remote control
A/選取按鈕A/Select button Yes Yes
B/返回按鈕B/Back button Yes Yes
方向鍵 (D 鍵)Directional pad (D-pad) Yes Yes
功能表按鈕Menu button Yes Yes
檢視按鈕View button Yes Yes
X 和 Y 按鈕X and Y buttons Yes No
左搖桿Left stick Yes No
右搖桿Right stick Yes No
LT 鍵和 RT 鍵Left and right triggers Yes No
LB 鍵和 RB 鍵Left and right bumpers Yes No
OneGuide 按鈕OneGuide button No Yes
音量按鈕Volume button No Yes
頻道按鈕Channel button No Yes
媒體控制項按鈕Media control buttons No Yes
靜音按鈕Mute button No 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)
空格鍵Spacebar A/選取按鈕A/Select button
EnterEnter A/選取按鈕A/Select button
ESCEscape B/返回按鈕*B/Back button*

*當應用程式未處理 B 按鈕的KeyDownKeyUp事件時, 將會引發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 App 的瀏覽歷史與向後瀏覽For more information about backwards navigation, see Navigation history and backwards navigation for UWP apps.

Xbox One 上的 UWP App 也支援透過按下 [功能表] 按鈕來開啟操作功能表。UWP apps on Xbox One also support pressing the Menu button to open context menus. 如需詳細資訊,請參閱 CommandBar 和 ContextFlyoutFor 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 app 快速鍵功能的輸入裝置。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 LT 鍵/RT 鍵Left/right triggers CalendarViewListBoxListViewBaseListViewScrollViewerSelectorLoopingSelectorComboBoxFlipViewCalendarView, ListBox, ListViewBase, ListView, ScrollViewer, Selector, LoopingSelector, ComboBox, FlipView 支援垂直捲動的檢視Views that support vertical scrolling
向左一頁/向右一頁Page left/right NoneNone LB 鍵/RB 鍵Left/right bumpers PivotListBoxListViewBaseListViewScrollViewerSelectorLoopingSelectorFlipViewPivot, ListBox, ListViewBase, ListView, ScrollViewer, Selector, LoopingSelector, FlipView 支援水平捲動的檢視Views that support horizontal scrolling
放大/縮小Zoom in/out CTRL +/-Ctrl +/- LT 鍵/RT 鍵Left/right triggers NoneNone ScrollViewer, 支援放大和縮小的視圖ScrollViewer, views that support zooming in and out
開啟/關閉瀏覽窗格Open/close nav pane NoneNone ViewView NoneNone 瀏覽窗格​​Navigation panes
搜尋Search NoneNone Y 按鈕Y button NoneNone App 中主要搜尋功能的快速鍵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

如果您的 app 支援使用鍵盤正確瀏覽焦點,這也會順利轉譯到遊戲台與遙控器。If your app supports proper focus navigation for keyboard, this will translate well to gamepad and remote control. 方向鍵的瀏覽方式與「方向鍵」 (以及遊戲台上的「左搖桿」) 對應,而與 UI 元素的互動方式則與「Enter/Select」鍵對應 (請參閱遊戲台與遙控器)。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).

許多事件和屬性都同時為鍵盤與遊戲台所用 — 兩者都會引發 KeyDownKeyUp 事件,且兩者都只會瀏覽到具有屬性 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.

如果正確實作鍵盤支援,您的 app 應該可以正確運作,不過可能需要一些額外的工作才能支援每種狀況。If keyboard support is implemented properly, your app will work reasonably well; however, there may be some extra work required to support every scenario. 請思考您的 app 特定需求,以盡可能提供最佳的使用者體驗。Think about your app's specific needs to provide the best user experience possible.

重要

預設會為所有在 Xbox One 上執行的 UWP app 啟用滑鼠模式。Mouse mode is enabled by default for UWP apps running on Xbox One. 若要停用滑鼠模式及啟用 XY 焦點瀏覽,請設定 Application.RequiresPointerMode=WhenRequestedTo 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 瀏覽可能無法依照您預期的方式運作︰There are three common reasons why XY navigation might not work the way you expect:

  • IsTabStopVisibility 屬性設定錯誤。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.

四個角有元素,且中間有無法存取的元素

如果因為某些原因無法重新排列 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 平台會嘗試使方向鍵/左搖桿的瀏覽方式讓使用者感到很直覺,但是它並無法保證針對您 App 之意圖最佳化的行為。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. 確保瀏覽針對您的 App 最佳化的最佳方式,是先使用控制器加以測試,以確認使用者能針對 App 的案例以直覺的方式存取每個 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. 如果您的 app 案例呼叫 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,不要將不必要的元素放在優先的工作之間,即可大幅改善您 app 的可用性。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. 使用者必須一直向下捲動完整個清單/格線,才能到達 CommandBarThe 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. 請注意,這是假設您的 app 最初的焦點是放置在 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.

如果您的 App 有所含項目必須已可供使用者存取的 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. ContextFlyoutUIElement的屬性, 而且是與該元素相關聯的內容功能表ContextFlyout is a property of UIElement and is the context menu associated with that element. 在電腦上,當您在具有 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. 雖然沒有一種「正確」的方式,您選擇的解決方案也取決於您 app 的特定需求,不過您還是可以使用一些技術,創造絕佳的電視體驗。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.

為了更深入了解,讓我們看看一個假想的 App,以便說明這當中的部分問題及可克服這些問題的技術。To understand this better, let's look at an imaginary app that illustrates some of these issues and techniques to overcome them.

注意

這個假的 App 是為了說明 UI 問題和可能的解決方案,而不是為了示範您特定 App 的最佳使用者體驗。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.

以下是一個假想的房地產 App,此 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. 這個 app 有三個挑戰,您可以使用下列技術克服︰This app poses three challenges that you can overcome by using the following techniques:

假造的房地產 app

問題:位於長時間滾動清單/格線之後的 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.

房地產 app︰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.

房地產 app︰放置按鈕在長捲動清單上方

專注參與Focus engagement

「需要」佔用時,整個 ListView 會變成單一的焦點目標。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.

房地產 app︰設定需要佔用,只需按 1 次就可到達 [上一個/下一個] 按鈕

問題:沒有任何可設定焦點的元素 ScrollViewerProblem: ScrollViewer without any focusable elements

由於 XY 焦點瀏覽仰賴一次僅瀏覽單一可設定 UI 元素的設計,因此沒有任何可設定焦點的元素的 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

當您的 app 需要自由捲動 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. 還有一些 app,使用者要能夠在整個頁面移動指標,讓使用遊戲台/遙控器的使用者能夠擁有類似使用電腦滑鼠的體驗。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. 例如,您的 app 可以有一個有 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 應用程式,預設都會針對整個 App 啟用滑鼠模式。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 中執行這項操作,請在您的 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 (預設值)、WhenEngaged 以及 WhenFocusedThis 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>

注意

只有在 Page 物件上才支援 WhenFocused 值。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. 這種案例會在 App 的其他部分是使用滑鼠模式,但您希望在顯示全螢幕內容時將它關閉時發生。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.

透過視覺更新,以及對視覺焦點新增的許多自訂選項,開發人員可以信任單一視覺焦點能在電腦和 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 上執行您的 app 時也會顯示。Thus, even if you don't implement it, it will appear when you run your app on Xbox One.

最初的視覺焦點位置Initial focus visual placement

啟動 app 或瀏覽到頁面時,請將焦點放在使用者應採取動作的第一個 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. 例如,相片 app 可以將焦點放在圖庫中的第一個項目,瀏覽到歌曲詳細檢視的音樂 app 可以將焦點放在播放按鈕,以方便播放音樂。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.

請嘗試將最初的焦點放在您 app 的左上方區域 (如果是由右至左的流程,則放在右上方)。Try to put initial focus in the top left region of your app (or top right for a right-to-left flow). 大部分的使用者一開始通常會將焦點放在這個角落,因為這是 app 內容流程通常開始的位置。Most users tend to focus on that corner first because that's where app content flow generally begins.

讓焦點清晰可見Making focus clearly visible

螢幕上永遠要顯示一個視覺焦點讓使用者可以挑選而停駐,而不需要搜尋焦點。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. 有數個這類屬性可供您利用來將您的 App 個人化。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. 若要深入了解,請參閱 VisualStateTo learn more, see VisualState.

消失關閉重疊Light dismiss overlay

若要讓使用者注意使用者目前使用遊戲控制器或遙控器操作的 UI 元素,在 Xbox One 上執行 app 時,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. 您可以在任何 FlyoutBase 上設定 LightDismissOverlayMode 屬性以啟用或停用煙霧層;它預設為 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

焦點佔用的目的是要讓您更容易使用控制器或遙控器來與 App 互動。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 物件上的屬性 IsFocusEngagementEnabled 設定為 True 時,它會將控制項標示為需要焦點佔用。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

焦點受困是當使用者嘗試瀏覽 app 的 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.

按鈕在水平滑桿左邊和右邊

如果使用者想要從左邊的按鈕瀏覽到右邊的按鈕,合理的狀況是假設使用者只要按下方向鍵/左搖桿向右兩次。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. 其中一個方法是設計不同的配置,類似 XY 焦點瀏覽和互動中的房地產 app 範例,我們將「上一個」按鈕和「下一個」按鈕重新配置在 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.

解決這個問題的另一種方法需要在 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 需要焦點佔用時,使用者只要按方向鍵/左搖桿向右兩次,就可以到達右邊的按鈕。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. 這樣可讓使用者只要向下按,就可快速跳過 ListViewThis 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 與這些控制項稍有不同,其具有待考量的個別原因。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沒有可設定焦點的內容—例如如果只包含文字—,您可以設定 IsFocusEngagementEnabled="True" 讓使用者可以使用 [A/選取] 按鈕來佔用 ScrollViewerIf 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.

另一種方法是在 ScrollViewer 上設定 IsTabStop="True",如此一來使用者便無須佔用控制項—,而可在 ScrollViewer 中無可設定焦點的元素時,使用 [方向鍵/左搖桿] 在上頭放置焦點然後捲動瀏覽。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

IsFocusEngagementEnabled="True" 時,其他所有 UWP 控制項將不會導致任何行為或視覺變更。All other UWP controls will result in no behavioral or visual changes when IsFocusEngagementEnabled="True".

總結Summary

您可以建立針對特定裝置或體驗優化的 UWP 應用程式, 但通用 Windows 平臺也可讓您建立可在不同裝置間成功使用的應用程式, 不論是2英尺還是10英尺的體驗, 以及無論輸入為何裝置或使用者的能力。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. 使用本文中的建議可確保您的應用程式在電視和電腦上都能正常進行。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.