針對 Xbox 和電視進行設計Designing for Xbox and TV

設計您的「通用 Windows 平台」(UWP) 應用程式,讓它在 Xbox One 及電視螢幕上看起來既美觀又能正常運作。Design your Universal Windows Platform (UWP) app so that it looks good and functions well on Xbox One and television screens.

請參閱遊戲台和遠端控制互動互動的指引,在 UWP 應用程式中體驗10 英呎體驗。See Gamepad and remote control interactions for guidance on interaction experiences in UWP applications in the 10-foot experience.

概觀Overview

通用 Windows 平台可讓您創造跨多個 Windows 10 裝置的絕佳體驗。The Universal Windows Platform lets you create delightful experiences across multiple Windows 10 devices. UWP 架構提供的大部分功能可讓 app 在這些裝置上使用相同的使用者介面 (UI),無需進行額外的工作。Most of the functionality provided by the UWP framework enables apps to use the same user interface (UI) across these devices, without additional work. 不過,如果要量身打造並提供最佳化的 app 以便在 Xbox One 和電視螢幕上運作良好,則需要特殊考量。However, tailoring and optimizing your app to work great on Xbox One and TV screens requires special considerations.

坐在房間一端的沙發上,使用遊戲台或遙控器與電視互動的體驗,稱為「10 英呎體驗」。The experience of sitting on your couch across the room, using a gamepad or remote to interact with your TV, is called the 10-foot experience. 這個名稱的由來是因為使用者通常坐在離螢幕大約 10 英呎遠的位置。It is so named because the user is generally sitting approximately 10 feet away from the screen. 這是一個獨特的挑戰,因為我們不會稱與電腦互動是 2 英呎體驗。This provides unique challenges that aren't present in, say, the 2-foot experience, or interacting with a PC. 如果您為 Xbox One 或其他輸出至電視螢幕的裝置開發 app,並使用控制器做為輸入,您就必須記住這一點。If you are developing an app for Xbox One or any other device that outputs to the TV screen and uses a controller for input, you should always keep this in mind.

您並非需要本篇文章中所有的步驟,才能讓 app 創造出 10 英呎體驗,但是了解這些步驟,為您的 app 做出適當的決定,可針對您的 app 特定需求,量身打造出更良好的 10 英呎體驗。Not all of the steps in this article are required to make your app work well for 10-foot experiences, but understanding them and making the appropriate decisions for your app will result in a better 10-foot experience tailored for your app's specific needs. 當您打算在 10 英呎環境中運作您的 app 時,請考慮下列設計原則。As you bring your app to life in the 10-foot environment, consider the following design principles.

SimpleSimple

針對 10 英呎環境的設計會產生一些獨特的挑戰。Designing for the 10-foot environment presents a unique set of challenges. 解析度和檢視距離會讓人們很難處理太多資訊。Resolution and viewing distance can make it difficult for people to process too much information. 請嘗試讓設計保持清晰,盡量精簡為最簡單的元件。Try to keep your design clean, reduced to the simplest possible components. 在電視上顯示的資訊量應該與在行動電話上 (而不是電腦上) 看到的內容差不多。The amount of information displayed on a TV should be comparable to what you'd see on a mobile phone, rather than on a desktop.

Xbox One 主畫面

易懂Coherent

10 英呎環境中的 UWP app 應該直覺且易於使用。UWP apps in the 10-foot environment should be intuitive and easy to use. 讓焦點清楚而且易懂。Make the focus clear and unmistakable. 排列好內容,讓空間的移動一致而且可預測。Arrange content so that movement across the space is consistent and predictable. 為使用者的動作提供最短的路徑。Give people the shortest path to what they want to do.

Xbox One 電影應用程式

螢幕擷取畫面所示的所有影片都位於 Microsoft 電影和電視。All movies shown in the screenshot are available on Microsoft Movies & TV.

迷人Captivating

大螢幕能提供最身歷其境、類似電影的體驗。The most immersive, cinematic experiences take place on the big screen. 無縫的場景、順暢的動作,以及生動活潑的色彩和排版,都能讓您的 app 提升到不同的層次。Edge-to-edge scenery, elegant motion, and vibrant use of color and typography take your apps to the next level. 盡量明顯而美觀。Be bold and beautiful.

Xbox One 的虛擬人偶應用程式

10 英呎體驗最佳化Optimizations for the 10-foot experience

您現在知道了出色的 UWP app 具備 10 英呎體驗的設計原則,請仔細閱讀下列概觀,了解可最佳化您的 app 並提供絕佳使用者體驗的特定方式。Now that you know the principles of good UWP app design for the 10-foot experience, read through the following overview of the specific ways you can optimize your app and make for a great user experience.

功能Feature 描述Description
UI 項目調整大小UI element sizing 通用 Windows 平台使用縮放與有效像素,根據檢視距離來調整 UI。The Universal Windows Platform uses scaling and effective pixels to scale the UI according to the viewing distance. 了解如何調整大小並套用到整個 UI,可協助最佳化 10 英呎環境的 app。Understanding sizing and applying it across your UI will help optimize your app for the 10-foot environment.
電視安全區域TV-safe area UWP 預設會自動避免在電視不安全的區域 (接近螢幕邊緣的區域) 中顯示任何 UI。The UWP will automatically avoid displaying any UI in TV-unsafe areas (areas close to the edges of the screen) by default. 不過,這會產生一種「被框住」的效果,UI 看起來就像信箱一樣。However, this creates a "boxed-in" effect in which the UI looks letterboxed. 為了讓您的 app 能真正融入電視螢幕,您要加以修改,讓 app 在支援的電視能延伸到螢幕的邊緣。For your app to be truly immersive on TV, you will want to modify it so that it extends to the edges of the screen on TVs that support it.
色彩Colors UWP 支援色彩佈景主題,優先採用系統佈景主題的 app 在 Xbox One 上將會預設為「深色」。The UWP supports color themes, and an app that respects the system theme will default to dark on Xbox One. 如果您的 app 有特定的色彩佈景主題,您應該考慮到有些色彩不適合電視,應盡量避免使用。If your app has a specific color theme, you should consider that some colors don't work well for TV and should be avoided.
音效Sound 音效聲音在 10 英呎體驗中扮演關鍵角色,其為使用者提供身歷其境的體驗與回應。Sounds play a key role in the 10-foot experience, helping to immerse and give feedback to the user. 在 Xbox One 上執行 app 時,UWP 可提供針對通用控制項自動開啟音效的功能。The UWP provides functionality that automatically turns on sounds for common controls when the app is running on Xbox One. 深入了解關於 UWP 內建音效支援及如何善用的詳細資訊。Find out more about the sound support built into the UWP and learn how to take advantage of it.
UI 控制項的方針Guidelines for UI controls 提供數種可針對多部裝置良好運作的 UI 控制項,但當在電視上使用時具有特定考量。There are several UI controls that work well across multiple devices, but have certain considerations when used on TV. 深入了解有關針對 10 英呎體驗進行設計時使用這些控制項的一些最佳做法。Read about some best practices for using these controls when designing for the 10-foot experience.
自訂的視覺狀態觸發程序 xboxCustom visual state trigger for Xbox 若要針對 10 英呎體驗量身打造您的 UWP app,建議您使用自訂的「視覺狀態觸發程序」,在 App 偵測到它已在 Xbox 主機上啟動時變更配置。To tailor your UWP app for the 10-foot experience, we recommend that you use a custom visual state trigger to make layout changes when the app detects that it has been launched on an Xbox console.

除了上述的設計和配置考量,有一些遊戲台和遠端控制互動建置您的應用程式時,您應考量的最佳化。In addition to the preceding design and layout considerations, there are a number of gamepad and remote control interaction optimizations you should consider when building your app.

功能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.
焦點 engagementFocus engagement 焦點 engagement 需要使用者按下A/選取遊戲台或 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.

注意

本主題中大部分的程式碼片段都是以 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.

調整 UI 元素大小UI element sizing

因為在 10 英呎環境中的 app 使用者會使用遙控器或遊戲台,而且坐在離螢幕數英呎遠的位置,所以您的設計必須納入一些特別的 UI 考量。Because the user of an app in the 10-foot environment is using a remote control or gamepad and is sitting several feet away from the screen, there are some UI considerations that need to be factored into your design. 請確定 UI 有適當的內容密度,也不要太雜亂,讓使用者可以輕鬆瀏覽和選取元素。Make sure that the UI has an appropriate content density and is not too cluttered so that the user can easily navigate and select elements. 請記住︰重點是簡單。Remember: simplicity is key.

縮放比例與調適型配置Scale factor and adaptive layout

「縮放比例」有助於確保 UI 元素以適合 app 執行裝置的大小顯示。Scale factor helps with ensuring that UI elements are displayed with the right sizing for the device on which the app is running. 在桌面上,您可以在 [設定] > [系統] > [顯示] 中找到這個設定,以滑動值表示。On desktop, this setting can be found in Settings > System > Display as a sliding value. 手機上也有這個相同的設定 (如果裝置支援)。This same setting exists on phone as well if the device supports it.

變更文字、app 與其他項目的大小

Xbox One 上沒有這類系統設定。不過,如果要適當調整 UWP UI 元素的大小以適用於電視,預設會針對 XAML app 將它們調整為 200%,以及針對 HTML app 調整為 150%On Xbox One, there is no such system setting; however, for UWP UI elements to be sized appropriately for TV, they are scaled at a default of 200% for XAML apps and 150% for HTML apps. 只要 UI 元素能針對其他裝置適當調整大小,就能針對電視適當調整大小。As long as UI elements are appropriately sized for other devices, they will be appropriately sized for TV. Xbox One 以 1080p (1920 x 1080 像素) 呈現您的 app。Xbox One renders your app at 1080p (1920 x 1080 pixels). 因此,從電腦等其他裝置帶入 app 時,請確定採用調適型技術,以 100% 縮放比例讓 UI 呈現 960 x 540 像素的最佳外觀 (或針對 HTML app 以 100% 縮放比例呈現 1280 x 720 像素的最佳外觀)。Therefore, when bringing an app from other devices such as PC, ensure that the UI looks great at 960 x 540 px at 100% scale (or 1280 x 720 px at 100% scale for HTML apps) utilizing adaptive techniques.

針對 Xbox 的設計與針對電腦的設計稍有不同,因為您只需考慮 1920 x 1080 一種解析度。Designing for Xbox is a little different from designing for PC because you only need to worry about one resolution, 1920 x 1080. 如果使用者的電視解析度比較高,就沒什麼關係—UWP app 一律會縮放至 1080p。It doesn't matter if the user has a TV that has better resolution—UWP apps will always scale to 1080p.

但無論電視解析度為何,當您的 app 在 Xbox One 上執行時,也會提取 200% (或針對 HTML app 提取 150%) 的正確資產大小。Correct asset sizes from the 200% (or 150% for HTML apps) set will also be pulled in for your app when running on Xbox One, regardless of TV resolution.

內容密度Content density

設計 app 時請記住,使用者會從遠距離檢視 UI 而且使用遙控器或遊戲控制器與 UI 互動,比起使用滑鼠或觸控輸入要花費更多的時間瀏覽。When designing your app, remember that the user will be viewing the UI from a distance and interacting with it by using a remote or game controller, which takes more time to navigate than using mouse or touch input.

UI 控制項的大小Sizes of UI controls

互動式 UI 元素的高度至少要有 32 epx (有效像素)。Interactive UI elements should be sized at a minimum height of 32 epx (effective pixels). 這是常見 UWP 控制項的預設值,以縮放比例 200% 使用時,可確保從遠距離也能看見 UI 元素,並協助減少內容密度。This is the default for common UWP controls, and when used at 200% scale, it ensures that UI elements are visible from a distance and helps reduce content density.

縮放比例 100% 和 200% 的 UWP 按鈕

點選次數Number of clicks

使用者從電視螢幕一邊瀏覽到另一邊時,以不超過「點選六次」的原則來簡化您的 UI。When the user is navigating from one edge of the TV screen to the other, it should take no more than six clicks to simplify your UI. 同樣地,這裡適用「簡單」的原則。Again, the principle of simplicity applies here.

跨 6 個圖示

文字大小Text sizes

若要從遠距離看見您的 UI,請使用下列重要規則︰To make your UI visible from a distance, use the following rules of thumb:

  • 主要文字及讀取內容:15 epx 最小值Main text and reading content: 15 epx minimum
  • 非重大的文字和增補內容:12 epx 最小值Non-critical text and supplemental content: 12 epx minimum

在 UI 中使用較大文字時,請挑選不會限制螢幕實際可用空間太多、佔用其他內容可能填入空間的大小。When using larger text in your UI, pick a size that does not limit screen real estate too much, taking up space that other content could potentially fill.

不使用縮放比例Opting out of scale factor

我們建議您的 app 充分利用縮放比例支援,針對每個裝置類型進行縮放,可協助 app 在所有裝置上正確執行。We recommend that your app take advantage of scale factor support, which will help it run appropriately on all devices by scaling for each device type. 不過,您也可以不使用這個行為,以縮放比例 100% 來設計所有 UI。However, it is possible to opt out of this behavior and design all of your UI at 100% scale. 請注意,您無法將縮放比例變更為 100% 以外的值。Note that you cannot change the scale factor to anything other than 100%.

針對 XAML app,您可以使用下列程式碼片段,選擇不使用縮放比例︰For XAML apps, you can opt out of scale factor by using the following code snippet:

bool result =
    Windows.UI.ViewManagement.ApplicationViewScaling.TrySetDisableLayoutScaling(true);

result 將告知您是否已成功選擇退出。result will inform you whether you successfully opted out.

如需詳細資訊 (包括適用於 HTML/JavaScript 的範例程式碼),請參閱如何關閉縮放比例For more information, including sample code for HTML/JavaScript, see How to turn off scaling.

請務必將本主題中所述的「有效」像素值加倍來得到「實際」像素值 (或針對 HTML app 乘以 1.5),藉以計算出 UI 元素的適當大小。Please be sure to calculate the appropriate sizes of UI elements by doubling the effective pixel values mentioned in this topic to actual pixel values (or multiplying by 1.5 for HTML apps).

電視安全區域TV-safe area

由於歷史上以及技術上的理由,並非所有的電視都以相同的方式顯示螢幕邊緣的內容。Not all TVs display content all the way to the edges of the screen due to historical and technological reasons. UWP 預設會避免在電視不安全區域中顯示任何 UI 內容,改為只繪製頁面背景。By default, the UWP will avoid displaying any UI content in TV-unsafe areas and instead will only draw the page background.

下列影像中,電視不安全區域以藍色區域表示。The TV-unsafe area is represented by the blue area in the following image.

電視不安全區域

您可以將背景設定為靜態或佈景主題色彩,或設定為影像,如以下程式碼片段示範。You can set the background to a static or themed color, or to an image, as the following code snippets demonstrate.

佈景主題色彩Theme color

<Page x:Class="Sample.MainPage"
      Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"/>

ImageImage

<Page x:Class="Sample.MainPage"
      Background="\Assets\Background.png"/>

這是您的 app 不進行額外工作的外觀。This is what your app will look like without additional work.

電視安全區域

這不是最佳的結果,因為它讓 app 產生「被框住」的效果,某些 UI (例如瀏覽窗格和格線) 似乎被裁切掉。This is not optimal because it gives the app a "boxed-in" effect, with parts of the UI such as the nav pane and grid seemingly cut off. 不過,您可以進行最佳化,延伸部份 UI 到螢幕邊緣,讓 app 有更多電影效果。However, you can make optimizations to extend parts of the UI to the edges of the screen to give the app a more cinematic effect.

將 UI 繪製到邊緣Drawing UI to the edge

我們建議您使用特定 UI 元素,延伸到螢幕邊緣,讓使用者感覺更投入。We recommend that you use certain UI elements to extend to the edges of the screen to provide more immersion to the user. 這些包括 ScrollViewers瀏覽窗格以及 CommandBarsThese include ScrollViewers, nav panes, and CommandBars.

但同樣重要的是,互動式元素和文字則一律要避開螢幕邊緣,以確保在一些電視上不會被裁切掉。On the other hand, it's also important that interactive elements and text always avoid the screen edges to ensure that they won't be cut off on some TVs. 我們建議您在螢幕邊緣的 5% 以內,只繪製不重要的視覺效果。We recommend that you draw only non-essential visuals within 5% of the screen edges. 調整 UI 元素大小所述,遵循 Xbox One 主機預設縮放比例 200% 的 UWP app 會使用 960 x 540 epx 的區域,所以在您的 app UI 中,您應該避免在下列區域中放置重要的 UI:As mentioned in UI element sizing, a UWP app following the Xbox One console's default scale factor of 200% will utilize an area of 960 x 540 epx, so in your app's UI, you should avoid putting essential UI in the following areas:

  • 從頂端和底端算起 27 epx27 epx from the top and bottom
  • 從左邊和右邊算起 48 epx48 epx from the left and right sides

下列小節說明如何將您的 UI 延伸到螢幕邊緣。The following sections describe how to make your UI extend to the screen edges.

核心視窗界限Core window bounds

對於只針對 10 英呎體驗的 UWP app,使用核心視窗界限是比較簡單的選項。For UWP apps targeting only the 10-foot experience, using core window bounds is a more straightforward option.

App.xaml.csOnLaunched 方法中,新增下列程式碼:In the OnLaunched method of App.xaml.cs, add the following code:

Windows.UI.ViewManagement.ApplicationView.GetForCurrentView().SetDesiredBoundsMode
    (Windows.UI.ViewManagement.ApplicationViewBoundsMode.UseCoreWindow);

有了這行程式碼,app 視窗會延伸到螢幕邊緣,所以您必須將所有互動式和重要 UI 移入稍早所述的電視安全區域中。With this line of code, the app window will extend to the edges of the screen, so you will need to move all interactive and essential UI into the TV-safe area described earlier. 暫時性 UI (例如操作功能表和開啟的下拉式方塊) 會自動留在電視安全區域內。Transient UI, such as context menus and opened ComboBoxes, will automatically remain inside the TV-safe area.

核心視窗界限

窗格背景Pane backgrounds

瀏覽窗格通常會繪製在螢幕邊緣附近,所以背景應該要延伸到電視不安全區域,以免產生不適當的間距。Navigation panes are typically drawn near the edge of the screen, so the background should extend into the TV-unsafe area so as not to introduce awkward gaps. 若要這麼做,只要將瀏覽窗格的背景色彩變更為應用程式的背景色彩即可。You can do this by simply changing the color of the nav pane's background to the color of the app's background.

使用先前所述的核心視窗界限將可讓您將 UI 繪製在螢幕的邊緣,但是您應該接著在 SplitView 的內容上使用正值邊界,以便讓它保持在電視安全區域內。Using the core window bounds as previously described will allow you to draw your UI to the edges of the screen, but you should then use positive margins on the SplitView's content to keep it within the TV-safe area.

延伸到螢幕邊緣的瀏覽窗格

現在,瀏覽窗格的背景已經延伸到螢幕邊緣,同時瀏覽項目也保留在電視安全區域內。Here, the nav pane's background has been extended to the edges of the screen, while its navigation items are kept in the TV-safe area. SplitView 的內容 (在此例中為項目的格線) 已經延伸到螢幕底部,因此看起來是持續往下而沒有被截斷,而格線頂端也仍然在電視安全區域內。The content of the SplitView (in this case, a grid of items) has been extended to the bottom of the screen so that it looks like it continues and isn't cut off, while the top of the grid is still within the TV-safe area. (若要深入了解如何執行這項操作,請參閱捲動清單和格線的尾端)。(Learn more about how to do this in Scrolling ends of lists and grids).

下列程式碼片段可達到這個效果︰The following code snippet achieves this effect:

<SplitView x:Name="RootSplitView"
           Margin="48,0,48,0">
    <SplitView.Pane>
        <ListView x:Name="NavMenuList"
                  ContainerContentChanging="NavMenuItemContainerContentChanging"
                  ItemContainerStyle="{StaticResource NavMenuItemContainerStyle}"
                  ItemTemplate="{StaticResource NavMenuItemTemplate}"
                  ItemInvoked="NavMenuList_ItemInvoked"
                  ItemsSource="{Binding NavMenuListItems}"/>
    </SplitView.Pane>
    <Frame x:Name="frame"
           Navigating="OnNavigatingToPage"
           Navigated="OnNavigatedToPage"/>
</SplitView>

CommandBar 是另一個常放在 app 一邊或多邊附近的窗格範例,也因此其背景應該延伸到電視螢幕邊緣。CommandBar is another example of a pane that is commonly positioned near one or more edges of the app, and as such on TV its background should extend to the edges of the screen. 它通常也包含一個 [更多] 按鈕 (在右邊以 "..." 代表),此按鈕應該留在電視安全區域中。It also usually contains a More button, represented by "..." on the right side, which should remain in the TV-safe area. 以下是可達到所需的互動和視覺效果的幾個不同策略。The following are a few different strategies to achieve the desired interactions and visual effects.

選項 1:變更CommandBar背景色彩為透明或與頁面背景色彩相同:Option 1: Change the CommandBar background color to either transparent or the same color as the page background:

<CommandBar x:Name="topbar"
            Background="{ThemeResource SystemControlBackgroundAltHighBrush}">
            ...
</CommandBar>

這麼做會讓 CommandBar 看起來就像位在與頁面其餘部分相同的背景上,因此背景會順暢地延伸到螢幕邊緣。Doing this will make the CommandBar look like it is on top of the same background as the rest of the page, so the background seamlessly flows to the edge of the screen.

選項 2:新增背景矩形,其填滿是相同的色彩做CommandBar背景,並讓它位於以下CommandBar和跨頁面的其餘部分:Option 2: Add a background rectangle whose fill is the same color as the CommandBar background, and have it lie below the CommandBar and across the rest of the page:

<Rectangle VerticalAlignment="Top"
            HorizontalAlignment="Stretch"      
            Fill="{ThemeResource SystemControlBackgroundChromeMediumBrush}"/>
<CommandBar x:Name="topbar"
            VerticalAlignment="Top"
            HorizontalContentAlignment="Stretch">
            ...
</CommandBar>

注意

如果使用這個方法,請注意 [更多] 按鈕會視需要變更所開啟之 CommandBar 的高度,以便在 AppBarButton 的圖示之下顯示其標籤。If using this approach, be aware that the More button changes the height of the opened CommandBar if necessary, in order to show the labels of the AppBarButtons below their icons. 建議您將標籤移到其圖示的「右側」,以避免發生調整大小的情況。We recommend that you move the labels to the right of their icons to avoid this resizing. 如需詳細資訊,請參閱 CommandBar 標籤For more information, see CommandBar labels.

這兩種方法也適用於本節所列的其他類型的控制項。Both of these approaches also apply to the other types of controls listed in this section.

捲動清單和格線的尾端Scrolling ends of lists and grids

清單和格線經常會包含一個螢幕無法同時容納的多個項目。It's common for lists and grids to contain more items than can fit onscreen at the same time. 發生這種情況時,我們建議您將清單或格線延伸到螢幕邊緣。When this is the case, we recommend that you extend the list or grid to the edge of the screen. 水平捲動清單和格線時應該向右邊延伸,垂直捲動時應該向下延伸。Horizontally scrolling lists and grids should extend to the right edge, and vertically scrolling ones should extend to the bottom.

電視安全區域格線截斷

雖然清單或格線會像這樣延伸,但是請務必讓視覺焦點及其關聯的項目保留在電視安全區域內。While a list or grid is extended like this, it's important to keep the focus visual and its associated item inside the TV-safe area.

捲動格線焦點應保留在電視安全區域內

UWP 具有可將視覺焦點保留在 VisibleBounds 內的功能,但是您必須新增邊框間距,以確保清單/格線項目可以捲動到安全區域的視野範圍內。The UWP has functionality that will keep the focus visual inside the VisibleBounds, but you need to add padding to ensure that the list/grid items can scroll into view of the safe area. 具體來說,您要對 ListViewGridViewItemsPresenter 新增正邊界,如下列程式碼片段所示︰Specifically, you add a positive margin to the ListView or GridView's ItemsPresenter, as in the following code snippet:

<Style x:Key="TitleSafeListViewStyle"
       TargetType="ListView">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ListView">
                <Border BorderBrush="{TemplateBinding BorderBrush}"
                        Background="{TemplateBinding Background}"
                        BorderThickness="{TemplateBinding BorderThickness}">
                    <ScrollViewer x:Name="ScrollViewer"
                                  TabNavigation="{TemplateBinding TabNavigation}"
                                  HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}"
                                  HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
                                  IsHorizontalScrollChainingEnabled="{TemplateBinding ScrollViewer.IsHorizontalScrollChainingEnabled}"
                                  VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}"
                                  VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}"
                                  IsVerticalScrollChainingEnabled="{TemplateBinding ScrollViewer.IsVerticalScrollChainingEnabled}"
                                  IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}"
                                  IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}"
                                  ZoomMode="{TemplateBinding ScrollViewer.ZoomMode}"
                                  IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}"
                                  BringIntoViewOnFocusChange="{TemplateBinding ScrollViewer.BringIntoViewOnFocusChange}"
                                  AutomationProperties.AccessibilityView="Raw">
                        <ItemsPresenter Header="{TemplateBinding Header}"
                                        HeaderTemplate="{TemplateBinding HeaderTemplate}"
                                        HeaderTransitions="{TemplateBinding HeaderTransitions}"
                                        Footer="{TemplateBinding Footer}"
                                        FooterTemplate="{TemplateBinding FooterTemplate}"
                                        FooterTransitions="{TemplateBinding FooterTransitions}"
                                        Padding="{TemplateBinding Padding}"
                                        Margin="0,27,0,27"/>
                    </ScrollViewer>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

您可以將先前的程式碼片段放在頁面或 App 資源中,然後再透過下列方式存取它︰You would put the previous code snippet in either the page or app resources, and then access it in the following way:

<Page>
    <Grid>
        <ListView Style="{StaticResource TitleSafeListViewStyle}"
                  ... />

注意

這個程式碼片段是特別針對 ListView;如果是 GridView 樣式,請將 ControlTemplateStyleTargetType 屬性都設定為 GridViewThis code snippet is specifically for ListViews; for a GridView style, set the TargetType attribute for both the ControlTemplate and the Style to GridView.

更精細控制如何項目已導入檢視中,如果您的應用程式的目標 1803年版或更新版本中,您可以使用如UIElement.BringIntoViewRequested 事件For more fine-grained control over how items are brought into view, if your application targets version 1803 or later, you can use the UIElement.BringIntoViewRequested event. 您可以將它放ItemsPanel for ListView/GridView攔截它之前,內部ScrollViewer會執行,如下列程式碼片段所示:You can put it on the ItemsPanel for the ListView/GridView to catch it before the internal ScrollViewer does, as in the following code snippets:

<GridView x:Name="gridView">
    <GridView.ItemsPanel>
        <ItemsPanelTemplate>
            <ItemsWrapGrid Orientation="Horizontal"
                           BringIntoViewRequested="ItemsWrapGrid_BringIntoViewRequested"/>
        </ItemsPanelTemplate>
    </GridView.ItemsPanel>
</GridView>
// The BringIntoViewRequested event is raised by the framework when items receive keyboard (or Narrator) focus or 
// someone triggers it with a call to UIElement.StartBringIntoView.
private void ItemsWrapGrid_BringIntoViewRequested(UIElement sender, BringIntoViewRequestedEventArgs args)
{
    if (args.VerticalAlignmentRatio != 0.5)  // Guard against our own request
    {
        args.Handled = true;
        // Swallow this request and restart it with a request to center the item.  We could instead have chosen
        // to adjust the TargetRect’s Y and Height values to add a specific amount of padding as it bubbles up, 
        // but if we just want to center it then this is easier.

        // (Optional) Account for sticky headers if they exist
        var headerOffset = 0.0;
        var itemsWrapGrid = sender as ItemsWrapGrid;
        if (gridView.IsGrouping && itemsWrapGrid.AreStickyGroupHeadersEnabled)
        {
            var header = gridView.GroupHeaderContainerFromItemContainer(args.TargetElement as GridViewItem);
            if (header != null)
            {
                headerOffset = ((FrameworkElement)header).ActualHeight;
            }
        }

        // Issue a new request
        args.TargetElement.StartBringIntoView(new BringIntoViewOptions()
        {
            AnimationDesired = true,
            VerticalAlignmentRatio = 0.5, // a normalized alignment position (0 for the top, 1 for the bottom)
            VerticalOffset = headerOffset, // applied after meeting the alignment ratio request
        });
    }
}

色彩Colors

預設中,通用 Windows 平台調整您的 App 電視安全範圍色彩 (請參閱 電視安全色彩獲得詳細資訊),以便您的 App 在任何電視中看起來都很美。By default, the Universal Windows Platform scales your app's colors to the TV-safe range (see TV-safe colors for more information) so that your app looks good on any TV. 此外,您的 app 可以採取一些色彩設定的增強功能,來改善電視上的視覺體驗。In addition, there are improvements that you can make to the set of colors your app uses to improve the visual experience on TV.

應用程式佈景主題Application theme

您可以根據適合 app 的方式選擇「應用程式佈景主題」 (深色或淺色),或者選擇不使用佈景主題。You can choose an Application theme (dark or light) according to what is right for your app, or you can opt out of theming. 請在色彩佈景主題中閱讀更多有關佈景主題的一般建議。Read more about general recommendations for themes in Color themes.

UWP 也能讓 app 根據執行的裝置所提供的系統設定,動態設定佈景主題。The UWP also allows apps to dynamically set the theme based on the system settings provided by the devices on which they run. 雖然 UWP 一律會優先採用使用者指定的佈景主題設定,但是每個裝置也會提供適當的預設佈景主題。While the UWP always respects the theme settings specified by the user, each device also provides an appropriate default theme. 由於 Xbox One 的「媒體」體驗要求比「生產力」體驗要求還高,因此預設為深色的系統佈景主題。Because of the nature of Xbox One, which is expected to have more media experiences than productivity experiences, it defaults to a dark system theme. 如果您的 app 佈景主題是根據系統設定,在 Xbox One 上就會預設為深色。If your app's theme is based on the system settings, expect it to default to dark on Xbox One.

輔色Accent color

UWP 提供一個很方便的方式可以公開使用者從其系統設定選取的「輔色」。The UWP provides a convenient way to expose the accent color that the user has selected from their system settings.

使用者可以在 Xbox One 上選取使用者的色彩,就如同在電腦上選取輔色一樣。On Xbox One, the user is able to select a user color, just as they can select an accent color on a PC. 只要您的 app 透過筆刷或色彩資源呼叫這些輔色,就會採用使用者在系統設定中選取的色彩。As long as your app calls these accent colors through brushes or color resources, the color that the user selected in the system settings will be used. 請注意,Xbox One 上的輔色依使用者 (不是依系統) 而定。Note that accent colors on Xbox One are per user, not per system.

另外,Xbox One 上的使用者色彩組與電腦、手機和其他裝置上的不同。Please also note that the set of user colors on Xbox One is not the same as that on PCs, phones, and other devices.

只要您的 app 使用筆刷資源 (例如 SystemControlForegroundAccentBrush) 或色彩資源 (SystemAccentColor),或直接透過 UIColorType.Accent* API 改為呼叫輔色,這些色彩就會取代為適合電視的 Xbox One 可用輔色。As long as your app uses a brush resource such as SystemControlForegroundAccentBrush, or a color resource (SystemAccentColor), or instead calls accent colors directly through the UIColorType.Accent* API, those colors are replaced with accent colors available on Xbox One. 高對比的筆刷色彩也會從系統 (就像在電腦和手機上一樣) 提取。High contrast brush colors are also pulled in from the system the same way as on a PC and phone.

若要深入了解一般的輔色,請參閱輔色To learn more about accent color in general, see Accent color.

電視之間的色彩差異Color variance among TVs

針對電視設計時,請注意色彩顯示的方式依照所呈現的電視而相當不同。When designing for TV, note that colors display quite differently depending on the TV on which they are rendered. 不要認為色彩會完全像在監視器上顯示的一樣。Don't assume colors will look exactly as they do on your monitor. 如果您的 app 依賴細微的色彩差異來區分 UI,色彩可能會混合在一起,而讓使用者感到困惑。If your app relies on subtle differences in color to differentiate parts of the UI, colors could blend together and users could get confused. 無論使用的電視為何,請試著使用足以讓使用者能夠清楚分辨的色彩。Try to use colors that are different enough that users will be able to clearly differentiate them, regardless of the TV they are using.

電視安全色彩TV-safe colors

色彩的 RGB 值代表紅色、綠色及藍色的濃度。A color's RGB values represent intensities for red, green, and blue. 電視無法處理極端的濃度值—它們可以在某些電視上會產生奇異的帶狀效果,或者看起來像褪色一樣。TVs don't handle extreme intensities very well—they can produce an odd banded effect, or appear washed out on certain TVs. 此外,高濃度色彩可能會導致開花的效果 (附近的像素開始繪製相同的色彩)。Additionally, high-intensity colors may cause blooming (nearby pixels start drawing the same colors). 雖然不同思想學派對於何謂電視安全色彩有不同的意見,但是 16-235 (或以十六進位表示的 10-EB) 的 RGB 值內的色彩通常可安全地用於電視。While there are different schools of thought in what are considered TV-safe colors, colors within the RGB values of 16-235 (or 10-EB in hexadecimal) are generally safe to use for TV.

電視安全色彩範圍

在過去,Xbox app 必須量身打造他們的顏色落在「電視安全」色彩的範圍內;不過,從秋季版 Creators Update 開始,Xbox One 自動調整在電視安全範圍內的完整內容。Historically, apps on Xbox had to tailor their colors to fall within this "TV-safe" color range; however, starting with the Fall Creators Update, Xbox One automatically scales full range content into the TV-safe range. 這表示大部分的 app 開發人員不需要擔心電視安全色彩。This means that most app developers no longer have to worry about TV-safe colors.

重要

已在電視安全色彩範圍中的影片內容,當使用 媒體基礎播放時,不會套用此色彩調整影響。Video content that's already in the TV-safe color range doesn't have this color scaling effect applied when played back using Media Foundation.

如果您正使用 DirectX 11 或 DirectX 12 開發 app 以及建立您自己的交換鏈結轉譯 UI 或影片,可以指定您藉由撥打 IDXGISwapChain3::SetColorSpace1來使用的色彩空間,這會讓系統知道是否需要調整色彩。If you're developing an app using DirectX 11 or DirectX 12 and creating your own swap chain to render UI or video, you can specify the color space you use by calling IDXGISwapChain3::SetColorSpace1, which will let the system know if it needs to scale colors or not.

UI 控制項的指導方針Guidelines for UI controls

提供數種可針對多部裝置良好運作的 UI 控制項,但當在電視上使用時具有特定考量。There are several UI controls that work well across multiple devices, but have certain considerations when used on TV. 深入了解有關針對 10 英呎體驗進行設計時使用這些控制項的一些最佳做法。Read about some best practices for using these controls when designing for the 10-foot experience.

Pivot 控制項Pivot control

樞紐可讓您在 App 內透過選取不同的標頭或索引標籤,快速瀏覽檢視。A Pivot provides quick navigation of views within an app through selecting different headers or tabs. 控制項會在成為焦點的標頭加上底線,以便在使用遊戲台/遙控器時,更加凸顯目前選取的標頭。The control underlines whichever header has focus, making it more obvious which header is currently selected when using gamepad/remote.

樞紐底線

您可以將 Pivot.IsHeaderItemsCarouselEnabled 屬性設定為 true,如此就能讓樞紐一律保持在相同位置上,而不會讓選取的樞紐標頭總是移到第一個位置。You can set the Pivot.IsHeaderItemsCarouselEnabled property to true so that pivots always keep the same position, rather than having the selected pivot header always move to the first position. 對於大螢幕顯示器 (例如電視),這會是更好的體驗,因為標頭換行可能會讓使用者分心。This is a better experience for large-screen displays such as TV, because header wrapping can be distracting to users. 如果不能在螢幕上同時顯示所有的樞紐標頭,即會提供捲軸,讓客戶能夠看見其他標頭。不過,您應該確定它們全都會顯示於螢幕上以提供最佳體驗。If all of the pivot headers don't fit onscreen at once, there will be a scrollbar to let customers see the other headers; however, you should make sure that they all fit on the screen to provide the best experience. 如需詳細資訊,請參閱索引標籤和樞紐For more information, see Tabs and pivots.

瀏覽窗格 (也稱為「漢堡式功能表」) 是 UWP app 中常用的瀏覽控制項。A navigation pane (also known as a hamburger menu) is a navigation control commonly used in UWP apps. 它一般會是一個含有清單樣式功能表的窗格,功能表中有數個可供選擇的選項,可將使用者帶到不同的頁面。Typically it is a pane with several options to choose from in a list style menu that will take the user to different pages. 這個窗格通常一開始會摺疊起來以節省空間,使用者按一下按鈕即可將它開啟。Generally this pane starts out collapsed to save space, and the user can open it by clicking on a button.

使用滑鼠和觸控可以很容易存取瀏覽窗格,但使用遊戲台/遙控器遠端則較難存取瀏覽窗格,因為使用者必須瀏覽到按鈕才能開啟窗格。While nav panes are very accessible with mouse and touch, gamepad/remote makes them less accessible since the user has to navigate to a button to open the pane. 因此,理想的做法是讓「檢視」按鈕開啟瀏覽窗格,以及讓使用者能夠一路瀏覽到頁面左邊來開啟窗格。Therefore, a good practice is to have the View button open the nav pane, as well as allow the user to open it by navigating all the way to the left of the page. 如何實作這個設計模式的程式碼範例位於程式設計焦點瀏覽文件。Code sample on how to implement this design pattern can be found in Programmatic focus navigation document. 這將可讓使用者非常容易存取窗格的內容。This will provide the user with very easy access to the contents of the pane. 如需有關瀏覽窗格在不同螢幕大小中如何運作的詳細資訊,以及適用於遊戲台/遙控器瀏覽的最佳做法,請參閱瀏覽窗格For more information about how nav panes behave in different screen sizes as well as best practices for gamepad/remote navigation, see Nav panes.

CommandBar 標籤CommandBar labels

CommandBar 上,理想的做法是將標籤放在圖示右邊,以便使 CommandBar 高度最小化並保持一致。It is a good idea to have the labels placed to the right of the icons on a CommandBar so that its height is minimized and stays consistent. 您可以將 CommandBar.DefaultLabelPosition 屬性設定為 CommandBarDefaultLabelPosition.Right 來達到此目的。You can do this by setting the CommandBar.DefaultLabelPosition property to CommandBarDefaultLabelPosition.Right.

標籤在圖示右邊的 CommandBar

設定此屬性也會使標籤變成一律顯示,這非常適用於 10 英呎體驗,因為它可將使用者的點選次數降到最低。Setting this property will also cause the labels to always be displayed, which works well for the 10-foot experience because it minimizes the number of clicks for the user. 這也是一個可供其他裝置類型遵循的絕佳模型。This is also a great model for other device types to follow.

工具提示Tooltip

Tooltip 控制項是為了當使用者將滑鼠停留在元素上,或者點選並按住元素上的圖形時,在 UI 中提供更多資訊。The Tooltip control was introduced as a way to provide more information in the UI when the user hovers the mouse over, or taps and holds their figure on, an element. 對於遊戲台和遙控器,當元素取得焦點一小段時間之後,Tooltip 就會出現在螢幕上停留一小段時間,然後消失。For gamepad and remote, Tooltip appears after a brief moment when the element gets focus, stays onscreen for a short time, and then disappears. 如果使用了太多 Tooltip,這種行為可能會讓使用者分心。This behavior could be distracting if too many Tooltips are used. 針對電視進行設計時,請嘗試避免使用 TooltipTry to avoid using Tooltip when designing for TV.

按鈕樣式Button styles

雖然標準的 UWP 按鈕能在電視上順利運作,但是一些按鈕視覺樣式更能讓 UI 吸引注意,您可以針對所有平台考慮這些樣式,特別是在 10 英呎體驗中,更需要清楚傳達焦點所在。While the standard UWP buttons work well on TV, some visual styles of buttons call attention to the UI better, which you may want to consider for all platforms, particularly in the 10-foot experience, which benefits from clearly communicating where the focus is located. 若要深入了解這些樣式,請參閱按鈕To read more about these styles, see Buttons.

巢狀的 UI 元素Nested UI elements

巢狀的 UI 會公開容器 UI 元素內部包含的巢狀可動作項目,其中巢狀項目與容器項目都可以各自獨立取得焦點。Nested UI exposes nested actionable items enclosed inside a container UI element where both the nested item as well as the container item can take independent focus from each other.

對於某些輸入類型,巢狀的 UI 能夠良好運作,但對於依賴 XY 導覽的遊戲台與遙控器,則不一定能夠良好運作。Nested UI works well for some input types, but not always for gamepad and remote, which rely on XY navigation. 請務必遵循本主題中的指導方針,以確保您的 UI 能夠針對 10 英呎環境最佳化,讓使用者能夠輕鬆地存取所有可互動的元素。Be sure to follow the guidance in this topic to ensure that your UI is optimized for the 10-foot environment, and that the user can access all interactable elements easily. 一個常用的解決方案是將放在巢狀的 UI 項目ContextFlyoutOne common solution is to place nested UI elements in a ContextFlyout.

如需巢狀 UI 的詳細資訊,請參閱清單項目中的巢狀 UIFor more information on nested UI, see Nested UI in list items.

MediaTransportControlsMediaTransportControls

MediaTransportControls 元素提供預設的播放體驗,讓使用者可以與其媒體互動 (播放、暫停、開啟隱藏式輔助字幕等等)。The MediaTransportControls element lets users interact with their media by providing a default playback experience that allows them to play, pause, turn on closed captions, and more. 這個控制項是 MediaPlayerElement 的屬性,且支援兩種配置選項:「單列」和「雙列」。This control is a property of MediaPlayerElement and supports two layout options: single-row and double-row. 在單列配置中,滑桿與播放按鈕都會在同一列上,且播放/暫停按鈕會在滑桿左邊。In the single-row layout, the slider and playback buttons are all located in one row, with the play/pause button located to the left of the slider. 在雙列配置中,滑桿會自成一列,而播放按鈕則位於下方另一列上。In the double-row layout, the slider occupies its own row, with the playback buttons on a separate lower row. 針對 10 英呎體驗設計時,應使用雙列配置,因為它能為控制器提供較佳的瀏覽。When designing for the 10-foot experience, the double-row layout should be used, as it provides better navigation for gamepad. 若要啟用雙列配置,請在 MediaPlayerElementTransportControls 屬性中的 MediaTransportControls 元素上設定 IsCompact="False"To enable the double-row layout, set IsCompact="False" on the MediaTransportControls element in the TransportControls property of the MediaPlayerElement.

<MediaPlayerElement x:Name="mediaPlayerElement1"  
                    Source="Assets/video.mp4"
                    AreTransportControlsEnabled="True">
    <MediaPlayerElement.TransportControls>
        <MediaTransportControls IsCompact="False"/>
    </MediaPlayerElement.TransportControls>
</MediaPlayerElement>

如需深入了解將媒體加入 App,請參閱媒體播放Visit Media playback to learn more about adding media to your app.

![NOTE] MediaPlayerElement 只能在 Windows 10 版本 1607 及更新版本中取得。![NOTE] MediaPlayerElement is only available in Windows 10, version 1607 and later. 如果您是針對先前版本的 Windows 10 開發 App,便必須改為使用 MediaElementIf you're developing an app for an earlier version of Windows 10, you'll need to use MediaElement instead. 上述建議也適用於 MediaElement,且 TransportControls 屬性也是以同樣的方式存取。The recommendations above apply to MediaElement as well, and the TransportControls property is accessed in the same way.

搜尋體驗Search experience

搜尋內容是 10 英呎體驗中其中一個最常執行的功能。Searching for content is one of the most commonly performed functions in the 10-foot experience. 如果您的 app 提供搜尋體驗,使用者能夠使用遊戲台上的 Y 按鈕做為快速鍵來快速存取會很有幫助。If your app provides a search experience, it is helpful for the user to have quick access to it by using the Y button on the gamepad as an accelerator.

大部分的客戶應該已經熟悉這個快速鍵,但是如果您願意,可以在 UI 新增視覺化 Y 字符,表示客戶可以使用此按鈕來存取搜尋功能。Most customers should already be familiar with this accelerator, but if you like you can add a visual Y glyph to the UI to indicate that the customer can use the button to access search functionality. 如果您新增此提示,請務必使用 Segoe Xbox MDL2 Symbol 字型中的符號 (針對 XAML app 為 &#xE3CC;,針對 HTML app 則為 \E426),以提供與 Xbox 殼層和其他 app 的一致性。If you do add this cue, be sure to use the symbol from the Segoe Xbox MDL2 Symbol font (&#xE3CC; for XAML apps, \E426 for HTML apps) to provide consistency with the Xbox shell and other apps.

注意

因為 Segoe Xbox MDL2 Symbol 字型只能在 Xbox 上使用,所以此符號將無法顯示於您的電腦上。Because the Segoe Xbox MDL2 Symbol font is only available on Xbox, the symbol won't appear correctly on your PC. 不過,一旦將它部署到 Xbox 之後,就能顯示於電視上。However, it will show up on the TV once you deploy to Xbox.

因為 Y 按鈕只能在遊戲台上使用,所以請務必提供其他方法來存取搜尋,例如 UI 中的按鈕。Since the Y button is only available on gamepad, make sure to provide other methods of access to search, such as buttons in the UI. 否則,部分客戶可能無法存取此功能。Otherwise, some customers may not be able to access the functionality.

在 10 英呎體驗中,讓客戶使用全螢幕的搜尋體驗通常比較容易,因為顯示器的空間有限。In the 10-foot experience, it is often easier for customers to use a full screen search experience because there is limited room on the display. 無論您有全螢幕或部分螢幕 (「就地」搜尋),我們建議當使用者開啟搜尋體驗時,就出現已經開啟的螢幕小鍵盤,供客戶輸入搜尋字詞。Whether you have full screen or partial-screen, "in-place" search, we recommend that when the user opens the search experience, the onscreen keyboard appears already opened, ready for the customer to enter search terms.

適用於 Xbox 的自訂視覺狀態觸發程序Custom visual state trigger for Xbox

若要針對 10 英呎體驗量身打造您的 UWP app,建議您在 App 偵測到它已在 Xbox 主機上啟動時變更配置。To tailor your UWP app for the 10-foot experience, we recommend that you make layout changes when the app detects that it has been launched on an Xbox console. 若要這麼做,其中一個方法是使用「視覺狀態觸發程序」。One way to do this is by using a custom visual state trigger. 當您想要在 Blend for Visual Studio 中進行編輯時,視覺狀態觸發程序最為實用。Visual state triggers are most useful when you want to edit in Blend for Visual Studio. 下列程式碼片段示範如何建立適用於 Xbox 的視覺狀態觸發程序:The following code snippet shows how to create a visual state trigger for Xbox:

<VisualStateManager.VisualStateGroups>
    <VisualStateGroup>
        <VisualState>
            <VisualState.StateTriggers>
                <triggers:DeviceFamilyTrigger DeviceFamily="Windows.Xbox"/>
            </VisualState.StateTriggers>
            <VisualState.Setters>
                <Setter Target="RootSplitView.OpenPaneLength"
                        Value="368"/>
                <Setter Target="RootSplitView.CompactPaneLength"
                        Value="96"/>
                <Setter Target="NavMenuList.Margin"
                        Value="0,75,0,27"/>
                <Setter Target="Frame.Margin"
                        Value="0,27,48,27"/>
                <Setter Target="NavMenuList.ItemContainerStyle"
                        Value="{StaticResource NavMenuItemContainerXboxStyle}"/>
            </VisualState.Setters>
        </VisualState>
    </VisualStateGroup>
</VisualStateManager.VisualStateGroups>

若要建立觸發程序,請將下列類別新增到您的 App。To create the trigger, add the following class to your app. 這是上面的 XAML 程式碼所參考的類別︰This is the class that is referenced by the XAML code above:

class DeviceFamilyTrigger : StateTriggerBase
{
    private string _currentDeviceFamily, _queriedDeviceFamily;

    public string DeviceFamily
    {
        get
        {
            return _queriedDeviceFamily;
        }

        set
        {
            _queriedDeviceFamily = value;
            _currentDeviceFamily = AnalyticsInfo.VersionInfo.DeviceFamily;
            SetActive(_queriedDeviceFamily == _currentDeviceFamily);
        }
    }
}

新增自訂觸發程序之後,每當您的 App 偵測到它在 Xbox One 主機上執行時,就會自動進行您在 XAML 程式碼中指定的配置修改。After you've added your custom trigger, your app will automatically make the layout modifications you specified in your XAML code whenever it detects that it is running on an Xbox One console.

另一個您可以檢查 App 是否正在 Xbox 上執行並接著進行適當調整的方式是透過程式碼。Another way you can check whether your app is running on Xbox and then make the appropriate adjustments is through code. 您可以使用下列簡單變數來檢查您的 App 是否正在 Xbox 上執行︰You can use the following simple variable to check if your app is running on Xbox:

bool IsTenFoot = (Windows.System.Profile.AnalyticsInfo.VersionInfo.DeviceFamily ==
                    "Windows.Xbox");

接著,您可以在這項檢查之後,在程式碼區塊中適當調整 UI。Then, you can make the appropriate adjustments to your UI in the code block following this check.

摘要Summary

針對 10 英呎經驗的設計已納入特殊考量,使其有別於其他所有平台的設計。Designing for the 10-foot experience has special considerations to take into account that make it different from designing for any other platform. 您當然可以直接將 UWP app 移植至 Xbox One 且它亦可運作,但它不一定是針對 10 英呎體驗最佳化,且會讓使用者感到失望。While you can certainly do a straight port of your UWP app to Xbox One and it will work, it won't necessarily be optimized for the 10-foot experience and can lead to user frustration. 遵循本文所述的指導方針,以確定 app 在電視上仍可呈現優異效果。Following the guidelines in this article will make sure that your app is as good as it can be on TV.