WPF: Round Corner TextBox With Border effect
Introduction
This blog contains WPF XAML code snippet to create custom round corner TextBox in WPF.
Getting Started
This custom TextBox has three types of border effects which changes, when mouse overs over the TextBox, when gets focus and lost the mouse focus. It changes it's border color with mentions situations, when this TextBox losts mouse focus it comes in to normal mode. see the below images for more details.
Now we will discuss how we will get round corner textbox. We know that WPF provides various ways like using style,control template etc. to customize appearance of inbuild controls.
Here I have used WPF style and control template to customize the textbox appearance. Inside the template control of textbox, a border is added to display border with textbox and modified border thickness,border color and corner radious of border for displaying round corner.
For border effect of textbox, I used property trigger inside the style of textbox. This trigger will get actived when mouse cursor will enter into textbox or when textbox will get focuse or lost focuse.
Codes:
<TextBox TextWrapping="Wrap" Name="txtMessage" Width="300" Height="40">
<TextBox.Style>
<Style TargetType="{x:Type TextBox}">
<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>
</TextBox.Style>
</TextBox>
Thanks
Kailash Chandra Behera
Comments
Post a Comment