Astuces pour le développement UWP sur Xbox

Depuis l’arrivée de la mise à jour « Windows Anniversary Update », build 14393, il est possible de créer des applications sur Xbox One. Pour cela, rien de plus simple pour les développeurs d’application Windows 10, il faut un projet de type UWP. Les anciennes applications UWP sont donc compatibles, avec au minium la version de build à 14393. La plupart des API fournies par UWP sont compatibles sur Xbox One, à part quelques unes qui font encore de la résistance. Je vous conseille de regarder les API non supportées sur ce lien.

Avant de commencer

Pour déployer sur votre Xbox One, il vous faudra passer votre console en mode développeur. Voici la procédure pour mettre votre console en mode dev.

Quand le mode dev est activé sur la console, il faudra également jumeler votre Visual Studio avec la Xbox One, la procédure est ici.

Astuce

Lors du développement d’application sur Xbox One, il ne faut pas oublier d’adapter l’interface de votre application à un usage manette pour avoir la meilleure expérience utilisateur. En effet, de base quand vous allez déployer votre application sur Xbox, un curseur va s’afficher sur l’écran ainsi qu’un margin  sur les côtés.

Application « Les Indés Radios »

On en convient, le curseur n’est pas vraiment le mieux pour la navigation de l’utilisateur et on perd pas mal d’espace à cause des margin .

Supprimer le margin

L’application ne va pas occuper l’ensemble de l’écran et va donc créer un margin  sur l’interface utilisateur pour éviter les zones inadaptées de l’écran de télévision. On va donc retrouver un margin de 27epx en haut et en bas, ainsi qu’un margin de 48epx à droite et à gauche. (PS: epx correspond au effective pixel de Microsoft)

Au lieu de rajouter un margin négative sur nos vues, on va pouvoir rajouter ce morceau de code dans le OnLaunched  de notre App.xaml.cs:

Avec cette ligne, l’interface de l’application va remplir l’intégralité de l’écran sans avoir à mettre des  margin  négatifs.

Néanmoins, il faut penser à ne pas mettre des éléments cliquables ou importants dans cette zone, car vous prenez le risque qu’il ne soit pas affiché à l’utilisateur en fonction de son écran de télévision .

Information : L’interface de la Xbox est zoomée à 200%.

Supprimer le curseur

Un curseur apparaît par défaut sur l’interface Xbox, comme une souris d’ordinateur. Ce curseur est assez lent dans le déplacement et n’est pas vraiment adapté à l’usage d’une manette. Il en convient de le désactiver. Car une navigation XY avec un focus permet à l’utilisateur de ce déplacer rapidement entre les différents contrôles.

Pour supprimer la gestion du curseur, il nous suffit de rajouter cette petite ligne dans le constructeur de notre  App.xaml.cs :

Cette ligne va donc désactiver le mode souris, et le réactiver quand un contrôle ou une page le demandera.

Le contrôle webview affiche automatiquement le curseur quand il a le focus.

Pour activer le mode souris sur un contrôle, il faut utiliser la propriété RequiresPointer="WhenEngaged"  ainsi que IsEngagementRequired="true" , sinon le mode souris ne sera pas activé.

Voici un petit rendu quand le margin et le curseur sont supprimés :

Application « Les Indés Radios » en supprimant le margin et le curseur

Mode focus XY

Une fois le mode focus XY activé avec  this.RequiresPointerMode = ApplicationRequiresPointerMode.WhenRequested; , la navigation avec les sticks multidirectionnels est automatiquement gérée sur tous les éléments avec une interaction (bouton, gridview, listview, …).

Mais il vous est possible de désactiver cette gestion avec la propriété IsTabStop à False . De plus, si le contrôle n’est pas visible  Visibility="Collapsed" , le focus est également désactivé.

Vous pouvez rajouter ces lignes dans vos pages ou App  pour savoir où se trouve votre focus lors de vos développements :

 

Personnalisation du focus visuel

De base le focus visuel n’est pas vraiment très design. Un contour noir de 2epx ainsi qu’un contour de la couleur d’accentuation apparaît sur les éléments d’interface lors de leur focus. Cela permet à l’utilisateur de savoir où il se trouve dans l’interface.

Focus sur un bouton

 

 

 

 

 

 

Voici les propriétés à modifier pour le focus visuel :

Focus modifié sur le bouton

Il est aussi possible de désactiver l’affichage automatique du focus avec  UseSystemFocusVisuals="False" et ainsi de gérer vous même le design du focus avec le VisualState de l’élément.

Grâce à ces petites astuces, à vous de jouer pour adapter votre application UWP sur Xbox One 😉