Foco de Revelação

  • Artigo

hero image

Revelar Foco é um efeito de iluminação para experiências de 3 metros, como consoles de jogos em telas de televisão. Ele anima a borda de elementos focalizáveis, como botões, quando o usuário move o foco do gamepad ou do teclado até eles. Ele está desativado por padrão, mas é fácil de habilitar.

APIs importantes: Propriedade Application.FocusVisualKind, Enumeração FocusVisualKind e Propriedade Control.UseSystemFocusVisuals

Como ele funciona

O Foco de Revelação chama atenção para os elementos em foco adicionando um brilho animado ao redor da borda do elemento:

Reveal Visual

Isso é especialmente útil em cenários de 3 metros em que o usuário pode não estar prestando atenção total à tela inteira da TV.

Exemplos

Galeria WinUI 2
WinUI Gallery

Se você tiver o aplicativo WinUI 2 Gallery instalado, clique aqui para abrir o aplicativo e ver o Revelar Foco em ação.

Como usá-lo

O Foco de Revelação está desativado por padrão. Para habilitá-lo:

  1. no construtor do aplicativo, chame a propriedade AnalyticsInfo.VersionInfo.DeviceFamily e verifique se a família de dispositivos atual é Windows.Xbox.
  2. Se a família de dispositivos for Windows.Xbox, defina a propriedade Application.FocusVisualKind como FocusVisualKind.Reveal.
    if(AnalyticsInfo.VersionInfo.DeviceFamily == "Windows.Xbox")
    {
        this.FocusVisualKind = FocusVisualKind.Reveal;
    }

Após definição da propriedade FocusVisualKind, o sistema aplica automaticamente o efeito Foco de Revelação a todos os controles cuja propriedade UseSystemFocusVisuals esteja definida como True (o valor padrão da maioria dos controles).

Por que o Foco de Revelação não está ativado por padrão?

Como você pode ver, é muito fácil ativar o Foco de Revelação quando o aplicativo detecta que ele está sendo executado em um Xbox. Então, por que o sistema não o ativa para você? Porque o Foco de Revelação aumenta o tamanho do visual do foco, o que pode causar problemas com o layout da interface do usuário. Em alguns casos, talvez seja conveniente personalizar o efeito Foco de Revelação a fim de otimizá-lo para seu aplicativo.

Como personalizar o Foco de Revelação

Você pode personalizar o efeito Revelar Foco modificando as propriedades visuais de foco para cada controle: FocusVisualPrimaryThickness, FocusVisualSecondaryThickness, FocusVisualPrimaryBrushe FocusVisualSecondaryBrush. Essas propriedades permitem que você personalize a cor e a espessura do retângulo do foco. (Elas são as mesmas propriedades usadas para criar visuais de foco de alta visibilidade).

Porém, antes de começar a personalizá-lo, vale a pena saber um pouco mais sobre os componentes que fazem parte do Foco de Revelação.

Há três partes nos visuais do Foco de Revelação padrão: a borda principal, a borda secundária e o brilho da Revelação. A borda principal tem espessura de 2px e é traçada em torno da parte externa da borda secundária. A borda secundária tem espessura de 1px e é traçada em torno da parte interna da borda principal. O brilho do Foco de Revelação tem espessura proporcional à espessura da borda principal e é visto na parte externa da borda principal.

Além dos elementos estáticos, os visuais do Foco de Revelação contam com uma luz animada que pulsa quando está em repouso e que se move na direção do foco quando o foco é movido.

Reveal Focus layers

Personalizar a espessura da borda

Para alterar a espessura dos tipos de borda de um controle, use estas propriedades:

Tipo de borda Propriedade
Principal, brilho FocusVisualPrimaryThickness
(A alteração da borda principal altera a espessura do brilho proporcionalmente).
Secundário FocusVisualSecondaryThickness

Este exemplo altera a espessura da borda do visual do foco de um botão:

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

Personalizar a margem

A margem é o espaço entre os limites do visual do controle e o início da borda secundária dos visuais do foco. A distância entre a margem padrão e os limites de controle é de 1px. Você pode editar essa margem de acordo com o controle alterando a propriedade FocusVisualMargin:

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

Uma margem negativa move a borda para mais longe do centro do controle, e uma margem positiva move a borda para mais perto do centro do controle.

Personalizar a cor

Para alterar a cor do visual do Foco de Revelação, use as propriedades FocusVisualPrimaryBrush e FocusVisualSecondaryBrush.

Propriedade Recurso padrão Valor do recurso padrão
FocusVisualPrimaryBrush SystemControlRevealFocusVisualBrush SystemAccentColor
FocusVisualSecondaryBrush SystemControlFocusVisualSecondaryBrush SystemAltMediumColor

(A propriedade FocusPrimaryBrush será padronizada somente para os recursos SystemControlRevealFocusVisualBrush quando FocusVisualKind for definida como Reveal. Caso contrário, ela usará SystemControlFocusVisualPrimaryBrush).

Para alterar a cor do visual do foco de um controle individual, defina as propriedades diretamente no controle. Este exemplo substitui as cores do visual do foco de um botão.


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

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

Para alterar a cor de todos os visuais do foco em todo o aplicativo, substitua os recursos SystemControlRevealFocusVisualBrush e SystemControlFocusVisualSecondaryBrush pela sua própria definição:

<!-- 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 saber mais sobre como modificar a cor do visual do foco, confira Personalização e identidade visual de cores.

Mostrar apenas o brilho

Se desejar usar apenas o brilho sem o visual do foco principal ou secundário, basta definir a propriedade FocusVisualPrimaryBrush do controle como Transparent e FocusVisualSecondaryThickness como 0. Nesse caso, o brilho adotará a cor da tela de fundo do controle para dar uma sensação de que não há borda. Você pode modificar a espessura do brilho usando FocusVisualPrimaryThickness.


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

Use seus próprios visuais de foco

Outra maneira de personalizar o Foco de Revelação é recusar os visuais de foco fornecidos pelo sistema desenhando os seus próprios usando os estados visuais. Para saber mais, confira a amostra de visuais do foco.

Foco de Revelação e o Sistema de Design Fluente

O Foco de Revelação é um componente do Sistema de Design Fluente que adiciona iluminação ao seu aplicativo. Para saber mais sobre o sistema do Fluent Design e os outros componentes dele, confira a Visão geral do Fluent Design.