Round Corner TextBox With Border Effect

Kailash Chandra Behera | Saturday, February 03, 2018

Introduction

This custom TextBox (Round Corner TextBox With Border effect) has three types of border effects that changes when mouse-overs over the TextBox when it gets focus and lost the mouse focus. It changes its border color with mentions situations, when this TextBox loses mouse focus it comes into normal mode. see the below images for more details.

This blog contains WPF XAML code snippet to create custom round corner TextBox in WPF.

border corner shape css

Round Corner TextBox With Border Effect

Round Corner TextBox With Border Effect

Getting Started

Now we will discuss how we will get roundable corner textbox. We know that WPF provides various ways like using style, control template etc. to customize the appearance of inbuilt controls.

Here I have used the WPF style and control template to customize the textbox appearance. Inside the template control of textbox, a border is added to display border with a textbox and modified border thickness, border color, and corner radius of the border for displaying rounded corners.

For the border effect of the textbox, I used a property trigger inside the style of the textbox. This trigger will get active when the mouse cursor will enter into the textbox or when the textbox will get focused or lost focus.

Round Corner TextBox With Border Effect

Code Example

The below code declares style in application resources for WPF TextBox that customizes the TextBox appearance.

A border cotrol is injected into the ControlTemplate or TextBox which border color will be changes based on the triggers. The triggers will be trigger based on the TextBox event like IsMouseMove.

Style for Round Corner TextBox With Border Effect

 <Application.Resources>  
     <Style TargetType="{x:Type TextBox}" x:Key="roundcornerTextboxwithbordereffect">  
       <Setter Property="Padding" Value="10"></Setter>  
       <Setter Property="Template">  
         <Setter.Value>  
           <ControlTemplate TargetType="{x:Type TextBox}">  
             <Border Background="{TemplateBinding Background}"    
      x:Name="Bd" BorderBrush="Black"   
      BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="10">  
               <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>  
               <Trigger Property="IsMouseOver" Value="True">  
                 <Setter TargetName="Bd" Property="BorderBrush" Value="Red"></Setter>  
                 <Setter TargetName="Bd" Property="BorderThickness" Value="3"></Setter>  
               </Trigger>  
               <Trigger Property="IsFocused" Value="True">  
                 <Setter TargetName="Bd" Property="BorderBrush" Value="DarkOrange"></Setter>  
                 <Setter TargetName="Bd" Property="BorderThickness" Value="2"></Setter>  
               </Trigger>  
             </ControlTemplate.Triggers>  
           </ControlTemplate>  
         </Setter.Value>  
       </Setter>  
     </Style>  
   </Application.Resources>

The following code example applies the style declared in the above code in the default WPF TextBox by the Style property of TextBox.

Apply Style for Round Corner TextBox With Border Effect

 <Grid>  
     <Grid.RowDefinitions>  
       <RowDefinition Height="40"/>  
       <RowDefinition Height="50"/>  
     </Grid.RowDefinitions>  
     <TextBlock Text="Border Color Effect TextBox Mouse Over" HorizontalAlignment="Center" FontSize="28" Foreground="Red"/>  
     <TextBox Grid.Row="1" Style="{StaticResource roundcornerTextboxwithbordereffect}" TextWrapping="Wrap" Name="txtMessage" Width="300" Height="40">  
     </TextBox>  
   </Grid>

Related Articles

  1. Data Validation in WPF
  2. WPF Round Corner Button with click effects
  3. Round Corner PasswordBox in WPF
  4. Round Corner TextBox in WPF
  5. WPF Custom Datagrid Control(Filterable)
  6. WPF Round Corner ListBox
  7. Custom RadioButtonListBox With Image
  8. RadiobuttonList in WPF
  9. Custom CheckedListBox in WPF

Thanks

By at