How Can I change the way that focus looks like in WPF?

Question

The focus visual hint that wpf provides on Windows 7 is a dashed line, as such this:

Now, how can I change the way it looks? How can I control its appearence?

Thanks!

Answer 1

Try something like following

<Window x:Class="FocusVisualStyle.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="350" Width="525">
<Window.Resources>
    <Style x:Key="MyFocusVisualStyle">
        <Setter Property="Control.Template">
            <Setter.Value>
                <ControlTemplate>
                    <Rectangle Margin="-2" StrokeThickness="1" Stroke="Red"/>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>
<StackPanel Orientation="Horizontal" Height="24">
    <TextBox Width="96"/>
    <Button Content="Yes" Width="64" FocusVisualStyle="{DynamicResource MyFocusVisualStyle}"/>
    <Button Content="No" Width="64" FocusVisualStyle="{DynamicResource MyFocusVisualStyle}"/>
</StackPanel>

You can customise to suit your liking. This is just a starting point.

Edit: Since so many people have liked this solution here is another example which changes focus visual style for all buttons and textboxes without explicit setting of FocusVisualStyle property for each control (see that DynamicResource thingy?) in xaml

Also it uses animation to change the colour of the focus rectangle.

Enjoy :)

<Window x:Class="FocusVisualStyle.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="350" Width="525">
<Window.Resources>
    <Style x:Key="MyFocusVisualStyle">
        <Setter Property="Control.Template">
            <Setter.Value>
                <ControlTemplate >
                    <Rectangle Margin="-2" StrokeThickness="2" RadiusX="2" RadiusY="2" >
                        <Rectangle.Stroke>
                            <SolidColorBrush Color="Red" x:Name="RectangleStroke" />
                        </Rectangle.Stroke>
                        <Rectangle.Triggers>
                            <EventTrigger RoutedEvent="Rectangle.Loaded" >
                                <BeginStoryboard>
                                    <Storyboard>
                                        <ColorAnimation From="Red"
                                                        To="Orange"
                                                        Duration="0:0:0.5" 
                                                        RepeatBehavior="Forever" 
                                                        Storyboard.TargetName="RectangleStroke"
                                                        Storyboard.TargetProperty="Color"/>
                                        <DoubleAnimation To="3" 
                                                         Duration="0:0:0.5"
                                                         RepeatBehavior="Forever"
                                                         Storyboard.TargetProperty="StrokeDashOffset" />
                                    </Storyboard>
                                </BeginStoryboard>
                            </EventTrigger>
                        </Rectangle.Triggers>
                    </Rectangle>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style TargetType="{x:Type Button}">
        <Setter Property="FocusVisualStyle" Value="{StaticResource MyFocusVisualStyle}" />
    </Style>
    <Style TargetType="{x:Type TextBox}">
        <Setter Property="FocusVisualStyle" Value="{StaticResource MyFocusVisualStyle}" />
    </Style>
</Window.Resources>
<StackPanel Orientation="Horizontal" Height="24">
    <TextBox Width="96"/>
    <Button Content="Yes" Width="64" />
    <Button Content="No" Width="64" />
</StackPanel>

Here you see that I have styles for Button and TextBox which set the property FocusVisualStyle for all the buttons and text boxes in this window.