Question

I’ve got some windows with mainly comboboxes, textboxes, and checkboxes. When you click on one to get focus I need a way to have them be outlined with a colorful box (boss’ orders). Is there a way to do this easier than overriding the default style of all of these controls? I’ve never done that before, so it would take a lot of mucking around on my part to figure it out.

Answer 1

You can try adding a FocusVisualStyle to the Controls that need different focus rectangle styles.

From above link

The second mechanism is to provide a separate style as the value of the FocusVisualStyle property; the “focus visual style” creates a separate visual tree for an adorner that draws on top of the control, rather than changing the visual tree of the control or other UI element by replacing it.

Something like this in your Window’s Xaml

<Window.Resources>
    <Style x:Key="NewFocusVisual">
        <Setter Property="Control.Template">
            <Setter.Value>
                <ControlTemplate>
                    <Border>
                        <Rectangle Stroke="Red"  Margin="2" StrokeThickness="1"  StrokeDashArray="1 2" />
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>

or your Application.Xaml file.

<Application.Resources>
    <Style x:Key="NewFocusVisual">
        <Setter Property="Control.Template">
            <Setter.Value>
                <ControlTemplate>
                    <Border>
                        <Rectangle Stroke="Red"  Margin="2" StrokeThickness="1"  StrokeDashArray="1 2" />
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Application.Resources>

Usage:

<ComboBox FocusVisualStyle="{StaticResource NewFocusVisual}"  Height="23" HorizontalAlignment="Left" Margin="238,102,0,0" Name="ComboBox1" VerticalAlignment="Top" Width="120" />
<CheckBox FocusVisualStyle="{StaticResource NewFocusVisual}" Content="CheckBox" Height="16" HorizontalAlignment="Left" Margin="238,71,0,0" Name="CheckBox2" VerticalAlignment="Top" />
<TextBox FocusVisualStyle="{StaticResource NewFocusVisual}" Height="23" HorizontalAlignment="Left" Margin="238,144,0,0" Name="TextBox1" VerticalAlignment="Top" Width="120" />

---

If you want the Focus rectangle to change for every type of focus event Microsoft states that:

From Microsoft: Focus visual styles act exclusively for keyboard focus. As such, focus visual styles are a type of accessibility feature. If you want UI changes for any type of focus, whether via mouse, keyboard, or programmatically, then you should not use focus visual styles, and should instead use setters and triggers in styles or templates that are working from the value of general focus properties such as IsFocused or IsFocusWithin.

---

Give this a shot it works for a TextBox haven’t checked your other Controls

<Application.Resources>
    <Style TargetType="TextBox" >
        <Style.Triggers>
            <Trigger Property="IsFocused" Value="True">
                <Setter Property="Control.BorderBrush" Value="Red"  />
                <Setter Property="Control.BorderThickness" Value="3" />
            </Trigger>
        </Style.Triggers>
    </Style>

</Application.Resources>