WPF Textbox Style – Changing Colors on Focus

WPF Textbox Style – Changing Colors on Focus.

Using the WPF Textbox styles options, we can change the border color, foreground color, background color, border color and also produce a rounded border radius for WPF Textbox control.

In this post I’ll explaining a very simple WPF Textbox style using which you can change the Foreground and the border color of your WPF Textbox.

The Style code for WPF Textbox:

<Style TargetType="TextBox">
<Setter Property="Padding" Value="5"/>
<Setter Property="Margin" Value="5"/>
<Setter Property="FontSize" Value="20"/>
<Setter Property="MinHeight" Value="20"/>
<Setter Property="MinWidth" Value="250"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TextBox}">
<Border x:Name="border"
CornerRadius="2"
BorderBrush="#000"
BorderThickness="1"
Background="#fff"
>
<ScrollViewer x:Name="PART_ContentHost"
Focusable="false"
HorizontalScrollBarVisibility="Hidden"
VerticalScrollBarVisibility="Hidden"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="BorderBrush" TargetName="border" Value="#909090"/>
<Setter Property="Foreground" Value="Red" />
<Setter Property="FontWeight" Value="Bold" />
</Trigger>
<Trigger Property="IsFocused" Value="true">
<Setter Property="Foreground" Value="Blue" />
<Setter Property="BorderBrush" TargetName="border" Value="Blue"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

And my WPF Textbox :

<StackPanel Orientation="Horizontal" VerticalAlignment="Top">
<TextBlock FontSize="20" Margin="5" VerticalAlignment="Center">First name :</TextBlock>
<TextBox Name="btnName" ></TextBox>
</StackPanel>
<StackPanel Orientation="Horizontal" VerticalAlignment="Top">
<TextBlock FontSize="20" Margin="5" VerticalAlignment="Center">Last name :</TextBlock>
<TextBox Name="btnLastName" ></TextBox>
</StackPanel>

Below is the full code with style :

<Window x:Class="WpfApplication2.Form1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Form1" Height="300" Width="300" WindowState='Maximized'>
<Window.Resources>
<Style TargetType="TextBox">
<Setter Property="Padding" Value="5"/>
<Setter Property="Margin" Value="5"/>
<Setter Property="FontSize" Value="20"/>
<Setter Property="MinHeight" Value="20"/>
<Setter Property="MinWidth" Value="250"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TextBox}">
<Border x:Name="border"
CornerRadius="2"
BorderBrush="#000"
BorderThickness="1"
Background="#fff"

>
<ScrollViewer x:Name="PART_ContentHost"
Focusable="false"
HorizontalScrollBarVisibility="Hidden"
VerticalScrollBarVisibility="Hidden"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="BorderBrush" TargetName="border" Value="#909090"/>
<Setter Property="Foreground" Value="Red" />
<Setter Property="FontWeight" Value="Bold" />
</Trigger>
<Trigger Property="IsFocused" Value="true">
<Setter Property="Foreground" Value="Blue" />
<Setter Property="BorderBrush" TargetName="border" Value="Blue"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

</Window.Resources>
<StackPanel Orientation="Vertical" VerticalAlignment="Top">

<StackPanel Orientation="Horizontal" VerticalAlignment="Top">
<TextBlock FontSize="20" Margin="5" VerticalAlignment="Center">First name :</TextBlock>
<TextBox Name="btnName" ></TextBox>
</StackPanel>
<StackPanel Orientation="Horizontal" VerticalAlignment="Top">
<TextBlock FontSize="20" Margin="5" VerticalAlignment="Center">Last name :</TextBlock>
<TextBox Name="btnLastName" ></TextBox>
</StackPanel>
</StackPanel>
</Window>

Now run your program, you will get the styled WPF Textbox control with on focus changing foreground color, border color, rounded corners textbox.

Also see :
WPF Button Style with Rounded Corners and Hover Effects
WPF Textbox With Rounded Corners