Partager via

Comment : appliquer un FocusVisualStyle à un contrôle

  • Article

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. Sauf modification contraire, le dimensionnement du style utilise le ActualHeight contrôle rectangulaire où ActualWidth le style visuel focus est appliqué. Cet exemple montre comment définir des valeurs négatives pour Margin que la bordure apparaisse légèrement en dehors du contrôle prioritaire.

<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 d’un contrôle peut toujours être créé à l’aide d’un ControlTemplate style et de la définition de ce style sur la Style propriété.

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 Style pour focus dans les contrôles et FocusVisualStyle.

Voir aussi