[devday.be] — Building one UWP app for the Xbox & Windows platforms, (demo) building a light version of dailymotion

We will go over the session that was given at the devday.be on November 27, 2018.

The slides were reduced to help keep this article to a reasonable size. you can find the full presentation and code at the end of this article.

We went of over what frameworks, and tools were used to built the dailymotion Xbox and Desktop apps.

Looking at the dailymotion UWP app

We looked at the different UI for the Xbox and Desktop application on the 2017 and 2018 applications.

We did a deep dive on the updated November 2018 release of the dailymotion app, and looked at how on for Xbox the search function was move to the left and mapped to the controller button to allow users to more easily access the search view.

We also looked at how the video thumbnails were larger on Xbox. This was done so that TV users would better see the content and also be able to understand where they where located in the application.

Building for Xbox

Next we looked at the different elements that we need to keep in mind when developer for Xbox. Safe zones, color range, navigation and focus traps where the 4 main issues we had and you will probably also have when developing for Xbox.

Inaccessible actions/elements

Looking at the dailymotion app we can see that follow actions where removed on the home view and on the search view. The follow actions where removed on the channels cards in the search view because a user can select a channel card but had no way of performing the action of following that channel.

Today, for a user on Xbox to follow a channel they must access the channel view.

Navigation on Xbox

We looked at what an Xbox user is going to use to navigate in your application.

We also looked at the search view of the dailymotion app on Xbox and saw that if a user typed “imagine” and wanted to select Imagine Dragons — On Top of the World he would have to click 5 times which can be argued as a design flaw.

Next, we looked a focus trap, what is a focus trap and how you can use a simple piece of code or use the Windows Community Toolkit to see want element is being focus.

Next we look at how you can build a TV UI that also works on desktop.

On today's’ application (November 2018) we can also see that both applications have a core UI that is shared and some differences depending on the platform we are on.

We look at how state trigger can help you hide or show elements depending on the platform you are on by only using XAML.

Lets build a quick dailymotion Xbox app on our laptop

Lastly we started coding a very light version of the dailymotion app:

Here is the service class that will allow us to get related videos using the dailymotion REST API, this will be used to populate the related videos in our gridview in the video view.

https://github.com/Delaire/Samples/blob/master/DevDaysBrussels_DmDemoApp/Services/RelatedVideoApiService.cs

Here is the service class that will allow us to get trending videos from the dailymotion REST API, this will be used to populate the gridview in our home view.

https://github.com/Delaire/Samples/blob/master/DevDaysBrussels_DmDemoApp/Services/TrendingVideoApiService.cs

App.cs file which allow us to set a PreferredLaunchViewSize and also for the Xbox application I highly recommend that we change the RequiresPointerMode to only to WhenRequested as follows:

this.RequiresPointerMode = Windows.UI.Xaml.ApplicationRequiresPointerMode.WhenRequested;

Here is what the app.cs code looks like:

https://github.com/Delaire/Samples/blob/master/DevDaysBrussels_DmDemoApp/App.xaml.cs

By forcing DeviceType to Xbox you can see how your application would look like on your developing device.

Using state triggers to change the DesireWidth depending on the platform and width of the application.

https://github.com/Delaire/Samples/blob/master/DevDaysBrussels_DmDemoApp/Views/MainView.xaml

Here is how to initialize the dailymotion player, by playing with the controls you can decided to show or hide the player controls. When loading a video you can also decide if you what to auto play the video or not. You can find all of the player properties on our developer portal.

https://github.com/Delaire/Samples/blob/master/DevDaysBrussels_DmDemoApp/Views/VideoView.xaml.cs

Using a WebView on the Xbox platform is going to bring you many focus trap issues, this is because we are setting the WebView in a grid and because we can’t focus a grid we are never going to be able to get out of this trap.

This is why we are going to set the WebView inside a Button, so that the focus is always set on the Button and not the WebView as the focus will always try to select the top element that can be focused of an item (I have found).

https://github.com/Delaire/Samples/blob/master/DevDaysBrussels_DmDemoApp/Views/VideoView.xaml

Thank you for reading, see you next year at the DevDay.be!

You can find the full Presentation about the session here and the application code here on github .