我们如何将Dailymotion UWP应用引入Windows 10的Xbox One

该演示文稿是在2016年10月5日在法国巴黎举行的Microsoft Experiences 16活动期间进行的。

Microsoft Experiences是每年在法国巴黎举行的为期2天的活动,每年在巴黎会议大厦举行。 该活动由第一天的商务会议和其他的技术会议组成 ,在这两天中,超过650位演讲者进行了300多次会议

本文是为那些无法参加演示,不会讲法语或只是真的很喜欢并想再次看一下并可能受到我提供的一些代码示例启发的人编写的。

*除了担任Dailymotion(全球最大的视频流平台之一)的首席Windows软件工程师外,我还是Microsoft的MVP。 *

我们Dailymotion决定跟随Microsoft UWP的发展,因此开发了一种可在所有3种平台上运行的应用程序,即桌面 / 移动 / Xbox One 。 我们有一个可以在所有 3个平台上运行的代码库,并且每个平台在必要时都有自己的特定视图(例如:视频页面)。

以上是我们将要研究的四个主题。

您的Xbox One用户可能没有鼠标和键盘,但是他们都将拥有游戏板或遥控器,您的应用程序必须可通过这两个新的输入设备进行导航。

这是一个示例,说明我们Dailymotion如何将GamePad / Remote上的按钮映射到应用程序中的不同功能。

例如在手柄/遥控器上:

  • 菜单按钮可在我们的Dailymotion应用程序中打开和关闭菜单
  • B按钮允许用户返回上一个动作
  • 使用Y按钮,用户可以进入搜索视图

默认情况下,您的UWP将处于鼠标模式,我强烈建议关闭此模式 ,并使Xbox One应用程序与Gamepad / Remote兼容。

将您的应用程序移植到Xbox One时,最重要的任务之一就是使Gamepad和Remote 100%为您的应用程序正常运行。

我们将不再定义焦点陷阱的定义,您可以在MSDN上找到它

例如,这里有两个焦点陷阱:

  • AutoSuggestBox是一个很好的示例,此控件是一个焦点陷阱,因为您的用户将很难选择该控件提出的建议。 焦点将放在AutoSuggestBox的文本框上,您将无法访问该文本框正下方的列表视图。
  • Listview也将是一个陷阱,当该ListView可以进行无尽的加载时,您将被卡在该控件中,并且将永远无法访问其下方的元素。

您和您的设计师必须了解,为电视构建应用程序将需要您重新考虑应用程序的设计,这一点非常重要。

如前所述,具有无限负载的Listviews和Gridviews是焦点陷阱,您将永远无法访问这些项目下方的内容。 具有负边距的控件也可以是焦点陷阱。

经验法则是,如果要隐藏控件,则应将可见性属性设置为折叠,而不是设置负边距以隐藏元素。

这小段代码将使您能够轻松地找到您所关注的位置和重点。

Statetriggers还可以用于检测您是否在Phone,Desktop或Xbox One上运行。 因此,根据您所处的平台,可以显示,隐藏或将元素设置为特定值。

例如,这里的商品模板在所有3个平台上都是相同的,我们只是更改了所处平台的宽度。

Dailymotion Windows 10应用程序是使用MVVM开发的,因为我不希望在后台(当然,可能的话)没有任何代码,所以StateTriggers页面是满足我需要的完美解决方案。

您必须非常注意视图中有多少个元素。 由于应用程序中的XY轴导航,您很快就会遇到无法访问的元素,这可能导致某些元素无法访问。

当默认的平板电脑应用程序移植到Xbox One上时,这就是我们的应用程序中发生的事情。

我们无法导航至:

  • 搜索栏
  • 我的简历
  • 设定值
  • 另外,访问以下标签也不容易

这不是很棒的用户体验…

同样,我们最终决定在此页面上为电视用户提供太多信息。

如您所见,这就是我们决定简化此页面的原因,这里有一个快速细分:

  • 我们将游戏板上的菜单按钮映射到应用程序上的菜单,这使我们可以在Xbox One应用程序中隐藏菜单。
  • 我们已经隐藏了搜索框,并在游戏手柄上显示Y按钮的Y图片,以告诉我们的用户他们可以使用Y按钮开始搜索。
  • 我们已将Listview更改为水平方向,以便用户可以更轻松地在应用程序内部导航。
  • 我们的缩略图更大,以便用户可以更好地看到它们。

视频页面上(这是应用程序中最重要的视图) ,电视用户再次遇到了太多的内容。

例如,对于Gamepad和Remote,我们无法选择“ 将视频发送到全屏”按钮,因此这并不是最佳的用户体验……
另外,播放/暂停按钮也很难访问。

因此,我们决定,当用户转到Xbox One上的视频页面时,他的视频将全屏显示。

我们决定删除所有与观看视频没有特别联系的控件/元素。 但是,我们确实可以通过单击游戏手柄上的X按钮来保持用户观看相关视频的能力。

这是您单击“显示更多”时将看到的内容。 如您所见,用户仍然可以关注或进入频道页面,还可以观看相关视频。

这是我们在会议期间遇到的两个有趣的问题:
我们是否使用/支持Kinect?
答案是否定的,我们不支持Kinect,我们决定不支持它,因为很多用户没有连接Kinect,现在Microsoft不再与Xbox One一起销售它。 但是,在黑客马拉松中添加它可能是一个有趣的辅助功能! 是的,使用UWP应用程序,您可以访问Kinect API。

另一个问题是, 是否可以将UWP应用投射到Xbox One?
答案是可以的 。 在Dailymotion上,我们使用DIAL协议向Xbox One广播视频,以便我们可以继续从台式机/移动设备向Xbox One播放视频。

总而言之, 将UWP应用程序移植到Xbox One应该是一种轻松的体验,因为您应该能够重用大多数代码和视图。 但是,您必须知道用户很可能不会使用键盘和鼠标,因此必须考虑这两个新的输入设备。

总的来说,为Xbox One进行开发是一个很棒的经验,我已经学到了很多,您也将学到很多!

编码愉快,
达米安