How to: Apply a FocusVisualStyle to a Control

This example shows you how to create a focus-specific style in resources that is applied to the control, using the FocusVisualStyle property.

Example

The following example defines a style that creates additional control compositing that only applies when that control is focused in the user interface (UI). This is accomplished by defining a style with a ControlTemplate, then referencing that style as a resource when setting the FocusVisualStyle. Note that in this case the FocusVisualStyle is additive to any normal style; the fact that you create a new ControlTemplate does not impact the normal styling of the button, as it would had you attempted to create a style with a ControlTemplate and setting that style to the Style property. In this case an external rectangle resembling a border is placed outside of the rectangular area that is bound to the actual height and width of the rectangular control being focused. Negative values are set on Top and Left to make the border appear outside the focused control, somewhat like a highlight.

Note:

Conceptually, the visual behavior of focus applied to a control should be coherent from control to control. The most sensible way to ensure coherence is to only change the focus visual style if you are composing an entire theme, where each control that is defined in the theme will get either the very same Style, or some variation of a Style that at least is visually coherent from control to control. Setting this property on invididual control styles and not as part of a theme is not the intended usage of this property because it may lead to a confusing user experience regarding keyboard focus. If you are intending control-specific behaviors that are deliberately not coherent across a theme, a much better approach is to use triggers in styles for individual input state properties, such as IsFocused or IsKeyboardFocusWithin.

<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 TargetType="{x:Type Control}">
            <Canvas>
              <Grid>
                <Rectangle Name="r1" StrokeThickness="2" Stroke="Red" StrokeDashArray="1 2"/>
                <Border Name="border" Width="{TemplateBinding ActualWidth}" Height="{TemplateBinding ActualHeight}"  CornerRadius="2" BorderThickness="1"  />
              </Grid>
            </Canvas>
          </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>

For the complete sample, see Creating a FocusVisualStyle Sample.

See Also

Concepts

Styling and Templating