Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Change the focused border color of a Wpf textbox when it GotFocus()

Tags:

c#

vb.net

wpf

What I want: to change the border color to yellow when any textbox has focus.

What I tried:

<Window.Resources>
    <Style TargetType="TextBox">
        <Style.Triggers>
            <Trigger Property="IsFocused" Value="True">
                <Setter Property="BorderBrush" Value="Yellow"></Setter>
                <Setter Property="BorderThickness" Value="1"></Setter>
            </Trigger>
        </Style.Triggers>
    </Style>
</Window.Resources>

No joy. Cannot figure out why the border remains blue. This is similar, but not a duplicate of How to change the color of the Border of a TextBox when it has focus?.

like image 500
DrDamnit Avatar asked Feb 02 '17 22:02

DrDamnit


1 Answers

You need to modify the control template of the TextBox. Adding a trigger to the style is not enough. This should work:

<Style TargetType="TextBox">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type TextBox}">
                <Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True">
                    <ScrollViewer x:Name="PART_ContentHost" Focusable="false" HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden"/>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsEnabled" Value="false">
                        <Setter Property="Opacity" TargetName="border" Value="0.56"/>
                    </Trigger>
                    <Trigger Property="IsMouseOver" Value="true">
                        <Setter Property="BorderBrush" TargetName="border" Value="#FF7EB4EA"/>
                    </Trigger>
                    <Trigger Property="IsFocused" Value="true">
                        <Setter Property="BorderBrush" TargetName="border" Value="Yellow"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

You can find the original style template in the WPF source code: https://github.com/dotnet/wpf/blob/c271205b80c27df976acbd7236ec637090d127c1/src/Microsoft.DotNet.Wpf/src/Themes/XAML/TextBox.xaml#L415-L441

like image 158
mm8 Avatar answered Sep 22 '22 20:09

mm8