Nota
O acesso a esta página requer autorização. Pode tentar iniciar sessão ou alterar os diretórios.
O acesso a esta página requer autorização. Pode tentar alterar os diretórios.
O Reveal Focus é um efeito de iluminação para experiências de 3 metros, como consolas de jogos em ecrãs 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 para eles. Ele está desativado por padrão, mas é simples de ativar.
APIs Importantes: propriedade Application.FocusVisualKind, enumeração FocusVisualKind, propriedade Control.UseSystemFocusVisuals
Como funciona
O Reveal Focus chama a atenção para elementos focados adicionando um brilho animado ao redor da borda do elemento:
Isso é especialmente útil em cenários de 10 pés onde o usuário pode não estar prestando atenção total a toda a tela da TV.
Exemplos
O aplicativo WinUI 2 Gallery inclui exemplos interativos da maioria dos controles, recursos e funcionalidades do WinUI 2. Obtenha o aplicativo no
Como utilizá-lo
Revelar foco está desativado por padrão. Para ativar:
- No construtor da sua aplicação, chame a propriedade AnalyticsInfo.VersionInfo.DeviceFamily e verifique se a família de dispositivos atual é
Windows.Xbox. - Caso a família de dispositivos seja
Windows.Xbox, defina a propriedade Application.FocusVisualKind comoFocusVisualKind.Reveal.
if(AnalyticsInfo.VersionInfo.DeviceFamily == "Windows.Xbox")
{
this.FocusVisualKind = FocusVisualKind.Reveal;
}
Depois de definir a propriedade FocusVisualKind, o sistema aplica automaticamente o efeito Reveal Focus a todos os controlos cuja propriedade UseSystemFocusVisuals está definida como True (o valor padrão para a maioria dos controlos).
Por que o Reveal Focus não é ativado por padrão?
Como você pode ver, é bastante fácil ativar o Reveal Focus quando o aplicativo deteta que está sendo executado em um Xbox. Então, por que o sistema não o ativa apenas para você? Porque o Reveal Focus aumenta o tamanho do foco visual, o que pode causar problemas com o layout da interface do usuário. Em alguns casos, convém personalizar o efeito Revelar foco para otimizá-lo para seu aplicativo.
Personalizando o foco de revelação
Você pode personalizar o efeito de Revelação de Foco modificando as propriedades visuais de foco para cada um dos controlos: FocusVisualPrimaryThickness, FocusVisualSecondaryThickness, FocusVisualPrimaryBrushe FocusVisualSecondaryBrush. Essas propriedades permitem personalizar a cor e a espessura do retângulo de foco. (São as mesmas propriedades que você usa para criar visuais de foco de alta visibilidade.)
Mas antes de começar a personalizá-lo, é útil saber um pouco mais sobre os componentes que compõem o Reveal Focus.
Há três elementos nos visuais padrão do Foco Reveal: a borda primária, a borda secundária e o efeito de luz Reveal. A borda primária tem 2px de espessura e corre ao redor da fora da borda secundária. A borda secundária tem 1px de espessura e corre ao redor do interior da borda primária. O brilho do Foco de Revelação tem uma espessura proporcional à espessura da borda primária e corre ao redor da fora da borda primária.
Além dos elementos estáticos, os visuais do Reveal Focus apresentam uma luz animada que pulsa quando está em repouso e se move na direção do foco ao mover o foco.
Personalizar a espessura da borda
Para alterar a espessura dos tipos de borda de um controle, use estas propriedades:
| Tipo de borda | Propriedade |
|---|---|
| Primário, Brilho |
FocusVisualPrimaryThickness (Alterar a borda primária altera a espessura do brilho proporcionalmente.) |
| Secundária | EspessuraVisualSecundáriaDoFoco |
Este exemplo altera a espessura da borda do foco visual de um botão:
<Button FocusVisualPrimaryThickness="2" FocusVisualSecondaryThickness="1"/>
Personalizar a margem
A margem é o espaço entre os limites visuais do controlo e o começo da borda secundária dos elementos visuais de foco. A margem padrão está a 1 px de distância dos limites de controle. Você pode editar essa margem por controle alterando a propriedade FocusVisualMargin:
<Button FocusVisualPrimaryThickness="2" FocusVisualSecondaryThickness="1" FocusVisualMargin="-3"/>
Uma margem negativa empurra a fronteira para 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 Reveal Focus, use as propriedades FocusVisualPrimaryBrush e FocusVisualSecondaryBrush .
(A propriedade FocusPrimaryBrush só assume como padrão os recursos
Para alterar a cor do foco visual de um controle individual, defina as propriedades diretamente no controle. Este exemplo substitui as cores visuais de 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 de foco em todo o aplicativo, substitua 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 obter mais informações sobre como modificar a cor do visual de foco, consulte Marca de cores & Personalização.
Mostrar apenas o brilho
Se você quiser usar apenas o brilho sem o foco visual primário ou secundário, basta definir a propriedade
<!-- Show just the glow -->
<Button
FocusVisualPrimaryBrush="Transparent"
FocusVisualSecondaryThickness="0" />
Use os seus próprios elementos de destaque
Outra maneira de personalizar o Reveal Focus é desativar os visuais de foco fornecidos pelo sistema e desenhar os seus próprios usando estados visuais. Para saber mais, consulte o exemplo de visuais do Focus.