Skip to main content
WPF Textbox Rounded Corners 01

WPF Textbox With Rounded Corners

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 :