Round Corner TextBox in WPF

Kailash Chandra Behera | Tuesday, January 10, 2017
corner round Textbox
Round Corner WPF Textbox

Introduction

Sometimes while developing WPF application requires custom WPF Textbox with corner round. This blog Round Corner Textbox in WPF provides code samples that converts the default WPF textbox to round corner textbox which has all the corner round .

Getting Started

The bellow Extensible Application Markup Language (XAML) code how to round the corner of textbox by setting each corner radious value. 

 <Window x:Class="RoundCornerTextBox.MainWindow"  
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
     Title="Round Corner Textbox Example" Height="350" Width="525">  
   <Window.Resources>  
     <ControlTemplate x:Key="RoundTextboxCornterTemplate" TargetType="{x:Type TextBoxBase}">  
       <Border Background="{TemplateBinding Background}"   
         x:Name="Bd" BorderBrush="Black"  
         BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="5">  
         <ScrollViewer x:Name="PART_ContentHost"/>  
       </Border>  
       <ControlTemplate.Triggers>  
         <Trigger Property="IsEnabled" Value="False">  
           <Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}" TargetName="Bd"/>  
           <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>  
         </Trigger>  
         <Trigger Property="Width" Value="Auto">  
           <Setter Property="MinWidth" Value="100"/>  
         </Trigger>  
         <Trigger Property="Height" Value="Auto">  
           <Setter Property="MinHeight" Value="20"/>  
         </Trigger>  
       </ControlTemplate.Triggers>  
     </ControlTemplate>  
   </Window.Resources>  
   <Grid>  
     <TextBox Template="{StaticResource RoundTextboxCornterTemplate}" Text="Kailash" Height="30" FontSize="18" Width="200" Margin="5"></TextBox>  
   </Grid>  
 </Window>

The above XMAL codes customized the template of textbox and use a WPF Broder control to visible the textbox border with corner round. To make the corner round of WPF Border, it sets each corner radious value of border to 5 which will work to round the corners of textbox.

Related Articles

  1. WPF Textbox Numeric Only OR WPF Numeric Textbox
  2. Enable WPF Textbox Multiline Text
  3. Round Corner TextBox With Border Effect
  4. Data Validation in WPF

Thanks

By at