Compartilhar via

Como aplicar um FocusVisualStyle a um controle

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

Exemplo

O exemplo a seguir define um estilo que cria uma composição adicional de controle que só se aplica quando esse controle é focado pelo teclado na interface do usuário. Isso é feito definindo um estilo com um ControlTemplatee referenciando esse estilo como um recurso ao definir a propriedade FocusVisualStyle.

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

<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>

Um FocusVisualStyle é aditivo a qualquer estilo de modelo de controle proveniente de um estilo explícito ou de um estilo de tema; o estilo primário de um controle ainda pode ser criado usando um ControlTemplate e definindo esse estilo para a propriedade Style.

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 Styling for Focus in Controls e FocusVisualStyle.

Consulte também

  • Last updated on