Compartilhar via

Como aplicar um FocusVisualStyle a um controle

  • Artigo

Este exemplo mostra como criar um estilo visual de foco em recursos e aplicar o estilo a um controle, usando a FocusVisualStyle propriedade.

Exemplo

O exemplo a seguir define um estilo que cria composição de controle adicional que só se aplica quando esse controle é focado no teclado na interface do usuário (UI). Isso é feito definindo um estilo com um , em seguida, referenciando esse estilo como um ControlTemplaterecurso ao definir a FocusVisualStyle propriedade.

Um retângulo externo representando uma borda é colocado fora da área retangular. A menos que modificado de outra forma, o dimensionamento do estilo usa o e ActualWidth do controle retangular onde o ActualHeight estilo visual de foco é aplicado. Este exemplo define valores negativos para fazer Margin com que a borda apareça ligeiramente fora do controle focado.

<Page
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
>
  <Page.Resources>
    <Style x:Key="MyFocusVisual">
      <Setter Property="Control.Template">
        <Setter.Value>
          <ControlTemplate>
            <Rectangle Margin="-2" StrokeThickness="1" Stroke="Red" StrokeDashArray="1 2"/>
          </ControlTemplate>
        </Setter.Value>
      </Setter>
    </Style>
  </Page.Resources>
  <StackPanel Background="Ivory" Orientation="Horizontal">
    <Canvas Width="10"/>
    <Button Width="100" Height="30" FocusVisualStyle="{DynamicResource MyFocusVisual}">
      Focus Here</Button>
    <Canvas Width="100"/>
    <Button Width="100" Height="30" FocusVisualStyle="{DynamicResource MyFocusVisual}">
      Focus Here</Button>
  </StackPanel>
</Page>

A FocusVisualStyle é aditivo a qualquer estilo de modelo de controle que vem de um estilo explícito ou de um estilo de tema, o estilo principal de um controle ainda pode ser criado usando um ControlTemplate e definindo esse estilo para a Style propriedade.

Estilos visuais de foco devem ser usados consistentemente em um tema ou uma interface do usuário, em vez de usar um diferente para cada elemento focalizável. Para obter detalhes, consulte Estilos para foco em controles e FocusVisualStyle.

Confira também