Estilos para foco em controles e FocusVisualStyle

Artigo
06/02/2023

Windows Presentation Foundation (WPF) fornece dois mecanismos paralelos para alterar a aparência visual de um controle quando ele recebe o foco do teclado. O primeiro mecanismo é usar setters de propriedade para propriedades como IsKeyboardFocused dentro do estilo ou modelo que é aplicado ao controle. O segundo mecanismo é fornecer um estilo separado como o valor da propriedade: o "estilo visual de foco" cria uma árvore visual separada para um adorno que desenha sobre o controle, em vez de FocusVisualStyle alterar a árvore visual do controle ou outro elemento da interface do usuário substituindo-o. Este tópico aborda os cenários em que cada um desses mecanismos é apropriado.

O objetivo do estilo visual de foco

O recurso de estilo visual de foco fornece um "modelo de objeto" comum para introduzir comentários visuais do usuário com base em navegação de teclado para qualquer elemento de interface do usuário. Isso é possível sem a aplicação de um novo modelo para o controle ou conhecendo a composição do modelo específico.

No entanto, como o recurso de estilo visual de foco funciona sem conhecer os modelos de controle, os comentários visuais que pode ser exibido para um controle usando um estilo visual de foco é necessariamente limitado. O que o recurso realmente faz é sobrepor uma árvore visual diferente (um adorno) na parte superior da árvore visual conforme criado por uma renderização de controle pelo modelo. Você define essa árvore visual separada usando um estilo que preenche a FocusVisualStyle propriedade.

Comportamento de estilo visual de foco padrão

Os estilos visuais de foco funcionam apenas quando a ação do foco foi iniciada pelo teclado. Qualquer ação do mouse ou alteração de foco por programação desabilita o modo de estilos visuais de foco. Para obter mais informações sobre as distinções entre os modos de foco, consulte Visão geral do foco.

Os temas dos controles incluem um comportamento de estilo visual de foco padrão que se torna o estilo visual de foco para todos os controles no tema. Esse estilo de tema é identificado pelo valor da tecla FocusVisualStyleKeyestática . Ao declarar seu próprio estilo visual de foco no nível do aplicativo, você pode substituir esse comportamento de estilo padrão dos temas. Como alternativa, se você definir o tema inteiro, deverá usar essa mesma chave para definir o estilo para o comportamento padrão para o tema inteiro.

Nos temas, o estilo visual de foco padrão é geralmente muito simples. A seguir está uma aproximação grosseira:

<Style x:Key="{x:Static SystemParameters.FocusVisualStyleKey}">
  <Setter Property="Control.Template">
    <Setter.Value>
      <ControlTemplate>
        <Rectangle StrokeThickness="1"
          Stroke="Black"
          StrokeDashArray="1 2"
          SnapsToDevicePixels="true"/>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

Quando usar estilos visuais de foco

Conceitualmente, a aparência dos estilos visuais de foco aplicados aos controles deve ser coerente de controle para controle. Uma maneira de garantir coerência é alterar o estilo visual de foto somente se você estiver compondo um tema inteiro, em que cada controle que está definido no tema obtém o mesmo estilo visual de foco ou alguma variação de um estilo que está relacionado visualmente de controle para controle. Como alternativa, você pode usar o mesmo estilo (ou estilos semelhantes) para estilizar cada elemento com foco no teclado em uma página ou em uma interface do usuário.

A configuração FocusVisualStyle de estilos de controle individuais que não fazem parte de um tema não é o uso pretendido de estilos visuais de foco. Isso ocorre porque um comportamento visual inconsistente entre controles pode levar a uma experiência confusa do usuário em relação ao foco do teclado. Se você estiver pretendendo comportamentos específicos de controle para o foco do teclado que deliberadamente não são coerentes em um tema, uma abordagem muito melhor é usar gatilhos em estilos para propriedades de estado de entrada individuais, como IsFocused ou IsKeyboardFocused.

Estilos visuais de foco agem exclusivamente para foco do teclado. Dessa forma, estilos visuais de foco são um tipo de recurso de acessibilidade. Se quiser alterações de interface do usuário para qualquer tipo de foco, seja por meio de mouse, teclado ou programaticamente, então você não deverá usar estilos visuais de foco e, em vez disso, deverá usar setters e disparadores nos estilos ou modelos que estão funcionando do valor das propriedades de foco gerais, como IsFocused ou IsKeyboardFocusWithin.

Como criar um estilo visual de foco

O estilo que você cria para um estilo visual de foco deve sempre ter o TargetType de Control. O estilo deve consistir principalmente de um ControlTemplate. Você não especifica o tipo de destino para ser o tipo em que o estilo visual de foco é atribuído ao FocusVisualStyle.

Como o tipo de destino é sempre Control, você deve estilizar usando propriedades comuns a todos os controles (usando propriedades da Control classe e suas classes base). Você deve criar um modelo que funcionará corretamente como uma sobreposição para um elemento de interface do usuário e que não ocultará áreas funcionais do controle. Em geral, isso significa que os comentários visuais devem aparecer fora das margens do controle ou como efeitos temporários ou discretos que não bloquearão o teste de clique no controle no qual o estilo visual de foco é aplicado. As propriedades que você pode usar na vinculação de modelo que são úteis para determinar o dimensionamento e o posicionamento do seu modelo de sobreposição incluem ActualHeight, , ActualWidth Margine Padding.

Alternativas ao uso de um estilo visual de foco

Para situações em que usar um estilo visual de foco não é apropriado, porque você está estilizando apenas controles únicos ou porque deseja maior controle em relação ao modelo de controle, há muitas outras propriedades acessíveis e técnicas que podem criar comportamento visual em resposta às alterações no foco.

Os gatilhos, os setters e os setters de evento são discutidos em detalhes em Estilo e modelagem. A manipulação de eventos roteados é discutida em Visão geral de eventos roteados.

IsKeyboardFocused

Se você estiver especificamente interessado no foco do teclado, a IsKeyboardFocused propriedade dependency pode ser usada para uma propriedade Trigger. Um gatilho de propriedade em um estilo ou modelo é uma técnica mais apropriada para definir um comportamento de foco do teclado que é especificamente para um único controle e que pode não corresponder visualmente ao comportamento de foco do teclado para outros controles.

Outra propriedade de dependência semelhante é IsKeyboardFocusWithin, que pode ser apropriada para usar se você quiser chamar visualmente que o foco do teclado está em algum lugar dentro da composição ou dentro da área funcional do controle. Por exemplo, você pode colocar um gatilho para que um painel que agrupa vários controles apareça de forma diferente, mesmo que o foco do teclado possa estar mais precisamente em um IsKeyboardFocusWithin elemento individual dentro desse painel.

Você também pode usar os eventos GotKeyboardFocus e LostKeyboardFocus (bem como seus equivalentes de visualização). Você pode usar esses eventos como base para um EventSetter, ou pode escrever manipuladores para os eventos em code-behind.

Outras propriedades de foco

Se desejar que todas as causas possíveis de alteração de foco produzam um comportamento visual, você deve basear um setter ou trigger na IsFocused propriedade dependency ou, alternativamente, nos GotFocus eventos ou LostFocus usados para um EventSetter.

Compartilhar via