Révéler focus

  • Article

hero image

Révéler focus est un effet visuel pour les expériences à 3 mètres, comme les consoles de jeu et les écrans de télévision. Cet effet anime la bordure des éléments susceptibles d’être activés, comme les boutons, lorsque l’utilisateur déplace le focus du clavier ou du boîtier de commande sur ces derniers. Il est désactivé par défaut, mais il est facile de l’activer.

Important APIs : propriété Application.FocusVisualKind, énumération FocusVisualKind, propriété Control.UseSystemFocusVisuals

Fonctionnement

L’effet Révéler focus attire l’attention sur les éléments où se trouve le focus en ajoutant une lumière animée autour de la bordure de l’élément :

Reveal Visual

Ceci est particulièrement utile dans les scénarios à 3 mètres, où l’utilisateur peut ne pas être totalement concentré sur la totalité de l’écran de télévision.

Exemples

Galerie WinUI 2
WinUI Gallery

Si vous disposez de l’application Galerie WinUI 2, cliquez ici pour ouvrir l’application et voir Révéler focus en action .

Comment l’utiliser ?

Par défaut, Révéler focus est désactivé. Pour l’activer :

  1. Dans le constructeur de votre application, appelez la propriété AnalyticsInfo.VersionInfo.DeviceFamily et vérifiez si la famille d’appareils en cours est Windows.Xbox.
  2. Si la famille d’appareils est Windows.Xbox, définissez la propriété Application.FocusVisualKind sur FocusVisualKind.Reveal.
    if(AnalyticsInfo.VersionInfo.DeviceFamily == "Windows.Xbox")
    {
        this.FocusVisualKind = FocusVisualKind.Reveal;
    }

Une fois la propriété FocusVisualKind définie, le système applique automatiquement l’effet Révéler focus à tous les contrôles dont la propriété UseSystemFocusVisuals est définie sur True (la valeur par défaut pour la plupart des contrôles).

Pourquoi Révéler focus n’est pas activé par défaut ?

Comme vous pouvez le constater, il est relativement facile d’activer Révéler focus quand l’application détecte qu’elle est exécutée sur une Xbox. Pourquoi le système ne l’active pas simplement pour vous ? La raison en est que Révéler focus augmente la taille du visuel du focus, ce qui peut entraîner des problèmes avec la disposition de votre interface utilisateur. Dans certains cas, vous voudrez personnaliser l’effet Révéler focus afin de l’optimiser pour votre application.

Personnaliser l’effet Révéler focus

Vous pouvez personnaliser l’effet Révéler focus en modifiant les propriétés visuelles du focus pour chaque contrôle : FocusVisualPrimaryThickness, FocusVisualSecondaryThickness, FocusVisualPrimaryBrush, et FocusVisualSecondaryBrush. Ces propriétés vous permettent de personnaliser la couleur et l’épaisseur du rectangle de focus. (Ce sont les mêmes propriétés que vous utilisez pour la création de visuels de focus à haute visibilité.)

Mais avant de commencer la personnalisation, il est utile de connaître un peu plus les composants de l’effet Révéler focus.

Les visuels de Révéler focus par défaut sont composés de trois éléments : la bordure principale, la bordure secondaire et la lumière. La bordure principale a une épaisseur de 2 px et apparaît autour de la bordure secondaire extérieure. La bordure secondaire a une épaisseur de 1 px et apparaît autour de la bordure principale intérieure. La lumière de Révéler focus a une épaisseur proportionnelle à l’épaisseur de la bordure principale et apparaît autour de la bordure principale extérieure.

En plus des éléments statiques, les visuels de Révéler focus présentent une lumière animée qui clignote au repos et se déplace dans la direction du focus lors du déplacement de ce dernier.

Reveal Focus layers

Personnaliser l’épaisseur des bordures

Pour modifier l’épaisseur des types de bordures d’un contrôle, utilisez ces propriétés :

Type de bordure Propriété
Principale, Lumière FocusVisualPrimaryThickness
(Le fait de modifier la bordure principale modifie de façon proportionnelle l’épaisseur de la lumière.)
Secondary FocusVisualSecondaryThickness

Cet exemple modifie l’épaisseur de la bordure du visuel du focus d’un bouton :

<Button FocusVisualPrimaryThickness="2" FocusVisualSecondaryThickness="1"/>

Personnaliser la marge

La marge est l’espace entre les limites de l’élément visuel du contrôle et le début de la bordure secondaire des visuels du focus. La marge par défaut est à 1 px des limites du contrôle. Vous pouvez modifier cette marge pour chaque contrôle, en modifiant la propriété FocusVisualMargin :

<Button FocusVisualPrimaryThickness="2" FocusVisualSecondaryThickness="1" FocusVisualMargin="-3"/>

Une marge négative éloigne la bordure du centre du contrôle, tandis qu’une marge positive rapproche la bordure du centre du contrôle.

Personnaliser la couleur

Pour modifier la couleur du visuel Révéler focus, utilisez les propriétés FocusVisualPrimaryBrush et FocusVisualSecondaryBrush.

Propriété Ressource par défaut Valeur de la ressource par défaut
FocusVisualPrimaryBrush SystemControlRevealFocusVisualBrush SystemAccentColor
FocusVisualSecondaryBrush SystemControlFocusVisualSecondaryBrush SystemAltMediumColor

(La propriété FocusPrimaryBrush a seulement pour valeur par défaut les ressources SystemControlRevealFocusVisualBrush quand FocusVisualKind est défini sur Reveal. Dans le cas contraire, elle utilise SystemControlFocusVisualPrimaryBrush.)

Pour changer la couleur du visuel du focus d’un contrôle individuel, définissez les propriétés directement sur le contrôle. Cet exemple remplace les couleurs du visuel du focus d’un bouton.


<!-- Specifying a color directly -->
<Button
    FocusVisualPrimaryBrush="DarkRed"
    FocusVisualSecondaryBrush="Pink"/>

<!-- Using theme resources -->
<Button
    FocusVisualPrimaryBrush="{ThemeResource SystemBaseHighColor}"
    FocusVisualSecondaryBrush="{ThemeResource SystemAccentColor}"/>

Pour changer la couleur de tous les visuels du focus dans l’ensemble de votre application, vous devez remplacer les ressources SystemControlRevealFocusVisualBrush et SystemControlFocusVisualSecondaryBrush par votre propre définition :

<!-- App.xaml -->
<Application.Resources>

    <!-- Override Reveal Focus default resources. -->
    <SolidColorBrush x:Key="SystemControlRevealFocusVisualBrush" Color="{ThemeResource SystemBaseHighColor}"/>
    <SolidColorBrush x:Key="SystemControlFocusVisualSecondaryBrush" Color="{ThemeResource SystemAccentColor}"/>
</Application.Resources>

Pour plus d’informations sur la modification de la couleur du visuel du focus, consultez Personnalisation des couleurs et des visuels du focus.

Afficher uniquement la lumière

Si vous voulez utiliser seulement la lumière sans le visuel du focus principal ou secondaire, définissez simplement la propriété FocusVisualPrimaryBrush du contrôle sur Transparent et FocusVisualSecondaryThickness sur 0. Dans ce cas, la lumière adopte la couleur de l’arrière-plan du contrôle pour offrir un aspect sans bordure. Vous pouvez modifier l’épaisseur de la lumière avec FocusVisualPrimaryThickness.


<!-- Show just the glow -->
<Button
    FocusVisualPrimaryBrush="Transparent"
    FocusVisualSecondaryThickness="0" />

Utiliser vos propres visuels de focus

Une autre façon de personnaliser Révéler focus consiste à choisir de ne pas utiliser les visuels de focus fournis par le système en dessinant vos propres états visuels. Pour plus d’informations, consultez Exemples de visuels de focus.

Révéler focus et le système Fluent Design

Révéler focus est un composant du système Fluent Design qui ajoute des effets lumineux à votre application. Pour plus d’informations sur le système Fluent Design et ses autres composants, consultez Présentation de Fluent Design.