Partager via

Guide pratique pour appliquer un FocusVisualStyle à un contrôle

Cet exemple montre comment créer un style visuel focus dans les ressources et appliquer le style à un contrôle à l’aide de la FocusVisualStyle propriété.

Exemple :

L’exemple suivant définit un style qui crée une composition de contrôle supplémentaire qui s’applique uniquement lorsque ce contrôle est axé sur le clavier dans l’interface utilisateur . Pour ce faire, définissez un style avec un ControlTemplatestyle, puis faites référence à ce style en tant que ressource lors de la définition de la FocusVisualStyle propriété.

Un rectangle externe semblable à une bordure est placé en dehors de la zone rectangulaire. À moins d'être modifié autrement, le dimensionnement du style utilise le ActualHeight et le ActualWidth du contrôle rectangulaire où le style visuel de mise au point est appliqué. Cet exemple montre comment définir des valeurs négatives pour Margin afin que la bordure apparaisse légèrement en dehors du contrôle focalisé.

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

Il FocusVisualStyle est additif à n’importe quel style de modèle de contrôle qui provient d’un style explicite ou d’un style de thème ; le style principal pour un contrôle peut toujours être créé en utilisant un ControlTemplate et en définissant ce style sur la propriété Style.

Les styles visuels de focus doivent être utilisés de manière cohérente sur un thème ou une interface utilisateur, plutôt que d’utiliser un autre élément pour chaque élément pouvant être focusé. Pour plus d’informations, consultez le style de mise en évidence dans les contrôles et FocusVisualStyle.

Voir aussi

  • Last updated on