Reveal Focus

  • Artículo

hero image

Reveal Focus es un efecto de iluminación para experiencias de 3 metros, como las pantallas de televisión y las consolas de juego. Anima el borde de los elementos activables, como los botones, cuando el usuario mueve el foco del teclado o del controlador para juegos a ellos. Está desactivado de manera predeterminada, pero es muy sencillo habilitarlo.

API relevantes: propiedad Application.FocusVisualKind, enumeración FocusVisualKind, propiedad Control.UseSystemFocusVisuals

Cómo funciona

Reveal Focus llama la atención sobre los elementos enfocados al agregar un efecto de iluminado animado alrededor del borde del elemento:

Reveal Visual

Esto es especialmente útil en escenarios de 3 metros, donde el usuario podría no estar prestando toda su atención a la pantalla de televisión completa.

Ejemplos

WinUI 2 Gallery
WinUI Gallery

Si tiene instalada la aplicación Galería de WinUI 2, haga clic aquí paraabrir la aplicación y ver Reveal Focus en acción.

Cómo usarla

La opción Reveal Focus está desactivada de manera predeterminada. Para habilitarla:

  1. En el constructor de la aplicación, llama a la propiedad AnalyticsInfo.VersionInfo.DeviceFamily y comprueba si la familia de dispositivos actual es Windows.Xbox.
  2. Si la familia de dispositivos es Windows.Xbox, establece la propiedad Application.FocusVisualKind en FocusVisualKind.Reveal.
    if(AnalyticsInfo.VersionInfo.DeviceFamily == "Windows.Xbox")
    {
        this.FocusVisualKind = FocusVisualKind.Reveal;
    }

Después de establecer la propiedad FocusVisualKind, el sistema aplica automáticamente el efecto Reveal Focus en todos los controles cuya propiedad UseSystemFocusVisuals esté establecida en True (valor predeterminado de la mayoría de los controles).

¿Por qué Reveal Focus no está activado de manera predeterminada?

Como puedes ver, es bastante sencillo activar Reveal Focus cuando la aplicación detecta que se está ejecutando en una Xbox. Por lo tanto, ¿por qué el sistema no lo activa automáticamente? Porque Reveal Focus aumenta el tamaño del elemento visual de foco, lo que podría causar problemas con tu diseño de la interfaz de usuario. En algunos casos, te interesará personalizar el efecto Reveal Focus para optimizarlo para tu aplicación.

Personalización de Reveal Focus

Puede personalizar el efecto Reveal Focus al modificar las propiedades visuales de foco para cada control: FocusVisualPrimaryThickness, FocusVisualSecondaryThickness, FocusVisualPrimaryBrush y FocusVisualSecondaryBrush . Estas propiedades te permiten personalizar el color y el grosor del rectángulo del foco. (Son las mismas propiedades que usas para crear Elementos visuales de foco de alta visibilidad).

Pero antes de empezar la personalización, es útil saber un poco más sobre los componentes que componen Reveal Focus.

Hay tres partes en los elementos visuales de Reveal Focus predeterminados: el borde principal, el borde secundario y el efecto de iluminado de Reveal. El borde principal es de 2px de espesor y se ejecuta alrededor de la parte de fuera del borde secundario. El borde secundario es de 1px de espesor y se ejecuta alrededor de la parte de dentro del borde primario. El efecto de iluminado de Reveal Focus tiene un grosor proporcional al grosor del borde principal y rodea el exterior del borde principal.

Además de los elementos estáticos, los elementos visuales de Reveal Focus presentan una luz animada que late cuando está en reposo y que se mueve en la dirección del foco al moverlo.

Reveal Focus layers

Personalizar el grosor del borde

Para cambiar el grosor de los tipos de borde de un control, usa estas propiedades:

Tipo de borde Propiedad
Principal, efecto de iluminado FocusVisualPrimaryThickness
(Al cambiar el borde principal, se cambia el grosor del efecto de iluminado de manera proporcional).
Secundario FocusVisualSecondaryThickness

En este ejemplo se cambia el grosor del borde del elemento visual de foco de un botón:

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

Personalizar el margen

El margen es el espacio entre los límites de los elementos visuales del control y el inicio del borde secundario de los elementos visuales de foco. El margen predeterminado se encuentra a una distancia de 1 px de los límites del control. Puedes editar este margen según el control si cambias la propiedad FocusVisualMargin:

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

Un margen negativo aleja el borde del centro del control, mientras que un margen positivo acerca el borde al centro del control.

Personalizar el color

Para cambiar el color del elemento visual Reveal Focus, usa las propiedades FocusVisualPrimaryBrush y FocusVisualSecondaryBrush.

Propiedad Recurso predeterminado Valor del recurso predeterminado
FocusVisualPrimaryBrush SystemControlRevealFocusVisualBrush SystemAccentColor
FocusVisualSecondaryBrush SystemControlFocusVisualSecondaryBrush SystemAltMediumColor

(La propiedad FocusPrimaryBrush solo se establece en los recursos SystemControlRevealFocusVisualBrush de forma predeterminada cuando FocusVisualKind se establece en Reveal. De lo contrario, usa SystemControlFocusVisualPrimaryBrush).

Para cambiar el color de elemento visual de foco de un control individual, establece las propiedades directamente en el control. En este ejemplo se reemplazan los colores de los elementos visuales de foco de un botón.


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

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

Para cambiar el color de todos los elementos visuales de foco en toda la aplicación, reemplaza los recursos SystemControlRevealFocusVisualBrush y SystemControlFocusVisualSecondaryBrush por tu propia definición:

<!-- 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>

Para obtener más información sobre la modificación del color del elemento visual de foco, consulta Personalización de marca de color y personalización.

Mostrar solo el efecto de iluminado

Si quieres usar solo el efecto de iluminado sin el elemento visual de foco principal o secundario, solo tienes que establecer la propiedad FocusVisualPrimaryBrush del control en Transparent y FocusVisualSecondaryThickness en 0. En este caso, el efecto de iluminado adoptará el color de fondo del control para proporcionar una apariencia sin bordes. Puedes modificar el grosor del efecto de iluminado con FocusVisualPrimaryThickness.


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

Usar tus propios elementos visuales de foco

Otra manera de personalizar Reveal Focus consiste en descartar los elementos visuales de foco proporcionados por el sistema. Para ello, dibuja los tuyos propios mediante los estados visuales. Para obtener más información, consulta el ejemplo de elementos visuales de foco.

Reveal Focus y Fluent Design System

Reveal Focus es un componente de Fluent Design System que agrega luz a tu aplicación. Para obtener más información sobre Fluent Design System y sus otros componentes, consulta la Introducción a Fluent Design.