Xbox One – Gestion du design en focus sur des contrôles

Lors de mon développement sur Xbox One, je me suis confronté à la modification du design d’un contrôle lorsque celui-ci a le focus.

Il faut savoir que le comportement du focus n’est pas le même entre la souris et la manette. En effet, avec la souris quand l’utilisateur passe sur le contrôle, l’état PointerOver du contrôle est levé dans le VisualState  en XAML, or avec la manette, c’est l’état Focused qui est levé (quand celui-ci le possède).

En effet, on ne trouve pas l’état Focused  dans le VisualState de tous les contrôles, comme par exemple le bouton. De ce fait, par défaut on se retrouve avec une bordure noire autour du contrôle quand il a le focus.

On en convient, ce n’est pas vraiment très esthétique, de plus, on peut seulement modifier la couleur et l’épaisseur de cette bordure facilement en XAML, ce qui est parfois limité selon le rendu souhaité.

Du coup, la première solution pour modifier le design, est de s’abonner à l’événement GotFocus du contrôle. Et ainsi de faire en code-behind les modifications visuelles que l’on souhaite. Mais on peut en convenir, cette solution n’est pas vraiment adaptée car on ne va pas pouvoir facilement généraliser ce design et il sera difficilement maintenable.

La solution que je vous propose est de créer un nouveau contrôle bouton et d’overrider la méthode OnGotFocus pour y ajouter un nouveau VisualStateManager .

Ensuite vous pouvez éditer le style de votre bouton comme cela :

Vous pourrez ainsi facilement modifier le nouveau  <VisualState x:Name="Focused">  pour réaliser le design que vous souhaitez sur Xbox One.