Compartir vía

Cómo: Aplicar FocusVisualStyle a un control

  • Artículo

Este ejemplo muestra cómo crear un estilo visual de enfoque en los recursos y aplicar el estilo a un control, utilizando la propiedad FocusVisualStyle.

Ejemplo

El ejemplo siguiente define un estilo que crea una composición de control adicional que solo se aplica cuando ese control está enfocado por el teclado en la interfaz de usuario (UI). Esto se logra mediante la definición de un estilo con un ControlTemplate, y luego haciendo referencia a ese estilo como recurso al establecer la propiedad FocusVisualStyle.

Un rectángulo externo similar a un borde se coloca fuera del área rectangular. A menos que se modifique, el tamaño del estilo usa los ActualHeight y ActualWidth del control rectangular donde se aplica el estilo visual de enfoque. Este ejemplo establece valores negativos para el Margin para que el borde aparezca ligeramente fuera del control enfocado.

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

Un FocusVisualStyle es aditivo a cualquier estilo de plantilla de control que provenga de un estilo explícito o de un estilo de tema; el estilo primario para un control puede seguir siendo creado usando un ControlTemplate y estableciendo ese estilo en la propiedad Style.

Los estilos visuales de enfoque deben utilizarse de forma coherente en todo el tema o la interfaz de usuario, en lugar de utilizar uno diferente para cada elemento enfocable. Para obtener más información, vea Aplicar estilo a los controles al recibir el foco y FocusVisualStyle.

Consulte también