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 propriedade FocusVisualStyle.

Exemplo

O exemplo a seguir define um estilo que cria composição de controle adicional que só se aplica quando o controle recebe o foco do teclado na interface do usuário (UI). Isso é conseguido definindo um estilo com um ControlTemplate, e então fazendo referência ao estilo como um recurso ao definir a propriedade FocusVisualStyle.

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

<Page
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://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>

For the complete sample, see Criando um exemplo de FocusVisualStyle.

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

Estilos visuais de foco devem ser usados de forma consistente em um tema ou uma interface do usuário, em vez de usar um diferente para cada elemento que pode receber foco. Para obter detalhes, consulte:Estilo de foco em controles e FocusVisualStyle.

Consulte também

Conceitos

Styling and Templating

Estilo de foco em controles e FocusVisualStyle

Referência

FocusVisualStyle