WPF Textbox With Rounded Corners

WPF Textbox Rounded Corners 01

WPF Textbox Rounded Corners.

Using WPF Textbox style options we can make a WPF Textbox with Rounded corners. We can also make radius of all four corners differently using the border radius property of WPF Textbox styling. Here we will be using the same.

WPF Textbox Rounded Corners

Below is the style code for WPF Textbox. I have made three different Textbox to explain the styling of WPF Textbox with different rounded corner options.

WPF Style Code :


<Style TargetType="TextBox" x:Key="Textbox">
<Setter Property="Padding" Value="7"/>
<Setter Property="Margin" Value="5"/>
<Setter Property="Foreground" Value="#000"/>
<Setter Property="FontSize" Value="20"/>
<Setter Property="MinHeight" Value="20"/>
<Setter Property="MinWidth" Value="250"/>
<Setter Property="FontWeight" Value="Bold" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TextBox}">
<Border x:Name="border"
CornerRadius="0"
BorderBrush="#000"
BorderThickness="2"
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="Red"/>
<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>

<Style TargetType="TextBox" x:Key="Textbox1">
<Setter Property="Padding" Value="7"/>
<Setter Property="Margin" Value="5"/>
<Setter Property="Foreground" Value="#000"/>
<Setter Property="FontSize" Value="20"/>
<Setter Property="MinHeight" Value="20"/>
<Setter Property="MinWidth" Value="250"/>
<Setter Property="FontWeight" Value="Bold" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TextBox}">
<Border x:Name="border"
CornerRadius="10"
BorderBrush="#000"
BorderThickness="2"
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="Red"/>
<Setter Property="Foreground" Value="Red" />

</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>

<Style TargetType="TextBox" x:Key="Textbox2">
<Setter Property="Padding" Value="7"/>
<Setter Property="Margin" Value="5"/>
<Setter Property="Foreground" Value="#000"/>
<Setter Property="FontSize" Value="20"/>
<Setter Property="MinHeight" Value="20"/>
<Setter Property="MinWidth" Value="250"/>
<Setter Property="FontWeight" Value="Bold" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TextBox}">
<Border x:Name="border"
CornerRadius="0,25,0,25"
BorderBrush="#000"
BorderThickness="2"
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="Red"/>
<Setter Property="Foreground" Value="Red" />

</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>

WPF Textbox rounded corners usage :


<StackPanel Orientation="Vertical" VerticalAlignment="Top">

<StackPanel Orientation="Horizontal" VerticalAlignment="Top">
<TextBlock FontSize="20" Margin="5" VerticalAlignment="Center">Textbox 1 :</TextBlock>
<TextBox Name="btnName1" Style="{StaticResource Textbox}"></TextBox>
</StackPanel>
<StackPanel Orientation="Horizontal" VerticalAlignment="Top">
<TextBlock FontSize="20" Margin="5" VerticalAlignment="Center">Textbox 2 :</TextBlock>
<TextBox Name="btnName" Style="{StaticResource Textbox1}"></TextBox>
</StackPanel>
<StackPanel Orientation="Horizontal" VerticalAlignment="Top">
<TextBlock FontSize="20" Margin="5" VerticalAlignment="Center">Textbox 3 :</TextBlock>
<TextBox Name="btnLastName" Style="{StaticResource Textbox2}"></TextBox>
</StackPanel>
</StackPanel>

Complete Form :


<Window x:Class="WpfApplication2.Form2"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" WindowState="Maximized"
Title="Form2" Height="300" Width="300" Background="#fff" Foreground="#000">
<Window.Resources>
<Style TargetType="TextBox" x:Key="Textbox">
<Setter Property="Padding" Value="7"/>
<Setter Property="Margin" Value="5"/>
<Setter Property="Foreground" Value="#000"/>
<Setter Property="FontSize" Value="20"/>
<Setter Property="MinHeight" Value="20"/>
<Setter Property="MinWidth" Value="250"/>
<Setter Property="FontWeight" Value="Bold" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TextBox}">
<Border x:Name="border"
CornerRadius="0"
BorderBrush="#000"
BorderThickness="2"
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="Red"/>
<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>

<Style TargetType="TextBox" x:Key="Textbox1">
<Setter Property="Padding" Value="7"/>
<Setter Property="Margin" Value="5"/>
<Setter Property="Foreground" Value="#000"/>
<Setter Property="FontSize" Value="20"/>
<Setter Property="MinHeight" Value="20"/>
<Setter Property="MinWidth" Value="250"/>
<Setter Property="FontWeight" Value="Bold" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TextBox}">
<Border x:Name="border"
CornerRadius="10"
BorderBrush="#000"
BorderThickness="2"
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="Red"/>
<Setter Property="Foreground" Value="Red" />

</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>

<Style TargetType="TextBox" x:Key="Textbox2">
<Setter Property="Padding" Value="7"/>
<Setter Property="Margin" Value="5"/>
<Setter Property="Foreground" Value="#000"/>
<Setter Property="FontSize" Value="20"/>
<Setter Property="MinHeight" Value="20"/>
<Setter Property="MinWidth" Value="250"/>
<Setter Property="FontWeight" Value="Bold" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TextBox}">
<Border x:Name="border"
CornerRadius="0,25,0,25"
BorderBrush="#000"
BorderThickness="2"
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="Red"/>
<Setter Property="Foreground" Value="Red" />

</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">Textbox 1 :</TextBlock>
<TextBox Name="btnName1" Style="{StaticResource Textbox}"></TextBox>
</StackPanel>
<StackPanel Orientation="Horizontal" VerticalAlignment="Top">
<TextBlock FontSize="20" Margin="5" VerticalAlignment="Center">Textbox 2 :</TextBlock>
<TextBox Name="btnName" Style="{StaticResource Textbox1}"></TextBox>
</StackPanel>
<StackPanel Orientation="Horizontal" VerticalAlignment="Top">
<TextBlock FontSize="20" Margin="5" VerticalAlignment="Center">Textbox 3 :</TextBlock>
<TextBox Name="btnLastName" Style="{StaticResource Textbox2}"></TextBox>
</StackPanel>
</StackPanel>
</Window>

After using the above code, you can run your program to make three different looking WPF textbox with rounded corners. They will be also having the property of on-focus, hovering color change, foreground color change and border color change using the above WPF Textbox style code.

WPF Textbox Rounded Corners

Also see :


  1. Base64Encode.io - Realtime Encode your string to Base64 format.
  2. Base64Decode.io - Realtime Decode Base64 data to plain text.
  3. Md5Hash.io - Realtime Encoding in Md5Hash.

4 thoughts on “WPF Textbox With Rounded Corners”

  1. Pingback: WPF Textbox Style - Changing Colors on Focus • ParallelCodes();

  2. Pingback: WPF Styling TabControl and TabItem • ParallelCodes();

  3. Pingback: WPF Datagrid with Button and Click Method - ParallelCodes

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.