针对 Xbox 和电视进行设计

设计 Windows 应用，使其在 Xbox One 和电视屏幕上看起来良好且功能良好。

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

概述

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

坐在房间里的沙发上，使用游戏手柄或遥控器与电视进行交互的体验被称为 10英尺体验。 之所以命名，是因为用户通常坐在离屏幕约 10 英尺远的地方。 这带来了独特的挑战，这些挑战在例如 的 2 英尺 体验或与个人电脑的互动中并不存在。 如果你正在为 Xbox One 或任何其他输出到电视屏幕并使用控制器作为输入设备的设备实现应用程序，应始终记住这一点。

本文中的所有步骤并非都需要使你的应用适用于 10 英尺的体验，但了解它们并为你的应用做出适当的决策将导致为应用的特定需求定制更好的 10 英尺体验。 当你将应用引入 10 英尺的环境中时，请考虑以下设计原则。

简单

为适合在十英尺距离观看的环境进行设计带来了一系列独特的挑战。 分辨率和查看距离可能会使人们难以处理太多信息。 尝试保持设计干净，减少到最简单的组件。 电视上显示的信息量应与你在移动电话上看到的信息量相当，而不是在桌面上显示的信息。

连贯的

10 英尺环境中的 UWP 应用应直观易用。 使焦点清晰且无可置疑。 排列内容，以便跨空间移动一致且可预测。 帮助人们以最短路径实现他们的目标。

屏幕截图中显示的所有电影均在Microsoft电影和电视上提供。

迷人

最沉浸式的电影体验发生在大屏幕上。 边缘到边缘的风景，优雅的动作，充满活力的颜色和版式的使用将你的应用提升到下一级别。 大胆而美丽。

针对十英尺用户体验的优化

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

除了前面的设计和布局注意事项之外，在开发应用程序时，您还应考虑许多 游戏手柄和遥控器交互 优化。

UI 元素尺寸

由于 10 英尺环境中的应用用户使用的是遥控器或游戏板，并且与屏幕相隔几英尺，因此需要考虑一些 UI 设计要点。 确保 UI 具有适当的内容密度，并且不太混乱，以便用户可以轻松导航和选择元素。 请记住：简单性是关键。

比例因子和自适应布局

缩放因子 有助于确保 UI 元素根据运行应用的设备正确调整大小并显示。 在桌面上，可以在 设置 > 系统 > 显示 作为滑动值找到此设置。 如果设备支持，则手机中也存在此设置。

在 Xbox One 上，没有此类系统设置；但是，为了让 UWP UI 元素适配电视尺寸，它们在默认情况下缩放为 XAML 应用的 200%，HTML 应用的 150%。 只要 UI 元素的大小适用于其他设备，它们就同样适用于电视。 Xbox One 以 1080p（1920 x 1080 像素）呈现你的应用。 因此，当将应用程序从其他设备（如电脑）移植过来时，请确保UI在960 x 540像素的100%缩放（或在HTML应用中的1280 x 720像素的100%缩放）时，看起来很出色，并使用自适应技术。

为 Xbox 设计与为 PC 设计略有不同，因为你只需担心一个分辨率，即1920 x 1080。 用户是否有更好的分辨率的电视并不重要 — UWP 应用将始终扩展到 1080p。

在 Xbox One 上运行时，将会为您的应用程序提取 200%（或适用于 HTML 应用的 150%）系列中正确的资产大小，而不考虑电视分辨率。

内容密度

设计应用时，请记住，用户将从远处查看 UI，并使用远程或游戏控制器与之交互，这比使用鼠标或触摸输入需要花费更多的时间进行导航。

UI 控件的大小

交互式 UI 元素的大小应至少为 32 epx（有效像素）。 这是常见 UWP 控件的默认值，在 200% 缩放时，它可确保 UI 元素从远处可见，并帮助减少内容密度。

处

单击次数

当用户从电视屏幕的一个边缘导航到另一个边缘时，只需 六次单击 即可简化 UI。 同样，简单性原则 在此处适用。

跨 6 个图标

文本大小

若要使用户界面从远处可见，请使用以下原则：

• 主文本和阅读内容的字体：至少 15 个 epx
• 非关键文本和补充内容：最低 12 个 epx

在使用较大文本的用户界面中，选择一个不会过多限制屏幕空间的大小，避免占用其他内容可能需要的空间。

取消比例因子设置

我们建议你的应用利用缩放因子支持功能，这将有助于其通过根据每种设备类型进行缩放调整，使其能够在所有设备上合适地运行。 但是，可以选择退出此行为，并将所有 UI 设计为 100% 缩放。 请注意，您不能将缩放因子更改为不是 100%的任何内容。

对于 XAML 应用，可以使用以下代码片段选择退出比例因子：

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

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

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

请务必通过将本主题中提到的 有效 像素值乘以 2 的方式来计算合适的 UI 元素大小，并转换为 实际 像素值（对于 HTML 应用，乘以 1.5）。

电视安全区域

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

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

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

主题颜色

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

图片

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

这是你的应用在无需额外工作的情况下的外观。

这不是最佳选择，因为它给应用带来一种"装箱"的视觉效果，使得 UI 的某些部分（例如导航窗格和网格）看起来似乎被截断了。 但是，你可以进行优化，将 UI 的某些部分扩展到屏幕边缘，使应用具有更电影的效果。

将 UI 绘制到边缘

建议使用某些 UI 元素扩展到屏幕边缘，以便为用户提供更沉浸感。 其中包括 ScrollViewers、导航窗格和 CommandBars。

另一方面，交互式元素和文本始终避免屏幕边缘，以确保它们不会在某些电视上被切断，这一点也很重要。 建议仅在距屏幕边缘 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（如上下文菜单和打开的 ComboBoxes）将自动保留在电视安全区域中。

窗格背景

导航窗格通常绘制在屏幕边缘附近，因此背景应扩展到电视显示不安全区，以避免出现不必要的空隙。 只需将导航窗格背景的颜色更改为应用背景的颜色即可执行此操作。

使用前面所述的核心窗口边界，可以将 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>

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

滚动列表和网格的末尾

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

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

UWP 具有将焦点视觉对象保留在 VisibleBounds内的功能，但你需要添加填充以确保列表/网格项可以滚动到安全区域的视图中。 具体而言，将正边距添加到 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}"
                  ... />

若要更精细地控制项的查看方式，如果应用程序面向版本 1803 或更高版本，则可以使用 UIElement.BringIntoViewRequested 事件。 可以将它放在 ItemsPanel 上的 ListView/ GridView 上，以便在内部 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.DefaultLabelPosition 属性设置为 CommandBarDefaultLabelPosition.Right。

在图标右侧带有标签的 CommandBar

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

工具提示

工具提示 控件是当用户将鼠标悬停在元素上或点击并按住其图形时在 UI 中提供更多信息的方法。 对于游戏手柄和遥控器，当元素获得焦点后，Tooltip 会在短暂的时刻出现，停留在屏幕上片刻，然后消失。 如果使用过多 Tooltip，则此行为可能会分散注意力。 在为电视设计时，尽量避免使用 Tooltip。

按钮样式

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

嵌套的 UI 元素

嵌套 UI 公开包含在容器 UI 元素内的嵌套可操作项，其中嵌套项和容器项可以相互独立焦点。

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

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

MediaTransportControls

MediaTransportControls 元素允许用户通过提供允许他们播放、暂停、打开隐藏式字幕等的默认播放体验来与其媒体进行交互。 此控件是 MediaPlayerElement 的属性，支持两种布局选项：单行 和 双行。 在单行布局中，滑块和播放按钮全部位于一行中，播放/暂停按钮位于滑块左侧。 在双行布局中，滑块占据一行，而播放按钮位于单独的下一行。 在设计 10 英尺体验时，应使用双行布局，因为它为游戏板提供更好的导航。 若要启用双行布局，请在 IsCompact="False"的 MediaTransportControls 属性的 元素上设置 MediaPlayerElement。

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

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

搜索体验

搜索内容是 10 英尺体验中最常执行的功能之一。 如果您的应用提供搜索体验，使用游戏手柄上的 Y 按钮作为快捷键，可以帮助用户快速访问。

大多数客户应该已经熟悉此加速器，但如果您愿意，可以在 UI 中添加视觉对象 Y 字形，以指示客户可以使用按钮来访问搜索功能。 如果确实添加此提示符，请务必使用 Segoe Xbox MDL2 Symbol 字体中的符号（ 适用于 XAML 应用，\E426 适用于 HTML 应用），以确保与 Xbox shell 和其他应用程序保持一致。

由于 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，并且它可以正常工作，但未必针对十英尺用户体验进行优化，可能导致用户感到沮丧。 按照本文中的准则，可以确保你的应用在电视上尽可能达到最佳效果。

相关文章

• 适用于 Windows 应用的设备指南
• 游戏手柄与远程控制器交互
• 在 UWP 应用中声音