A TextBox With Rounded Corners Through WPF XAML

What is the first idea that comes to mind when someone mentions rounded corners and WPF? Probably Border. That is the right thing to think about, but how to apply it to a TextBox control?

There are two ways to achieve what you want.

Way A:

The most obvious thing would be creating a border around the control itself. Something like this:

<Border CornerRadius="5" BorderThickness="1" BorderBrush="Black" Margin="91,192,150,79">
<TextBox Background=”Transparent” BorderThickness="0" Height="35" Name="txtContents" Width="254" />
</Border>

That should do the initial trick – the TextBox control has no border around it (the BorderThickness property is set to 0) while the Border that contains it sets the correct rounding, color and thickness.

Looking good, but the fun part comes around when you decide that this specific TextBox shouldn’t be enabled, so you set the IsEnabled property to False.  

What’s up with the rest of the white space between the border and the writing area? Doesn’t look like we want it to behave like this. And that’s where the second way to create rounded corners saves the day.

Way B:

It is a bit more complicated, but it gives a better result. What it does is it overrides the default control template for the TextBox. But how do I know how the default template looks like?

Since it is not possible to modify only one part of the template, the whole template should be overridden. To avoid functionality loss, I am going to get the default template and use it with small modifications.

To get the default style (that embeds the control template) for a TextBox control I am using the GetStyle method:

string GetStyle(Type t)
{
FrameworkElement element = (FrameworkElement)Activator.CreateInstance(t);
object styleName = element.GetValue(FrameworkElement.DefaultStyleKeyProperty);
Style style = Application.Current.TryFindResource(styleName) as Style;
StringWriter stringContainer = new StringWriter();
XmlTextWriter xmlWriter = new XmlTextWriter(stringContainer);
xmlWriter.Formatting = Formatting.Indented;
System.Windows.Markup.XamlWriter.Save(style, xmlWriter);
return stringContainer.ToString();
}

Since I am using the default control, without any custom styles attached, I can simply create an instance of TextBox and use its type as a parameter for the GetStyle method:

TextBox t = new TextBox();
Debug.Print(GetStyle(t.GetType()));

The output should look like this:

<Style TargetType="TextBox" xmlns="<a href="http://schemas.microsoft.com/winfx/2006/xaml/presentation"">http://schemas.microsoft.com/winfx/2006/xaml/presentation"</a> xmlns:x="<a href="http://schemas.microsoft.com/winfx/2006/xaml"">http://schemas.microsoft.com/winfx/2006/xaml"</a> xmlns:s="clr-namespace:System;assembly=mscorlib" xmlns:mwt="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Aero">
<Style.BasedOn>
<Style TargetType="TextBoxBase">
<Style.Resources>
<ResourceDictionary />
</Style.Resources>
<Setter Property="TextElement.Foreground">
<Setter.Value>
<DynamicResource ResourceKey="{x:Static SystemColors.ControlTextBrushKey}" />
</Setter.Value>
</Setter>
<Setter Property="Panel.Background">
<Setter.Value>
<DynamicResource ResourceKey="{x:Static SystemColors.WindowBrushKey}" />
</Setter.Value>
</Setter>
<Setter Property="Border.BorderBrush">
<Setter.Value>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,20" MappingMode="Absolute">
<LinearGradientBrush.GradientStops>
<GradientStop Color="#FFABADB3" Offset="0.05" />
<GradientStop Color="#FFE2E3EA" Offset="0.07" />
<GradientStop Color="#FFE3E9EF" Offset="1" />
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="Border.BorderThickness">
<Setter.Value>
<Thickness>1,1,1,1</Thickness>
</Setter.Value>
</Setter>
<Setter Property="Control.Padding">
<Setter.Value>
<Thickness>1,1,1,1</Thickness>
</Setter.Value>
</Setter>
<Setter Property="UIElement.AllowDrop">
<Setter.Value>
<s:Boolean>True</s:Boolean>
</Setter.Value>
</Setter>
<Setter Property="FrameworkElement.FocusVisualStyle">
<Setter.Value>
<x:Null />
</Setter.Value>
</Setter>
<Setter Property="ScrollViewer.PanningMode">
<Setter.Value>
<x:Static Member="PanningMode.VerticalFirst" />
</Setter.Value>
</Setter>
<Setter Property="Stylus.IsFlicksEnabled">
<Setter.Value>
<s:Boolean>False</s:Boolean>
</Setter.Value>
</Setter>
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate TargetType="TextBoxBase">
<mwt:ListBoxChrome Background="{TemplateBinding Panel.Background}" BorderBrush="{TemplateBinding Border.BorderBrush}" BorderThickness="{TemplateBinding Border.BorderThickness}" RenderMouseOver="{TemplateBinding UIElement.IsMouseOver}" RenderFocused="{TemplateBinding UIElement.IsKeyboardFocusWithin}" Name="Bd" SnapsToDevicePixels="True">
<ScrollViewer Name="PART_ContentHost" SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}" />
</mwt:ListBoxChrome>
<ControlTemplate.Triggers>
<Trigger Property="UIElement.IsEnabled">
<Setter Property="Panel.Background" TargetName="Bd">
<Setter.Value>
<DynamicResource ResourceKey="{x:Static SystemColors.ControlBrushKey}" />
</Setter.Value>
</Setter>
<Setter Property="TextElement.Foreground">
<Setter.Value>
<DynamicResource ResourceKey="{x:Static SystemColors.GrayTextBrushKey}" />
</Setter.Value>
</Setter>
<Trigger.Value>
<s:Boolean>False</s:Boolean>
</Trigger.Value>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Style.BasedOn>
<Style.Resources>
<ResourceDictionary />
</Style.Resources>
</Style>

That is a lot of XAML markup right there, but all we need is the control template:

<ControlTemplate TargetType="TextBoxBase">
<mwt:ListBoxChrome Background="{TemplateBinding Panel.Background}" BorderBrush="{TemplateBinding Border.BorderBrush}" BorderThickness="{TemplateBinding Border.BorderThickness}" RenderMouseOver="{TemplateBinding UIElement.IsMouseOver}" RenderFocused="{TemplateBinding UIElement.IsKeyboardFocusWithin}" Name="Bd" SnapsToDevicePixels="True">
<ScrollViewer Name="PART_ContentHost" SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}" />
</mwt:ListBoxChrome>
<ControlTemplate.Triggers>
<Trigger Property="UIElement.IsEnabled">
<Setter Property="Panel.Background" TargetName="Bd">
<Setter.Value>
<DynamicResource ResourceKey="{x:Static SystemColors.ControlBrushKey}" />
</Setter.Value>
</Setter>
<Setter Property="TextElement.Foreground">
<Setter.Value>
<DynamicResource ResourceKey="{x:Static SystemColors.GrayTextBrushKey}" />
</Setter.Value>
</Setter>
<Trigger.Value>
<s:Boolean>False</s:Boolean>
</Trigger.Value>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>

Now, the ListBoxChrome wrapper should be removed and Border used instead, with the CornerRadius property assigned. The modified template looks like this:

<ControlTemplate TargetType="TextBoxBase" x:Key="txt">
<Border CornerRadius="5" BorderThickness="1" BorderBrush="Black" x:Name="Bd" Background="{TemplateBinding Panel.Background}">
<ScrollViewer Name="PART_ContentHost" SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="UIElement.IsEnabled">
<Setter Property="Panel.Background" TargetName="Bd">
<Setter.Value>
<DynamicResource ResourceKey="{x:Static SystemColors.ControlBrushKey}" />
</Setter.Value>
</Setter>
<Setter Property="TextElement.Foreground">
<Setter.Value>
<DynamicResource ResourceKey="{x:Static SystemColors.GrayTextBrushKey}" />
</Setter.Value>
</Setter>
<Trigger.Value>
<s:Boolean>False</s:Boolean>
</Trigger.Value>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>

Additionaly, I added x:Key to the template header so I can identify it in my application. Now, this template can be inserted in the Resources section for a WPF application. Since I am testing this on a windowed WPF application, I will insert this template inside Windows.Resources.

The reference to the s namespace should be added as well (used for the IsEnabled trigger):

xmlns:s="clr-namespace:System;assembly=mscorlib"

Now I am able to reference the template for a TextBox inside the window:

<TextBox Template="{StaticResource txt}" Background="Transparent" BorderThickness="0" Height="35" Name="textBox1" Width="254" />

Just the way it should be. In case you do not need to change the look of the control when it is disabled, you can simply remove the IsEnabled trigger from the template so all you will have is this:

<ControlTemplate TargetType="TextBoxBase" x:Key="txt">

<Border CornerRadius="5" BorderThickness="1" BorderBrush="Black" x:Name="Bd" Background="{TemplateBinding Panel.Background}">

<ScrollViewer Name="PART_ContentHost" SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}" />

</Border>

</ControlTemplate>

It will correctly render the border, but there won’t be a grayed-out background and modified foreground when the control is explicitly set as inactive.