Compartir a través de

Cómo: Aplicar un FocusVisualStyle a un control

En este ejemplo se muestra cómo crear un estilo visual de foco en los recursos y aplicar el estilo a un control mediante la FocusVisualStyle propiedad .

Ejemplo

En el ejemplo siguiente se define un estilo que crea composición de controles adicional que solo se aplica cuando ese control se centra en el teclado en la interfaz de usuario (UI). Esto se logra mediante la definición de un estilo con un ControlTemplatey, a continuación, se hace referencia a ese estilo como un recurso al establecer la FocusVisualStyle propiedad .

Un rectángulo externo similar a un borde se coloca fuera del área rectangular. A menos que se modifique, la configuración de tamaño del estilo usa el ActualHeight y el ActualWidth del control rectangular donde se aplica el estilo visual de foco. En este ejemplo se establecen valores negativos para Margin con el fin de 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 complementario a cualquier estilo de plantilla de control que provenga de un estilo explícito o de un estilo de tema; el estilo principal de un control aún se puede crear utilizando un ControlTemplate y estableciendo ese estilo en la propiedad Style.

Los estilos visuales de foco deben usarse de forma coherente en un tema o una interfaz de usuario, en lugar de usar uno diferente para cada elemento enfocado. Para obtener más información, vea Aplicar estilo al foco en controles y FocusVisualStyle.

Consulte también