针对 Xbox 和电视进行设计

项目
01/16/2024

设计你的 Windows 应用，使它在 Xbox One 和电视屏幕上看起来外观良好且正常运行。

有关 10 英尺体验中 UWP 应用程序交互体验的指导，请参阅游戏板和远程控制交互。

概述

可利用通用 Windows 平台跨多个 Windows 设备创建令人愉快的体验。 UWP 框架提供的大多数功能支持应用跨这些设备使用相同的用户界面 (UI)，而无需额外的工作。但是，要定制和优化应用以在 Xbox One 和电视屏幕上正常运行，需要注意一些特殊事项。

坐在房间中的沙发上使用游戏板或遥控器与电视交互的体验称为 10 英尺体验。如此命名是因为用户通常坐在离屏幕大约 10 英尺的位置。这提出了 2 英尺体验（假设）中或与电脑交互时所不存在的独特挑战。如果正在为 Xbox One 或输出到电视屏幕并使用输入控制器的任何其他设备开发应用，应始终牢记这一点。

要让应用适用于 10 英尺体验，并不需要执行本文中的所有步骤，但了解这些步骤并为应用做出适当的决策可优化根据应用的具体需求定制的 10 英尺体验。当你将应用引入 10 英尺环境中时，请考虑以下设计原则。

简单

10 英尺环境设计面临一系列独特的挑战。分辨率和视距可能会使人们难以处理太多信息。尝试精简设计，仅保留最简单的可行组件。电视上显示的信息量应与你在移动电话上而不是在桌面上看到的信息量相当。

Xbox One 主屏幕

相干

10 英尺环境中的 UWP 应用应直观易用。明确重点，不要造成误解。排列内容时，确保整个空间内的移动一致且可预测。让用户以最快的速度实现所需的操作。

Xbox One 电影应用

可在 Microsoft 电影和电视中找到屏幕截图所示的所有电影。

迷人

大屏幕可提供最佳的沉浸式电影体验。全屏景观、优雅的动作、生动的色彩和版式运用可进一步提升应用品质。美丽奔放。

针对 10 英尺体验的优化

现在，你已了解适用于 10 英尺体验的优质 UWP 应用设计原则，请通读以下概述，了解优化应用并打造出色用户体验的具体方法。

Feature	说明
UI 元素大小调整	通用 Windows 平台使用缩放和有效像素根据视距缩放 UI。了解大小调整并在 UI 中进行应用将有助于针对 10 英尺环境优化应用。
电视安全区域	默认情况下，UWP 将自动避免在电视不安全区域（靠近屏幕边缘的区域）内显示任何 UI。但是，这会形成“装箱”效果，UI 在其中看起来带上下黑边。要使应用在电视上真正身临其境，需要对其进行修改，使其扩展到支持它的电视屏幕边缘。
颜色	UWP 支持颜色主题，采用系统主题的应用在 Xbox One 上默认为深色。如果你的应用具有特定颜色主题，则应考虑某些颜色不适用于电视，应避免使用。
声音	声音在 10 英尺体验中至关重要，有助于身临其境并向用户提供反馈。 UWP 提供了在 Xbox One 上运行应用时自动打开常见控件声音的功能。详细了解 UWP 中内置的声音支持，并了解如何利用该支持。
UI 控件指南	有多个 UI 控件可在多个设备上正常运行，但在电视上使用时需要注意一些事项。阅读在针对 10 英尺体验设计时使用这些控件的一些最佳做法。
Xbox 的自定义视觉对象状态触发器	要针对 10 英尺体验定制 UWP 应用，我们建议你在应用检测到其已在 Xbox 主机上启动时，使用自定义视觉对象状态触发器进行布局更改。

除了上述设计和布局注意事项外，在生成应用时，还应考虑一系列游戏板和远程控制交互优化。

Feature	说明
XY 焦点导航和交互	“XY 焦点导航”使用户可以在应用的 UI 中进行导航。但是，这让用户只能向上、向下、向左和向右导航。本节概述了用于应对此事项和其他注意事项的建议。
鼠标模式	对于某些类型的应用程序（如地图或绘图和绘画应用）来说，XY 焦点导航不可行，甚至不可能。在这些情况下，鼠标模式让用户能够使用游戏板或遥控器自由导航，就像电脑上的鼠标一样。
焦点视觉对象	焦点视觉对象是突出显示当前聚焦的 UI 元素的边框。这有助于用户快速识别正在导航或与之交互的 UI。
焦点占用	“焦点占用”要求用户在 UI 元素具有焦点时，在游戏板或遥控器上按“A/选择”按钮，以便与其交互。
硬件按钮	游戏板和遥控器提供截然不同的按钮和配置。

注意

本主题中的大多数代码段都是以 XAML /C# 编写的；但其原则和概念适用于所有 UWP 应用。如果你在开发适用于 Xbox 的 HTML/JavaScript UWP 应用，请查看 GitHub 上出色的 TVHelpers 库。

UI 元素大小调整

由于 10 英尺环境中的应用用户正在使用遥控器或游戏手柄，并且坐在距离屏幕几英尺远的位置，因此需要在设计中考虑一些 UI 注意事项。确保 UI 具有适当的内容密度，并且不会过于混乱，以便用户可以轻松导航和选择元素。切记：简单是关键。

比例系数和自适应布局

比例系数有助于确保 UI 元素以适合应用运行设备的大小显示。在桌面上，此设置在“设置和系统”显示中以滑动值的形式提供>>。如果设备支持，则手机中也存在此相同设置。

更改文本、应用和其他项的大小

在 Xbox One 上，没有此类系统设置；但是，要让 UWP UI 元素的大小调整为适合电视，对于 XAML 应用，它们默认缩放为 200%，对于 HTML 应用，则为 150%。只要 UI 元素针对其他设备适当调整大小，它们就会针对电视适当调整大小。 Xbox One 以 1080p（1920 x 1080 像素）呈现你的应用。因此，从其他设备（如电脑）引入应用时，确保 UI 利用自适应技术在 100% 比例下以 960 x 540 像素（或对于 HTML 应用，在 100% 比例下以 1280 x 720 像素）完美呈现。

针对 Xbox 设计与针对电脑设计略有不同，因为只需担心一个分辨率 1920 x 1080。用户的电视是否具有较高的分辨率不重要，因为 UWP 应用将始终缩放为 1080p。

无论电视分辨率如何，在 Xbox One 上运行时，都会为应用引入 200%（或 150%，对于 HTML 应用）组中正确的资源大小。

内容密度

设计应用时，切记用户将从远处查看 UI，并使用远程或游戏控制器与之交互，与使用鼠标或触控输入相比，这样导航更耗时。

UI 控制大小

交互式 UI 元素的大小应调整为至少高 32 epx（有效像素）。这是常见 UWP 控件的默认设置，在 200% 比例下时，可确保 UI 元素从远处可见并有助于降低内容密度。

单击次数

当用户从电视屏幕的一边导航到另一边时，为了简化 UI，单击次数不应超过六次。 简易性原则在此同样适用。

6 个图标

文本大小

要使 UI 从远处可见，遵循以下经验规则：

主文本和阅读内容：最低 15 epx
非关键文本和补充内容：最低 12 epx

在 UI 中使用较大的文本时，选取适当的大小，既不会过多限制屏幕实际使用面积，也不会占用其他内容可能填充的空间。

选择退出比例系数

我们建议你的应用利用比例系数支持，这有助于该应用通过针对每种设备类型进行缩放在所有设备上正常运行。但是，可以选择退出此行为，并在 100% 比例下设计所有 UI。请注意，比例系数只能为 100%。

对于 XAML 应用，你可以通过使用以下代码片段选择退出比例系数：

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

result 将通知你是否已成功选择退出。

有关详细信息，包括 HTML/JavaScript 的示例代码，请参阅如何关闭缩放。

请确保通过将本主题中提及的有效像素值翻倍为实际像素值（或乘以 1.5，对于 HTML 应用）来计算适当的 UI 元素大小。

电视安全区域

由于历史和技术原因，并非所有电视都全屏显示内容。默认情况下，UWP 将避免在电视不安全区域中显示任何 UI 内容，而是仅绘制页面背景。

电视不安全区域由下图中的蓝色区域表示。

电视不安全区域

可以将背景设置为静态、主题颜色或图像，如以下代码片段所示。

主题颜色

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

映像

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

下面是你的应用在未进行额外处理的情况下的外观。

电视安全区域

这并非最佳结果，因为它让应用呈现出“装箱”效果，部分 UI（如导航窗格和网格）似乎被截断。但是，你可以进行优化，将部分 UI 的扩展到屏幕边缘，让应用更有电影效果。

将 UI 绘制到边缘

建议将某些 UI 元素扩展到屏幕边缘，以让用户更加身临其境。其中包括 ScrollViewer、导航窗格和 CommandBar。

另一方面，还有一点也很重要，即交互式元素和文本始终避免屏幕边缘，以确保其在某些电视上不会被截断。建议仅在屏幕边缘的 5% 范围内绘制非基本视觉对象。如 UI 元素大小调整所述，采用 Xbox One 主机的默认比例系数 200% 的 UWP 应用将利用 960 x 540 epx 的区域，因此在应用的 UI 中，应避免将基本 UI 置于以下区域：

27 epx，从顶部和底部
48 epx，从左侧和右侧

以下几节介绍如何让 UI 扩展到屏幕边缘。

核心窗口边界

对于仅面向 10 英尺体验的 UWP 应用，使用核心窗口边界更简单。

在 OnLaunched 的 App.xaml.cs 方法中，添加以下代码：

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

使用此代码行，应用窗口将扩展到屏幕边缘，因此你需要将所有交互式和基本 UI 移动到先前所述的电视安全区域。瞬态 UI（如关联菜单和打开的 ComboBox）将自动保留在电视安全区域中。

核心窗口边界

窗格背景

导航窗格通常在屏幕边缘附近绘制，因此背景应扩展到电视不安全区域，以免引入尴尬的空隙。只需将导航窗格的背景颜色更改为应用的背景颜色即可实现上述目的。

使用先前所述的核心窗口边界，可以将 UI 绘制到屏幕边缘，但随后应使用 SplitView 内容的正边距将其保留在电视安全区域内。

导航窗格扩展到屏幕边缘

在这里，导航窗格的背景已扩展到屏幕边缘，而其导航项则保留在电视安全区域中。 SplitView 的内容（在本例中，为项目网格）已扩展到屏幕底部，使其看起来在延续，并未被截断，而网格顶部仍在电视安全区域中。（有关如何执行此操作的详细信息，请参阅列表和网格的滚动末尾）。

以下代码片段可实现此效果：

<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 是通常位于应用的一个或多个边缘附近的窗格的另一个示例，因此在电视上其背景应扩展到屏幕边缘。它通常还包含一个“更多”按钮，由右侧的“...”表示，该按钮应保留在电视安全区域中。下面是用于实现所需交互和视觉效果的一些不同策略。

选项 1：将 CommandBar 背景色更改为透明或与页面背景相同的颜色：

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

这样做会让 CommandBar 看起来位于页面其余部分所在的背景上面，因此背景可以无缝地流向屏幕边缘。

选项 2：添加一个背景矩形，其填充色与 CommandBar 背景色相同，并使其位于 CommandBar 下方，覆盖页面其余部分：

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

注意

如果使用此方法，请注意，“更多”按钮会根据需要更改打开的 CommandBar 的高度，以在其图标下方显示 AppBarButton 的标签。建议将标签移动到其图标的右侧，以免进行此大小调整。有关详细信息，请参阅 CommandBar 标签。

这两种方法也适用于本节中列出的其他类型控件。

列表和网格的滚动末尾

通常，列表和网格包含多个项目，而这些项目无法同时在屏幕上显示。在这种情况下，我们建议将列表或网格扩展到屏幕边缘。水平滚动的列表和网格应扩展到右边缘，垂直滚动的列表和网格应扩展到底部。

电视安全区域网格切断

虽然列表或网格像这样扩展，但务必将焦点视觉对象及其关联项保留在电视安全区域中。

滚动网格焦点应保留在电视安全区域中

UWP 具有将焦点视觉对象保留在 VisibleBound 中的功能，但你需要添加填充以确保列表/网格项可以滚动到安全区域视图中。具体而言，需要将正边距添加到 ListView 或 GridView 的 ItemsPresenter，如以下代码片段所示：

<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>

你需要将前面的代码片段放在页面或应用资源中，然后通过以下方式进行访问：

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

注意

此代码片段专门用于 ListView；对于 GridView 样式，将 ControlTemplate 和 Style 的 TargetType 属性设置为 GridView。

为了更精细地控制项的显示方式，如果应用程序面向版本 1803 或更高版本，则可以使用 UIElement.BringIntoViewRequested 事件。可以将其放在 ListView/GridView 的 ItemsPanel 上，从而在内部 ScrollViewer 捕获它之前捕获它，如以下代码片段所示：

<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
        });
    }
}

颜色

默认情况下，通用 Windows 平台将应用的颜色缩放到电视安全范围（有关详细信息，请参阅电视安全颜色），以便你的应用在任何电视上看起来正常。此外，还可以对应用用来改进电视视觉体验的颜色集进行改进。

应用程序主题

你可以选择适合你的应用的应用程序主题（深色或浅色），也可以选择退出主题设置。有关主题的常规建议的详细信息，请参阅颜色主题。

UWP 还允许应用根据其运行设备提供的系统设置动态设置主题。虽然 UWP 始终采用用户指定的主题设置，但每个设备还提供适当的默认主题。由于 Xbox One 的本质（预计媒体体验多于高效工作体验），它默认为深色系统主题。如果应用主题基于系统设置，则预计它在 Xbox One 上默认为深色。

主题色

可通过 UWP 以便捷的方式公开用户从系统设置中选择的主题色。

在 Xbox One 上，用户可以选择用户颜色，就像他们可以在电脑上选择主题色一样。只要应用通过画笔或颜色资源调用这些主题色，就会使用用户在系统设置中选择的颜色。请注意，Xbox One 上的主题色按照用户，而不是按照系统。

另请注意，Xbox One 上的用户颜色集与电脑、手机和其他设备上的用户颜色集不同。

只要你的应用使用画笔资源（如 SystemControlForegroundAccentBrush）或颜色资源 (SystemAccentColor)，或者直接通过 UIColorType.Accent* API 调用主题色，这些颜色就会替换为 Xbox One 上的可用主题色。高对比度画笔颜色也是从系统中拉取的，方式与在电脑和手机上的相同。

通常，要详细了解主题色，请参阅主题色。

电视之间的颜色差异

针对电视进行设计时，请注意，颜色的显示方式大不相同，具体取决于呈现颜色的电视。不要认为颜色看起来与显示器上的颜色完全相同。如果你的应用依靠颜色的细微差异来区分部分 UI，则颜色可能混合在一起，用户可能会弄混。尝试使用对比鲜明的颜色，以便用户能够清楚地区分它们，无论所用的电视为何。

电视安全颜色

颜色的 RGB 值表示红色、绿色和蓝色的强度。电视无法很好地处理极强的浓度，它们会产生奇怪的色带效果，或在某些电视上显示为浅色。此外，高强度颜色还可能导致光晕（附近像素开始绘制相同的颜色）。尽管对于哪些颜色被视为电视安全颜色存在很多不同的看法，但 RGB 值介于 16-235 之间（或 10-EB，采用十六进制时）的颜色通常是适用于电视的安全颜色。

电视安全颜色范围

过去，Xbox 上的应用必须根据此“电视安全”颜色范围定制其颜色：但是，从 Fall Creators Update 开始，Xbox One 会自动将所有内容缩放到电视安全范围内。这意味着大多数应用开发人员不再需要担心电视安全颜色。

重要

不会在使用媒体基础播放已处于电视安全颜色范围内的视频内容时应用此色阶效果。

如果正在使用 DirectX 11 或 DirectX 12 开发应用并创建自己的交换链来呈现 UI 或视频，则可以通过调用 IDXGISwapChain3::SetColorSpace1 来指定所用的颜色空间，这会让系统知道是否需要缩放颜色。

UI 控件指南

有多个 UI 控件可在多个设备上正常运行，但在电视上使用时需要注意一些事项。阅读在针对 10 英尺体验设计时使用这些控件的一些最佳做法。

导航窗格（也称为汉堡菜单）是 UWP 应用中常用的导航控件。通常，该窗格包含位于列表样式菜单的多个选项，用户可从这些选项中进行选择以显示不同的页面。通常，为了节省空间，此窗格一开始处于折叠状态，用户可以通过单击按钮将其打开。

虽然可通过鼠标和触控功能轻易访问导航窗格，但通过游戏手柄/远程控制访问时就不太方便，因为用户必须导航到按钮才能打开该窗格。因此，好的做法是通过“视图”按钮打开导航窗格，并允许用户通过一直向左导航页面来打开该窗格。可以在编程焦点导航文档中找到有关如何实施设计模式的代码示例。这将让用户非常轻松地访问窗格内容。有关导航窗格在不同屏幕大小中的行为方式以及适用于游戏手柄/远程导航的最佳做法的详细信息，请参阅导航窗格。

CommandBar 标签

建议将标签放置在 CommandBar 上图标的右侧，以尽可能降低其高度并保持一致。为此，可以通过将 CommandBar.DefaultLabelPosition 属性设置为 CommandBarDefaultLabelPosition.Right。

带有图标右侧标签的 CommandBar

设置此属性时，还会导致标签始终显示，这非常适合 10 英尺体验，因为可以最大程度地减少用户的单击次数。这也是适合其他设备类型的出色模型。

引入的工具提示控件可用于在用户将鼠标悬停在元素上或用手指点击并按住元素时，在 UI 中提供更多信息。对于游戏手柄和远程控制，Tooltip 将在聚焦元素时的片刻后显示，在屏幕上短暂停留，然后消失。如果使用的 Tooltip 过多，则此行为可能会分散注意力。尽量避免在针对电视进行设计时使用 Tooltip。

按钮样式

虽然标准 UWP 按钮非常适合电视，但一些视觉样式的按钮会更好地引起对 UI 的关注，你可能希望针对所有平台考虑这一点，尤其是在 10 英尺体验中，这样可以清晰地传达焦点所在的位置。要详细了解这些样式，请参阅按钮。

嵌套 UI 元素

嵌套 UI 显示包含在容器 UI 元素内的嵌套可操作项，其中嵌套项和容器项彼此不会喧宾夺主。

嵌套 UI 适用于某些输入类型，但并非始终适用于依赖于 XY 导航的游戏手柄和远程控制。请务必遵循本主题中的指南，确保 UI 已针对 10 英尺环境进行优化，并且用户可以轻松访问所有可交互元素。一种常见解决方案是在 ContextFlyout 中放置嵌套的 UI 元素。

有关嵌套 UI 的详细信息，请参阅列表项中的嵌套 UI。

MediaTransportControls

MediaTransportControls 元素允许用户与其媒体进行交互，方法为提供默认播放体验以允许用户播放、暂停、打开隐藏式字幕等。此控件是 MediaPlayerElement 的属性，支持两个布局选项：单行和双行。在单行布局中，滑块和播放按钮全部位于一行中，播放/暂停按钮位于滑块左侧。在双行布局中，滑块自己一行，播放按钮位于下面的单独行中。在针对 10 英尺体验进行设计时，应使用双行布局，因为可以优化游戏手柄的导航体验。要启用双行布局，请在 MediaPlayerElement 中 TransportControls 属性上将 MediaTransportControls 元素设置为 IsCompact="False"。

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

请访问媒体播放，了解有关向应用添加媒体的详细信息。

注意

MediaPlayerElement 仅在 Windows 10 版本 1607 及更高版本中可用。如果要针对早期版本的 Windows 10 开发应用，则需要改用 MediaElement。上述建议也适用于 MediaElement，并且 TransportControls 属性以相同的方式进行访问。

搜索体验

搜索内容是 10 英尺体验中最常执行的功能之一。如果你的应用提供搜索体验，则建议将游戏手柄上的 Y 按钮作为加速器，让用户快速访问搜索功能。

大多数客户应该已经熟悉此加速器，但如果你愿意，可以向 UI 添加视觉 Y 字形，用于指示客户可以使用该按钮访问搜索功能。如果添加此提示，一定要使用 Segoe Xbox MDL2 Symbol 字体中的符号（对于 XAML 应用，为 ；对于 HTML 应用，则为 \E426），以与 Xbox shell 和其他应用一致。

注意

由于 Segoe Xbox MDL2 Symbol 字体仅在 Xbox 上可用，因此该符号在电脑上无法正确显示。但是，在部署到 Xbox 后将在电视上显示。

由于 Y 按钮仅在游戏手柄上可用，因此一定要提供其他方法来访问搜索，例如 UI 中的按钮。否则，某些客户可能无法访问该功能。

在 10 英尺体验中，客户通常更容易使用全屏搜索体验，因为屏幕上的空间有限。无论是全屏还是局部屏幕“就地”搜索，我们建议当用户打开搜索体验时，屏幕键盘就已打开，以供客户输入搜索词。

Xbox 的自定义视觉对象状态触发器

要针对 10 英尺体验定制 UWP 应用，我们建议你在应用检测到其已在 Xbox 主机上启动时进行布局更改。要执行此操作，一种方法是使用自定义视觉对象状态触发器。如果希望在 Blend for Visual Studio 中进行编辑，建议使用视觉对象状态触发器。以下代码片段演示如何为 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>

要创建触发器，请将以下类添加到应用。下面是上述 XAML 代码引用的类：

class DeviceFamilyTrigger : StateTriggerBase
{
    private string _currentDeviceFamily, _queriedDeviceFamily;

    public string DeviceFamily
    {
        get
        {
            return _queriedDeviceFamily;
        }

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

在添加自定义触发器后，应用在检测到自己正在 Xbox One 主机上运行时，将自动进行 XAML 代码中指定的布局修改。

另一种方法是检查你的应用是否在 Xbox 上运行，然后通过代码进行适当的调整。可以使用以下简单变量检查你的应用是否正在 Xbox 上运行：

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

然后，在完成此检查后，可以在代码块中对 UI 进行适当的调整。

总结

针对 10 英尺体验进行设计时，需要考虑一些特殊注意事项，使其不同于针对任何其他平台进行设计。虽然你可以将 UWP 应用直接移植到 Xbox One 上并且正常使用，但它不一定针对 10 英尺体验进行优化，并可能导致用户失望。遵循本文中的准则可确保你的应用与在电视上一样好。

通过

针对 Xbox 和电视进行设计

概述

简单

相干

迷人

针对 10 英尺体验的优化

UI 元素大小调整

比例系数和自适应布局

内容密度

UI 控制大小

单击次数

文本大小

选择退出比例系数

电视安全区域

主题颜色

映像

将 UI 绘制到边缘

核心窗口边界

窗格背景

列表和网格的滚动末尾

颜色

应用程序主题

主题色

电视之间的颜色差异

电视安全颜色

UI 控件指南

导航窗格

CommandBar 标签

Tooltip

按钮样式

嵌套 UI 元素

MediaTransportControls

搜索体验

Xbox 的自定义视觉对象状态触发器

总结

相关文章

其他资源