New to Telerik UI for WinForms? Start a free 30-day trial
How to Achieve Rounded Shape and Rounded Border for RadTextBox
Updated over 6 months ago
Environment
| Product Version | Product | Author |
|---|---|---|
| 2021.2.511 | RadTextBox | Desislava Yordanova |
Description
A common requirement is to achieve a rounded shape for RadTextBox and make a bottom border that aligns with the rounded shape.
This can be easily achieved by applying a RoundRectShape.
C#
RoundRectShape roundRectShape = new RoundRectShape();
roundRectShape.Radius = 5;
this.radTextBox1.TextBoxElement.Shape = roundRectShape;
this.radTextBox1.TextBoxElement.ShowBorder = true;
this.radTextBox1.TextBoxElement.Border.PaintUsingParentShape = false;
this.radTextBox1.TextBoxElement.Border.BoxStyle = Telerik.WinControls.BorderBoxStyle.FourBorders;
this.radTextBox1.TextBoxElement.Border.BottomWidth = 3F;
this.radTextBox1.TextBoxElement.Border.BottomColor = Color.Red;
this.radTextBox1.TextBoxElement.Border.LeftWidth = 0F;
this.radTextBox1.TextBoxElement.Border.RightWidth = 0F;
this.radTextBox1.TextBoxElement.Border.TopWidth = 0F;
However, the border is not clipped considering the rounded shape of the TextBoxElement:
This article demonstrates how you can accomplish a rounded border as well.
Solution
The first approach is to disable the default bottom border and draw the bottom border in the ElementPainted event:
Example 1
C#
public RadForm1()
{
InitializeComponent();
this.radTextBox1.TextBoxElement.Shape = new RoundRectShape(5);
this.radTextBox1.TextBoxElement.Border.Visibility = ElementVisibility.Collapsed;
this.radTextBox1.TextBoxElement.Padding = new System.Windows.Forms.Padding(4);
this.radTextBox1.TextBoxElement.ElementPainted += this.TextBoxElement_ElementPainted;
}
private void TextBoxElement_ElementPainted(object sender, System.Windows.Forms.PaintEventArgs e)
{
System.Drawing.Rectangle rect = new System.Drawing.Rectangle(0, this.radTextBox1.TextBoxElement.Bounds.Height - 2,
this.radTextBox1.TextBoxElement.Bounds.Width, 2);
System.Drawing.Region r = this.radTextBox1.TextBoxElement.Shape.CreateRegion(this.radTextBox1.TextBoxElement.Bounds);
e.Graphics.SetClip(r, System.Drawing.Drawing2D.CombineMode.Intersect);
e.Graphics.FillRectangle(System.Drawing.Brushes.Red, rect);
}
The second approach is to use a single border and use the FillPrimitive to overlap the border from the other 3 sides:
Example 2
C#
this.radTextBox1.RootElement.Shape = new RoundRectShape(5);
this.radTextBox1.TextBoxElement.Shape = new RoundRectShape(5);
this.radTextBox1.TextBoxElement.Padding = new System.Windows.Forms.Padding(4);
this.radTextBox1.TextBoxElement.Fill.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighQuality;
this.radTextBox1.TextBoxElement.Fill.ZIndex = 10;
Telerik.WinControls.Primitives.BorderPrimitive border = this.radTextBox1.TextBoxElement.Border;
border.ForeColor = Color.Red;
border.BoxStyle = BorderBoxStyle.SingleBorder;
border.Margin = new System.Windows.Forms.Padding(5, 3, 5, 0);
border.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighQuality;
border.Width = 3;
