Aplicar estilo a los controles al recibir el foco y FocusVisualStyle

Actualización: noviembre 2007

Windows Presentation Foundation (WPF) proporciona dos mecanismos paralelos para cambiar el aspecto visual de un control cuando recibe el foco de teclado. El primer mecanismo consiste en utilizar los establecedores de propiedad para propiedades tales como IsKeyboardFocused dentro del estilo o la plantilla que se aplica al control. El segundo mecanismo consiste en proporcionar un estilo independiente como valor de la propiedad FocusVisualStyle; este "estilo visual de foco" crea un árbol visual independiente para un adorno que dibuja encima del control, en lugar de cambiar el árbol visual del mismo u otro elemento de la interfaz de usuario reemplazándolo. En este tema se describen los escenarios donde es apropiado cada uno de estos mecanismos.

Este tema contiene las secciones siguientes.

  • Finalidad del estilo visual de foco
  • Comportamiento predeterminado del estilo visual de foco
  • Cuándo utilizar estilos visuales de foco
  • Cómo crear un estilo visual de foco
  • Alternativas al uso de un estilo visual de foco
  • Temas relacionados

Finalidad del estilo visual de foco

La característica de estilo visual de foco proporciona un "modelo de objetos" común para especificar información visual al usuario basándose en la navegación mediante el teclado a cualquier elemento de la interfaz de usuario. Esto es posible sin aplicar una nueva plantilla al control ni conocer la composición de la plantilla concreta.

Sin embargo, y precisamente porque la característica de estilo visual de foco funciona sin conocer las plantillas de control, la información visual que se puede mostrar para un control utilizando un estilo visual de foco es necesariamente limitada. Lo que la característica hace en realidad es superponer a un árbol visual diferente (un adorno) sobre el árbol visual creado por la representación de un control a través de su plantilla. Este árbol visual independiente se define mediante un estilo que rellena la propiedad FocusVisualStyle.

Comportamiento predeterminado del estilo visual de foco

Los estilos visuales de foco sólo actúan cuando la acción de foco se inicia desde el teclado. Los cambios de foco provocados por acciones del mouse o mediante programación deshabilitan el modo de estilos visuales de foco. Para obtener más información sobre las distinciones entre los modos de foco, vea Información general sobre el foco.

Los temas para los controles incluyen un comportamiento de estilo visual de foco predeterminado que pasa a ser el estilo visual de foco para todos los controles del tema. Este estilo de tema se identifica mediante el valor de la clave estática FocusVisualStyleKey. Al declarar su propio estilo visual de foco en el nivel de aplicación, se reemplaza este comportamiento de estilo predeterminado de los temas. Como alternativa, si define el tema completo, entonces deberá utilizar esta misma clave para definir el estilo correspondiente al comportamiento predeterminado para todo el tema.

En los temas, el estilo visual de foco predeterminado suele ser muy simple. A continuación, se muestra una aproximación sin detallar:

<Style x:Key="{x:Static SystemParameters.FocusVisualStyleKey}">
  <Setter Property="Control.Template">
    <Setter.Value>
      <ControlTemplate>
        <Rectangle StrokeThickness="1"
          Stroke="Black"
          StrokeDashArray="1 2"
          SnapsToDevicePixels="true"/>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

Cuándo utilizar estilos visuales de foco

Conceptualmente, el aspecto de los estilos visuales de foco aplicados a los controles debe ser coherente para todos los controles. Una manera de asegurar la coherencia es cambiar el estilo visual de foco únicamente si está creando un tema completo, donde cada control que se defina obtendrá exactamente el mismo estilo visual de foco, o bien una variación de un estilo que guarde una relación visual en todos los controles. Como alternativa, puede utilizar el mismo estilo (o estilos similares) para aplicárselos a todos los elementos que pueden recibir el foco del teclado de una página o una interfaz de usuario.

Los estilos visuales de foco no están pensados para establecer la propiedad FocusVisualStyle de estilos de controles individuales que no forman parte de un tema. Esto se debe a que un comportamiento visual incoherente en los distintos controles puede dar lugar a una experiencia del usuario confusa con respecto al foco de teclado. Si su intención es controlar los comportamientos específicos de cada control en cuanto al foco de teclado que no son coherentes de manera deliberada para todo el tema, un enfoque mucho mejor consiste en utilizar desencadenadores en estilos para propiedades de estados de entrada individuales, como IsFocused o IsKeyboardFocused.

Los estilos visuales de foco actúan exclusivamente para el foco de teclado. Como a tales, los estilos visuales de foco son un tipo de característica de accesibilidad. Si desea efectuar cambios en la interfaz de usuario para cualquier tipo de foco, ya sea mediante el mouse, el teclado o programación, no debe utilizar los estilos visuales de foco sino establecedores y desencadenadores de estilos o plantillas que funcionen partiendo del valor de las propiedades de foco generales, como IsFocused o IsFocusWithin.

Cómo crear un estilo visual de foco

El estilo que se crea para un estilo visual de foco siempre debe tener la propiedad TargetType de Control. El estilo debe consistir principalmente en un objeto ControlTemplate. No se especifica el tipo de destino de modo que sea el tipo con que se asigna el estilo visual de foco a FocusVisualStyle.

Dado que el tipo de destino siempre es Control, debe aplicar los estilos mediante propiedades que sean comunes a todos los controles (propiedades de la clase Control y sus clases base). Debe crear una plantilla que funcione correctamente como una superposición a un elemento de la interfaz de usuario y que no ocultare áreas funcionales del control. En general, esto significa que la información visual debe aparecer fuera de los márgenes del control, o en forma de efectos temporales o discretos que no bloqueen las pruebas de posicionamiento del control al que se aplica el estilo visual de foco. Las propiedades que puede utilizar en el enlace de plantillas que resultan útiles para determinar las dimensiones y la posición de la plantilla de superposición incluyen: ActualHeight, ActualWidth, Margin y Padding.

Alternativas al uso de un estilo visual de foco

En aquellas situaciones en que no sea apropiado utilizar un estilo visual de foco, ya sea porque el estilo se aplica a controles individuales o porque se desea un mayor control sobre la plantilla de control, existen muchas otras propiedades y técnicas accesibles capaces de crear comportamiento visual en respuesta a los cambios de foco.

Los desencadenadores, establecedores y establecedores de eventos se describen con detalle en Aplicar estilos y plantillas. El control de eventos enrutados se describe en Información general sobre eventos enrutados.

IsKeyboardFocused

Si tiene particular interés en el foco de teclado, puede utilizar la propiedad de dependencia IsKeyboardFocused para un Trigger de propiedad. Un desencadenador de propiedad de un estilo o plantilla constituye una técnica más adecuada para definir el comportamiento de foco de teclado muy específico de un control único y que no coincida visualmente con el comportamiento de foco de teclado de los demás controles.

Otra propiedad de dependencia similar es IsKeyboardFocusWithin, que podría resultar adecuada si desea indicar visualmente que el foco de teclado se encuentra en algún punto de una composición de controles o dentro del área funcional del control. Por ejemplo, puede colocar un desencadenador de IsKeyboardFocusWithin de tal forma que un panel que agrupe varios controles aparezca distinto, aunque el foco de teclado se encuentre, en concreto, en uno de los elementos individuales de ese panel.

También puede utilizar los eventos GotKeyboardFocus y LostKeyboardFocus (así como sus equivalentes de vista previa). Puede utilizar estos eventos como base para un objeto EventSetter o escribir controladores para los eventos en el código subyacente.

Otras propiedades de foco

Si desea que todas las posibles causas del cambio de foco generen un comportamiento visual, debe basar un establecedor o desencadenador en la propiedad de dependencia IsFocused o, si lo prefiere, en los eventos GotFocus o LostFocus utilizados para un EventSetter.

Vea también

Conceptos

Aplicar estilos y plantillas

Información general sobre el foco

Información general sobre acciones del usuario

Referencia

FocusVisualStyle

Otros recursos

Accesibilidad