Partager via

Style pour la mise au point dans les contrôles et FocusVisualStyle

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 est approprié.

Objectif du style visuel focus

La fonctionnalité de style visuel focus fournit un « modèle objet » commun pour introduire des commentaires utilisateur visuels en fonction de la navigation au clavier vers n’importe quel élément d’interface utilisateur. Cela est possible sans appliquer un nouveau modèle au contrôle, ni connaître la composition spécifique du modèle.

Toutefois, précisément parce que la fonctionnalité de style visuel focus fonctionne sans connaître les modèles de contrôle, les commentaires visuels qui peuvent être affichés pour un contrôle à l’aide d’un style visuel focus sont nécessairement limités. La fonctionnalité superpose en réalité une arborescence visuelle différente (un adorner) sur l'arborescence visuelle 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 visuel focus par défaut

Les styles visuels focus agissent uniquement lorsque l’action de focus a été lancée par le clavier. Toute action de souris ou modification du focus par programmation désactive le mode pour les styles visuels focus. Pour plus d’informations sur les distinctions entre les modes focus, consultez Vue d’ensemble du focus.

Les thèmes des contrôles incluent un comportement de style visuel de mise au point par défaut qui devient le style visuel de mise au point pour 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 visuel focus au niveau de l’application, vous remplacez ce comportement de style par défaut des thèmes. Sinon, si vous définissez l’intégralité du thème, vous devez utiliser cette même clé pour définir le style du comportement par défaut pour l’ensemble de votre thème.

Dans les thèmes, le style visuel focus par défaut est généralement très simple. Voici une approximation approximative :

<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 doit-on utiliser les styles visuels de mise au point

Conceptuellement, l'apparence des styles visuels de focus appliqués aux contrôles doit être cohérente entre les contrôles. Une façon de garantir la cohérence consiste à modifier le style visuel de mise au point uniquement si vous définissez un thème complet, où chaque contrôleur figurant dans le thème reçoit soit le même style visuel de mise au point, soit une variante visuellement cohérente d'un contrôle à l'autre. Vous pouvez également utiliser le même style (ou des styles similaires) pour mettre en forme chaque élément focusable au clavier sur une page ou dans une interface utilisateur.

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 de mise au point. Cela est dû au fait qu’un comportement visuel incohérent entre les contrôles peut entraîner une expérience utilisateur déroutante concernant le 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 visuels de mise au point agissent exclusivement pour le clavier. Par conséquent, les styles visuels de mise au point sont un type de fonctionnalité d’accessibilité. Si vous souhaitez modifier l’interface utilisateur pour n’importe quel type de focus, que ce soit par le biais de la souris, du clavier ou par programmation, vous ne devez pas utiliser de styles visuels de focus et doit utiliser plutôt des setters et des déclencheurs dans des styles ou des modèles qui fonctionnent à partir de la valeur des propriétés de focus générales telles que IsFocused ou IsKeyboardFocusWithin.

Guide pratique pour créer un style visuel focus

Le style que vous créez pour un style visuel de mise au point doit toujours avoir le TargetType de Control. Le style doit se composer principalement d’un ControlTemplate. Vous ne spécifiez pas que le type cible doit être celui auquel le style visuel de focus est assigné pour le 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 fonctionnera correctement comme une superposition à un élément d’interface utilisateur et qui ne masque pas les zones fonctionnelles du contrôle. En règle générale, cela signifie que les commentaires visuels doivent apparaître en dehors des marges de contrôle, ou en tant qu’effets temporaires ou discrets qui ne bloquent pas les tests de détection sur le contrôle où le style visuel de mise au point est appliqué. 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, , ActualWidthMarginet Padding.

Alternatives à l’utilisation d’un style visuel focus

Pour les situations où l’utilisation d’un style visuel de focus n’est pas appropriée, soit parce que vous n’utilisez que des contrôles uniques ou que vous souhaitez un meilleur contrôle sur le modèle de contrôle, il existe de nombreuses autres propriétés et techniques accessibles qui peuvent créer un comportement visuel en réponse aux modifications du focus.

Les déclencheurs, setters et setters d'événements sont tous abordés en détail dans Le style et la modélisation. La gestion des événements routés est abordée dans Vue d’ensemble des événements routés.

LeClavierEstFocalisé

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. Un déclencheur de propriété dans un style ou un modèle est une technique plus appropriée pour définir un comportement de focus clavier très spécifiquement pour un seul contrôle, et qui peut ne pas correspondre visuellement au comportement du focus clavier pour d’autres contrôles.

Une autre propriété de dépendance similaire est IsKeyboardFocusWithin, qu'il pourrait être approprié d'utiliser si vous souhaitez indiquer 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 alternativement sur les événements GotFocusLostFocus utilisés pour un EventSetter.

Voir aussi

  • Last updated on