FocusVisualStyle et application d'un style au focus dans les contrôles

Article
06/02/2023

Windows Presentation Foundation (WPF) fournit deux mécanismes parallèles pour modifier l’apparence visuelle d’un contrôle lorsqu’il reçoit le focus clavier. Le premier mécanisme consiste à utiliser des setters de propriétés pour des propriétés telles que IsKeyboardFocused dans le style ou le modèle appliqué au contrôle. Le deuxième mécanisme consiste à fournir un style distinct en tant que valeur de la FocusVisualStyle propriété ; le « style visuel focus » crée une arborescence visuelle distincte pour un ornement qui s’appuie sur le contrôle, plutôt que de modifier l’arborescence visuelle du contrôle ou d’un autre élément d’interface utilisateur en le remplaçant. Cette rubrique décrit les scénarios où chacun de ces mécanismes convient.

L’objectif du style de focus visuel

La fonctionnalité de style de focus visuel fournit un « modèle objet » commun permettant d’introduire un retour visuel utilisateur basé sur la navigation au clavier pour n’importe quel élément d’interface utilisateur. C’est possible sans appliquer un nouveau modèle au contrôle et sans connaître la composition spécifique du modèle.

Toutefois, étant donné que la fonctionnalité de style de focus visuel peut être utilisée sans connaître les modèles de contrôle, le retour visuel qui peut être affiché pour un contrôle avec un style de focus visuel est forcément limité. Cette fonctionnalité permet de superposer une arborescence d’éléments visuels différente (un ornement) sur l’arborescence d’éléments visuels créée par le rendu d’un contrôle via son modèle. Vous définissez cette arborescence visuelle distincte à l’aide d’un style qui remplit la FocusVisualStyle propriété.

Comportement du style de focus visuel par défaut

Les styles de focus visuels agissent uniquement lorsque l’action du focus a été démarrée par le clavier. Une action de la souris ou un changement de focus par programmation désactive le mode de style de focus visuel. Pour plus d’informations sur les différences entre les modes de focus, consultez Vue d’ensemble du focus.

Les thèmes des contrôles proposent un comportement de style de focus visuel par défaut qui devient celui de tous les contrôles du thème. Ce style de thème est identifié par la valeur de la clé FocusVisualStyleKeystatique. Lorsque vous déclarez votre propre style de focus visuel au niveau de l’application, vous remplacez ce comportement de style par défaut dans les thèmes. Si vous définissez l’ensemble du thème, vous devez utiliser cette même clé pour définir le style du comportement par défaut à appliquer à l’ensemble du thème.

Dans les thèmes, le style de focus visuel par défaut est généralement très simple. En voici une brève description :

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

Quand utiliser des styles de focus visuels

D’un point de vue conceptuel, l’apparence des styles de focus visuels appliqués aux contrôles doit être la même pour tous les contrôles. Un moyen de garantir l’homogénéité du style est de ne changer le style de focus visuel que si vous créez un thème entier, dans lequel chaque contrôle défini reçoit le même style de focus visuel ou une variation d’un style visuellement semblable. Vous pouvez également utiliser le même style (ou des styles similaires) pour tous les éléments d’une page ou d’une interface utilisateur auxquels vous pouvez donner le focus à l’aide du clavier.

La définition FocusVisualStyle de styles de contrôle individuels qui ne font pas partie d’un thème n’est pas l’utilisation prévue des styles visuels focus. En effet, un comportement visuel incohérent entre les contrôles peut porter à confusion au niveau du focus clavier. Si vous envisagez des comportements spécifiques au contrôle pour le focus clavier qui ne sont délibérément pas cohérents dans un thème, une approche beaucoup plus efficace consiste à utiliser des déclencheurs dans des styles pour des propriétés d’état d’entrée individuelles, telles que IsFocused ou IsKeyboardFocused.

Les styles de focus visuels agissent exclusivement pour le focus clavier. Ils constituent donc un type de fonctionnalité d’accessibilité. Si vous souhaitez changer l’interface utilisateur au niveau d’un type de focus, que ce soit par la souris, le clavier ou par programmation, vous ne devez pas utiliser les styles de focus visuels. Vous devez utiliser des setters et des déclencheurs dans les styles ou les modèles qui utilisent la valeur des propriétés de focus générales, telles que IsFocused ou IsKeyboardFocusWithin.

Comment créer un style de focus visuel

Le style que vous créez pour un style visuel focus doit toujours avoir la TargetType Controlvaleur . Le style doit se composer principalement d’un ControlTemplate. Vous ne spécifiez pas le type cible pour être le type où le style visuel focus est affecté au FocusVisualStyle.

Étant donné que le type cible est toujours Control, vous devez utiliser des propriétés communes à tous les contrôles (à l’aide des propriétés de la Control classe et de ses classes de base). Vous devez créer un modèle qui soit superposé à un élément d’interface utilisateur et qui ne masque pas les zones fonctionnelles du contrôle. En général, cela signifie que le retour visuel doit apparaître en dehors des marges du contrôle, ou sous la forme d’effets temporaires ou discrets qui ne bloquent pas le test d’atteinte du contrôle auquel est appliqué le style de focus visuel. Les propriétés que vous pouvez utiliser dans la liaison de modèle qui sont utiles pour déterminer le dimensionnement et le positionnement de votre modèle de superposition incluent ActualHeight, , ActualWidth Marginet Padding.

Alternatives à l’utilisation des styles de focus visuels

Lorsque l’utilisation d’un style de focus visuel n’est pas adaptée, soit parce que vous appliquez un style différent à chaque contrôle, soit parce que vous souhaitez contrôler davantage le modèle de contrôle, il existe plusieurs autres propriétés et techniques accessibles qui peuvent créer un comportement visuel en réponse aux changements du focus.

Les déclencheurs, les setters et les setters d’événement sont tous abordés en détail dans Styles et modèles. La gestion des événements routés est abordée dans Vue d’ensemble des événements routés.

IsKeyboardFocused

Si vous êtes spécifiquement intéressé par le focus clavier, la IsKeyboardFocused propriété de dépendance peut être utilisée pour une propriété Trigger. L’utilisation d’un déclencheur de propriété dans un style ou un modèle convient mieux à la définition d’un comportement de focus clavier qui est propre à un seul contrôle, et qui peut ne pas correspondre visuellement au comportement de focus clavier des autres contrôles.

Une autre propriété de dépendance similaire est IsKeyboardFocusWithin, qui peut être appropriée pour utiliser si vous souhaitez appeler visuellement que le focus clavier se trouve quelque part dans la composition ou dans la zone fonctionnelle du contrôle. Par exemple, vous pouvez placer un IsKeyboardFocusWithin déclencheur de sorte qu’un panneau qui regroupe plusieurs contrôles s’affiche différemment, même si le focus clavier peut être plus précisément sur un élément individuel dans ce panneau.

Vous pouvez également utiliser les événements GotKeyboardFocus et LostKeyboardFocus (ainsi que leurs équivalents en préversion). Vous pouvez utiliser ces événements comme base pour un EventSetter, ou vous pouvez écrire des gestionnaires pour les événements dans code-behind.

Autres propriétés de focus

Si vous souhaitez que toutes les causes possibles de la modification du focus produisent un comportement visuel, vous devez baser un setter ou un déclencheur sur la IsFocused propriété de dépendance, ou sur les GotFocus événements LostFocus utilisés pour un EventSetter.

Partager via