Compartilhar via

Estilização para Foco em Controles e FocusVisualStyle

  • Artigo

O 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 configuradores de propriedade para propriedades como IsKeyboardFocused dentro do estilo ou template aplicado ao controle. O segundo mecanismo é fornecer um estilo separado como o valor da propriedade FocusVisualStyle; o "estilo visual de foco" cria uma árvore visual separada para um adorno que se baseia na parte superior do controle, em vez de alterar a árvore visual do controle ou outro elemento de interface do usuário substituindo-a. Este tópico discute os cenários em que cada um desses mecanismos é apropriado.

A finalidade do estilo visual de foco

O recurso de estilo visual de foco fornece um "modelo de objeto" comum para introduzir feedback visual do usuário baseado na navegação por teclado em qualquer elemento da interface do usuário. Isso é possível sem aplicar um novo modelo ao controle ou conhecer a composição de modelo específica.

No entanto, precisamente porque o recurso de estilo visual de foco funciona sem conhecer os templates de controle, o feedback visual 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) sobre a árvore visual criada pela renderização de um controle através de seu template. Você define essa árvore visual separada usando um estilo que preenche a propriedade FocusVisualStyle.

Comportamento de estilo visual de foco padrão

Os estilos visuais de foco atuam somente quando a ação de foco foi iniciada pelo teclado. Qualquer ação do mouse ou alteração de foco programático 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 para 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 chave estática FocusVisualStyleKey. Ao declarar seu próprio estilo visual de foco no nível do aplicativo, você substitui 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 de todo o tema.

Nos temas, o estilo visual de foco padrão geralmente é muito simples. Veja a seguir uma aproximação aproximada:

<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 entre os controles. Uma maneira de garantir a coerência é alterar o estilo visual de foco somente se você estiver criando um tema inteiro, no qual cada controle definido no tema adquire o mesmo estilo visual de foco ou alguma variação de um estilo que esteja visualmente relacionado de controle em controle. Como alternativa, você pode usar o mesmo estilo (ou estilos semelhantes) para estilizar cada elemento focalizável por teclado em uma página ou em uma interface do usuário.

Definir FocusVisualStyle em 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ê pretender 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.

Os estilos visuais de foco atuam exclusivamente para o foco do teclado. Dessa forma, os estilos visuais de foco são um tipo de recurso de acessibilidade. Se você quiser alterações na interface do usuário para qualquer tipo de foco, seja por mouse, teclado ou programaticamente, não deve usar estilos visuais de foco. Em vez disso, deve usar setters e gatilhos em estilos ou modelos que operam a partir do valor das propriedades de foco geral, como IsFocused ou IsKeyboardFocusWithin.

Como criar um estilo visual de foco

O estilo que você cria para um estilo visual de foco deve sempre utilizar as características TargetType de Control. O estilo deve consistir principalmente em 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 definir o estilo usando propriedades comuns a todos os controles (usando propriedades da classe Control 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 obscurecerá áreas funcionais do controle. Em geral, isso significa que o feedback visual deve aparecer fora das margens dos controles, ou como efeitos temporários ou discretos que não bloquearão o teste de colisão no controle onde o estilo visual de foco é aplicado. As propriedades que você pode usar na associação de modelo que são úteis para determinar o dimensionamento e o posicionamento do modelo de sobreposição incluem ActualHeight, ActualWidth, Margine Padding.

Alternativas ao uso de um estilo visual de foco

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

Gatilhos, setters e setters de eventos são discutidos em detalhes em Estilo e Modelagem de Templates. O tratamento de eventos roteados é discutido em Visão Geral de Eventos Roteados.

IsKeyboardFocused

Se você estiver especificamente interessado no foco do teclado, a propriedade de dependência IsKeyboardFocused 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 de teclado que é especificamente destinado a um único controle e que pode não corresponder visualmente ao comportamento de foco de teclado dos outros controles.

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

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

Outras propriedades de foco

Se quiser que todas as possíveis causas de alteração de foco produzam um comportamento visual, você deve basear um setter ou gatilho na propriedade de dependência IsFocused ou, como alternativa, nos eventos GotFocus ou LostFocus, usados para um EventSetter.

Consulte também