Mostrar foco

Reveal Focus es un efecto de iluminación para experiencias desde una distancia de 3 metros, como consolas de videojuegos en pantallas de televisión. Anima el borde de los elementos enfocados, como botones, cuando el usuario mueve el controlador para juegos o el foco del teclado a ellos. Está desactivado de forma predeterminada, pero es fácil de habilitar.

APIs importantes: propiedad Application.FocusVisualKind, enumeración FocusVisualKind, Control.UseSystemFocusVisuals

Cómo funciona

Reveal Focus llama la atención a los elementos centrados agregando un resplandor animado alrededor del borde del elemento:

Esto es especialmente útil en escenarios de 10 pies en los que es posible que el usuario no preste atención completa a toda la pantalla de TV.

Ejemplos

La aplicación WinUI 2 Gallery incluye ejemplos interactivos de la mayoría de los controles, características y funcionalidades de WinUI 2. Obtenga la aplicación en Microsoft Store u obtenga el código fuente en GitHub.

Cómo utilizarlo

Reveal Focus está desactivado de forma predeterminada. Para habilitarla:

1. En el constructor de la aplicación, llame a la propiedad AnalyticsInfo.VersionInfo.DeviceFamily y compruebe si la familia de dispositivos actual es Windows.Xbox.
2. Si la familia de dispositivos es Windows.Xbox, establezca 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 a todos los controles cuya propiedad UseSystemFocusVisuals se establece en True (el valor predeterminado para la mayoría de los controles).

¿Por qué no está activado Revelar Enfoque de forma predeterminada?

Como puedes ver, es bastante fácil activar Reveal Focus cuando la aplicación detecta que se ejecuta en una Xbox. Entonces, ¿por qué el sistema no lo enciende por ti? Dado que Reveal Focus aumenta el tamaño del objeto visual de foco, lo que puede causar problemas con el diseño de la interfaz de usuario. En algunos casos, querrás personalizar el efecto Reveal Focus para optimizarlo para tu aplicación.

Personalización del foco de Reveal

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

Pero antes de empezar a personalizarlo, resulta útil conocer un poco más sobre los componentes que componen Reveal Focus.

Hay tres partes en los objetos visuales Reveal Focus predeterminados: el borde principal, el borde secundario y el resplandor Reveal. El borde principal es de 2px de grosor y corre alrededor del exterior del borde secundario. El borde secundario es de color, con un grosor de 1px y rodea el interior de dentro del borde principal. El resplandor Reveal Focus tiene un grosor proporcional al grosor del borde principal y se ejecuta alrededor del exterior del borde principal.

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

Personalizar el grosor del borde

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

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

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

Personalización del margen

El margen es el espacio entre los límites visuales del control y el inicio del borde secundario de los objetos visuales de foco. El margen predeterminado está 1px lejos de los límites del control. Puede editar este margen para cada control individualmente cambiando la propiedad FocusVisualMargin.

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

Un margen negativo aleja el borde del centro del control y un margen positivo mueve el borde más cerca del centro del control.

Personalizar el color

Para cambiar el color del elemento visual de enfoque Reveal, use las propiedades FocusVisualPrimaryBrush y FocusVisualSecondaryBrush .

(La propiedad FocusPrimaryBrush solo tiene como valor predeterminado los recursos de SystemControlRevealFocusVisualBrush cuando FocusVisualKind se establece en el valor Reveal. De lo contrario, utiliza SystemControlFocusVisualPrimaryBrush.)

Para cambiar el color del objeto visual de foco de un control individual, establezca las propiedades directamente en el control. En este ejemplo se anulan los colores de enfoque visual 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 objetos visuales de foco en toda la aplicación, invalide el SystemControlRevealFocusVisualBrush y SystemControlFocusVisualSecondaryBrush recursos con su 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 cómo modificar el color del objeto visual de foco, vea Personalización y personalización de marca de color.

Mostrar solo el resplandor

Si desea usar solo el resplandor sin el indicador visual de enfoque principal o secundario, simplemente establezca la propiedad FocusVisualPrimaryBrush del control en Transparent y el grosor de FocusVisualSecondaryThickness en 0. En este caso, el resplandor adoptará el color del fondo del control para proporcionar una sensación sin bordes. Puede ajustar el grosor de la iluminación mediante FocusVisualPrimaryThickness.

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

Usar sus propios objetos visuales de enfoque

Otra manera de personalizar Reveal Focus es decidir no usar los visuales de enfoque proporcionados por el sistema, dibujando los propios estados visuales. Para obtener más información, consulte el ejemplo de visuales de enfoque .

Artículos relacionados

• interacciones de controlador para juegos y control remoto
• ejemplo de elementos visuales de enfoque
• Efectos de Composición
• Ciencia en el Sistema: Fluent Design y Profundidad
• Ciencia en el sistema: Fluent Design y luz