Estilo para foco em controles e FocusVisualStyle

Artigo
12/17/2024

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 definidores de propriedades para propriedades como IsKeyboardFocused dentro do estilo ou template que é aplicado ao controlo. O segundo mecanismo consiste em definir um estilo independente como valor da propriedade FocusVisualStyle; o "estilo visual de foco" cria uma árvore visual separada para um adorno que é desenhado sobre o controlo, em vez de alterar a árvore visual do controlo ou de outro elemento da interface do utilizador ao substituí-lo. Este tópico discute os cenários em que cada um desses mecanismos é apropriado.

O Propósito 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 na navegação do teclado para qualquer elemento da interface do usuário. Isso é possível sem aplicar um novo modelo ao controle ou conhecer a composição específica do modelo.

No entanto, precisamente porque o recurso de estilo visual de foco funciona sem conhecer os modelos 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 adereço) em cima da árvore visual, como criado pela renderização de um controlo através do seu modelo. Você define esta árvore visual separada através de um estilo que preenche a propriedade FocusVisualStyle.

Comportamento de estilo visual de foco padrão

Os estilos visuais de foco atuam apenas quando a ação de foco foi iniciada pelo teclado. Qualquer ação do mouse ou alteração de foco programático desativa o modo para 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. Este 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 do comportamento padrão para todo o tema.

Nos temas, o estilo visual de foco padrão é geralmente muito simples. Segue-se 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 de controle para controle. Uma maneira de garantir a coerência é alterar o estilo visual de foco somente se você estiver compondo um tema inteiro, onde cada controle definido no tema obtém o mesmo estilo visual de foco ou alguma variação de um estilo que está visualmente relacionado de controle para controle. Como alternativa, você pode usar o mesmo estilo (ou estilos semelhantes) para definir o estilo de cada elemento focado no 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 os controles pode levar a uma experiência de usuário confusa em relação ao foco do teclado. Se você pretende 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 individuais de estado de entrada, como IsFocused ou IsKeyboardFocused.

Os estilos visuais de foco funcionam exclusivamente para o foco do teclado. Como tal, os estilos visuais de foco são um tipo de recurso de acessibilidade. Caso pretenda alterar a interface do utilizador para qualquer tipo de foco, seja por meio de rato, teclado ou de forma programática, não deve usar estilos visuais de foco. Em vez disso, utilize definidores e gatilhos em estilos ou modelos que funcionem a partir do valor de propriedades de foco geral, como IsFocused ou IsKeyboardFocusWithin.

Como criar um estilo visual de foco

O estilo que se cria para um estilo visual de foco deve sempre incluir o elemento TargetType associado a Control. O estilo deve consistir principalmente em um ControlTemplate. Você não especifica o tipo de destino como sendo aquele ao qual o estilo visual de foco é atribuído no FocusVisualStyle.

Como o tipo de destino é sempre Control, você deve estilizar usando propriedades que são 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 a um elemento da interface do usuário e que não obscurecerá as áreas funcionais do controle. Geralmente, isso significa que o feedback visual deve aparecer fora das margens de controle, ou como efeitos temporários ou discretos que não bloquearão o teste de acerto no controle onde 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 focagem

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 maior controle sobre o modelo de controle, há muitas outras propriedades e técnicas acessíveis que podem criar um comportamento visual em resposta a mudanças no foco.

Gatilhos, setters e definidores de eventos são discutidos em detalhes no Styling and Templating. A manipulação de eventos roteados é discutida em Visão geral de eventos roteados.

IsKeyboardFocused

Se 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 adequada para definir um comportamento de foco do teclado específico para um único controle, e que pode não corresponder visualmente ao comportamento de foco do teclado em outros controles.

Outra propriedade de dependência semelhante é IsKeyboardFocusWithin, que pode ser apropriada para usar se pretender indicar visualmente que o foco do teclado está em algum ponto da composição ou dentro da área funcional do controlo. Por exemplo, você pode colocar um gatilho de IsKeyboardFocusWithin de modo 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 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 EventSetterou pode escrever manipuladores para os eventos em code-behind.

Outras propriedades do Focus

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

Partilhar via