Comment : appliquer un FocusVisualStyle à un contrôle

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

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 porte sur le clavier dans l'user interface (UI). Cela est accompli en définissant un style avec un ControlTemplate, puis en référençant ce style comme une ressource lors de la définition de la propriété FocusVisualStyle.

Un rectangle externe ressemblant à une bordure est placé à l'extérieur de la zone rectangulaire. À défaut de modification différente, le dimensionnement du style utilise le ActualHeight et le ActualWidth du contrôle rectangulaire où le style visuel de focus est appliqué. Cet exemple définit des valeurs négatives pour le Margin pour que la bordure apparaisse légèrement à l'extérieur du contrôle ayant le focus.

<Page
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://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 est additif pour tout style de modèle de contrôle provenant d'un style explicite ou d'un style de thème ; le style principal pour un contrôle peut encore être créé en utilisant un ControlTemplate et en définissant ce style selon la propriété Style.

Les styles visuels de focus doivent être utilisés régulièrement à travers un thème ou une interface utilisateur, plutôt que d'utiliser un style différent pour chaque élément pouvant être actif. Pour plus d'informations, consultez FocusVisualStyle et application d'un style au focus dans les contrôles.

Voir aussi

Référence

FocusVisualStyle

Concepts

Application d'un style et création de modèles

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