Partager via

Révéler le focus

image de héros

Reveal Focus est un effet d’éclairage pour les expériences à distance de 10 pieds, comme les consoles de jeu sur les écrans de télévision. Il anime la bordure des éléments focusables, tels que les boutons, lorsque l’utilisateur déplace le boîtier de commande ou le focus clavier vers eux. Elle est désactivée par défaut, mais elle est simple à activer.

API importantes: propriété Application.FocusVisualKind, enumFocusVisualKind , propriété Control.UseSystemFocusVisuals

Fonctionnement

Révéler Focus appelle l’attention sur les éléments ciblés en ajoutant une lumière animée autour de la bordure de l’élément :

révéler le visuel

Cela est particulièrement utile dans les scénarios de 10 pieds où l’utilisateur peut ne pas prêter une attention totale à l’écran de télévision entier.

Exemples

L’application WinUI 2 Gallery inclut des exemples interactifs de la plupart des contrôles, des caractéristiques et des fonctionnalités de WinUI 2. Obtenez l’application à partir du Microsoft Store ou obtenez le code source sur GitHub.

Comment l’utiliser

"Reveal Focus" est désactivé par défaut. 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 actuelle 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;
    }

Après avoir défini la propriété FocusVisualKind, 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 (valeur par défaut pour la plupart des contrôles).

Pourquoi la fonction "Révéler le focus" n'est-elle pas activée par défaut ?

Comme vous pouvez le voir, il est assez facile d’activer Révéler Focus lorsque l’application détecte qu’elle s’exécute sur une Xbox. Alors, pourquoi le système ne l’active-t-il pas pour vous ? Étant donné que Reveal Focus augmente la taille de l'élément visuel de mise au point, ce qui peut entraîner des problèmes avec la mise en page de votre interface utilisateur. Dans certains cas, vous souhaiterez personnaliser l’effet Révéler Focus pour l’optimiser pour votre application.

Personnalisation de la mise en évidence du focus

Vous pouvez personnaliser l’effet Révéler focus en modifiant les propriétés visuelles de mise au point pour chaque contrôle : FocusVisualPrimaryThickness, FocusVisualSecondaryThickness, FocusVisualPrimaryBrushet FocusVisualSecondaryBrush. Ces propriétés vous permettent de personnaliser la couleur et l’épaisseur du rectangle de focus. (Il s’agit des mêmes propriétés que celles que vous utilisez pour créer visuels de focus haute visibilité.)

Mais avant de commencer à le personnaliser, il est utile de connaître un peu plus les composants qui composent Révéler Focus.

Les visuels par défaut de Reveal Focus se composent de trois parties : la bordure primaire, la bordure secondaire et le halo Reveal. La bordure principale est 2px épaisse et s'étend autour à l'extérieur de la bordure secondaire. La bordure secondaire est de 1px d'épaisseur et fait le tour de à l'intérieur de de la bordure primaire. La lumière Révéler Focus a une épaisseur proportionnelle à l’épaisseur de la bordure primaire et s’exécute autour de la en dehors de la bordure primaire.

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

afficher les couches Focus

Personnaliser l’épaisseur de la bordure

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

Type de bordure Propriété
Primaire, Lueur FocusVisualPrimaryThickness
(La modification de la bordure primaire modifie l’épaisseur de la lumière proportionnellement.)
Secondaire FocusVisualSecondaryThickness

Cet exemple montre comment modifier l’épaisseur de bordure du visuel focus d’un bouton :

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

Personnaliser la marge

La marge est l’espace entre les limites visuelles du contrôle et le début de la bordure secondaire des visuels de focus. La marge par défaut est 1px loin 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 pousse la bordure loin du centre du contrôle, et une marge positive déplace la bordure plus près du centre du contrôle.

Personnaliser la couleur

Pour modifier la couleur du visuel de mise en évidence, utilisez les propriétés FocusVisualPrimaryBrush et FocusVisualSecondaryBrush .

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

(La propriété FocusPrimaryBrush est définie par défaut sur les ressources SystemControlRevealFocusVisualBrush lorsque FocusVisualKind est défini sur Révéler. Sinon, elle utilise SystemControlFocusVisualPrimaryBrush.)

Pour modifier la couleur du visuel de mise au point d’un contrôle individuel, définissez les propriétés directement sur le contrôle. Cet exemple remplace les couleurs visuelles 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 modifier la couleur de tous les visuels de focus dans toute votre application, remplacez la SystemControlRevealFocusVisualBrush et SystemControlFocusVisualSecondaryBrush ressources avec 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 de l’élément visuel de mise au point, consultez Personnalisation et création d’identité visuelle.

Afficher uniquement l'éclat

Si vous souhaitez utiliser uniquement l'éclat sans l'indicateur visuel principal ou secondaire du focus, définissez simplement la propriété FocusVisualPrimaryBrush sur Transparent et la FocusVisualSecondaryThickness sur 0. Dans ce cas, la lumière adoptera la couleur de l’arrière-plan de contrôle pour fournir une sensation sans bordure. Vous pouvez modifier l’épaisseur de la lumière à l’aide de FocusVisualPrimaryThickness.


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

Utilisez vos propres visuels de mise au point

Une autre façon de personnaliser Focus Révélation consiste à se passer des visuels de focus fournis par le système pour créer ses propres états visuels. Pour plus d’informations, consultez l’exemple de visuels Focus .