Skip to content

Commit a2483ef

Browse files
dessyordanovadessyordanova
committed
new KB - How to Achieve Rounded Shape and Rounded Border for RadTextBox
1 parent 711b0fc commit a2483ef

9 files changed

+175
-2
lines changed

‎knowledge-base/images/rounded-border001.png

1018 Bytes
Loading

‎knowledge-base/images/rounded-border002.png

3.49 KB
Loading

‎knowledge-base/images/rounded-border003.png

1.02 KB
Loading

‎knowledge-base/images/rounded-border004.png

3.77 KB
Loading

‎knowledge-base/images/rounded-border005.png

1.12 KB
Loading

‎knowledge-base/images/rounded-border006.png

4.18 KB
Loading

‎knowledge-base/rounded-border.md

+169
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,169 @@
1+
---
2+
title: How to Achieve Rounded Shape and Rounded Border for RadTextBox
3+
description: Learn how to accomplish rounded shape and border in WinForms RadTextBox.
4+
type: how-to
5+
page_title: How to Achieve Rounded Shape and Border for RadTextBox
6+
slug: rounded-border
7+
position: 5
8+
tags: rounded, shape, border
9+
ticketid: 1521435
10+
res_type: kb
11+
---
12+
13+
14+
## Environment
15+
|Product Version|Product|Author|
16+
|----|----|----|
17+
|2021.2.511|RadTextBox|[Desislava Yordanova](https://www.telerik.com/blogs/author/desislava-yordanova)|
18+
19+
## Description
20+
21+
A common requirement is to achieve a rounded shape for **RadTextBox** and make a bottom border that aligns with the rounded shape.
22+
23+
This can be easily achieved by applying a [RoundRectShape]({%slug winforms/telerik-presentation-framework/roundrect-shape%}).
24+
25+
26+
````C#
27+
28+
RoundRectShape roundRectShape = new RoundRectShape();
29+
roundRectShape.Radius = 5;
30+
this.radTextBox1.TextBoxElement.Shape = roundRectShape;
31+
32+
33+
this.radTextBox1.TextBoxElement.ShowBorder = true;
34+
this.radTextBox1.TextBoxElement.Border.PaintUsingParentShape = false;
35+
this.radTextBox1.TextBoxElement.Border.BoxStyle = Telerik.WinControls.BorderBoxStyle.FourBorders;
36+
this.radTextBox1.TextBoxElement.Border.BottomWidth = 3F;
37+
this.radTextBox1.TextBoxElement.Border.BottomColor = Color.Red;
38+
this.radTextBox1.TextBoxElement.Border.LeftWidth = 0F;
39+
this.radTextBox1.TextBoxElement.Border.RightWidth = 0F;
40+
this.radTextBox1.TextBoxElement.Border.TopWidth = 0F;
41+
42+
````
43+
````VB.NET
44+
45+
Dim roundRectShape As RoundRectShape = New RoundRectShape()
46+
roundRectShape.Radius = 5
47+
Me.RadTextBox1.TextBoxElement.Shape = roundRectShape
48+
Me.RadTextBox1.TextBoxElement.ShowBorder = True
49+
Me.RadTextBox1.TextBoxElement.Border.PaintUsingParentShape = False
50+
Me.RadTextBox1.TextBoxElement.Border.BoxStyle = Telerik.WinControls.BorderBoxStyle.FourBorders
51+
Me.RadTextBox1.TextBoxElement.Border.BottomWidth = 3.0F
52+
Me.RadTextBox1.TextBoxElement.Border.BottomColor = Color.Red
53+
Me.RadTextBox1.TextBoxElement.Border.LeftWidth = 0.0F
54+
Me.RadTextBox1.TextBoxElement.Border.RightWidth = 0.0F
55+
Me.RadTextBox1.TextBoxElement.Border.TopWidth = 0.0F
56+
57+
58+
````
59+
60+
However, the border is not clipped considering the rounded shape of the TextBoxElement:
61+
62+
![rounded-border 001](images/rounded-border001.png)
63+
64+
![rounded-border 002](images/rounded-border002.png)
65+
66+
This article demonstrates how you can accomplish a rounded border as well.
67+
68+
## Solution
69+
70+
The first approach is to disable the default bottom border and draw the bottom border in the ElementPainted event:
71+
72+
#### Example 1
73+
74+
````C#
75+
public RadForm1()
76+
{
77+
InitializeComponent();
78+
79+
this.radTextBox1.TextBoxElement.Shape = new RoundRectShape(5);
80+
this.radTextBox1.TextBoxElement.Border.Visibility = ElementVisibility.Collapsed;
81+
this.radTextBox1.TextBoxElement.Padding = new System.Windows.Forms.Padding(4);
82+
this.radTextBox1.TextBoxElement.ElementPainted += this.TextBoxElement_ElementPainted;
83+
}
84+
85+
private void TextBoxElement_ElementPainted(object sender, System.Windows.Forms.PaintEventArgs e)
86+
{
87+
System.Drawing.Rectangle rect = new System.Drawing.Rectangle(0, this.radTextBox1.TextBoxElement.Bounds.Height - 2,
88+
this.radTextBox1.TextBoxElement.Bounds.Width, 2);
89+
System.Drawing.Region r = this.radTextBox1.TextBoxElement.Shape.CreateRegion(this.radTextBox1.TextBoxElement.Bounds);
90+
e.Graphics.SetClip(r, System.Drawing.Drawing2D.CombineMode.Intersect);
91+
e.Graphics.FillRectangle(System.Drawing.Brushes.Red, rect);
92+
}
93+
94+
95+
96+
````
97+
````VB.NET
98+
99+
Sub New()
100+
InitializeComponent()
101+
102+
Me.RadTextBox1.TextBoxElement.Shape = New RoundRectShape(5)
103+
Me.RadTextBox1.TextBoxElement.Border.Visibility = ElementVisibility.Collapsed
104+
Me.RadTextBox1.TextBoxElement.Padding = New System.Windows.Forms.Padding(4)
105+
AddHandler Me.RadTextBox1.TextBoxElement.ElementPainted, AddressOf Me.TextBoxElement_ElementPainted
106+
107+
End Sub
108+
109+
Private Sub TextBoxElement_ElementPainted(ByVal sender As Object, ByVal e As System.Windows.Forms.PaintEventArgs)
110+
Dim rect As System.Drawing.Rectangle = New System.Drawing.Rectangle(0, Me.RadTextBox1.TextBoxElement.Bounds.Height - 2, _
111+
Me.RadTextBox1.TextBoxElement.Bounds.Width, 2)
112+
Dim r As System.Drawing.Region = Me.radTextBox1.TextBoxElement.Shape.CreateRegion(Me.radTextBox1.TextBoxElement.Bounds)
113+
e.Graphics.SetClip(r, System.Drawing.Drawing2D.CombineMode.Intersect)
114+
e.Graphics.FillRectangle(System.Drawing.Brushes.Red, rect)
115+
End Sub
116+
117+
118+
````
119+
120+
![rounded-border 003](images/rounded-border003.png)
121+
122+
![rounded-border 004](images/rounded-border004.png)
123+
124+
The second approach is to use a single border and use the FillPrimitive to overlap the border from the other 3 sides:
125+
126+
#### Example 2
127+
128+
````C#
129+
130+
this.radTextBox1.RootElement.Shape = new RoundRectShape(5);
131+
this.radTextBox1.TextBoxElement.Shape = new RoundRectShape(5);
132+
this.radTextBox1.TextBoxElement.Padding = new System.Windows.Forms.Padding(4);
133+
this.radTextBox1.TextBoxElement.Fill.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighQuality;
134+
this.radTextBox1.TextBoxElement.Fill.ZIndex = 10;
135+
136+
Telerik.WinControls.Primitives.BorderPrimitive border = this.radTextBox1.TextBoxElement.Border;
137+
border.ForeColor = Color.Red;
138+
border.BoxStyle = BorderBoxStyle.SingleBorder;
139+
border.Margin = new System.Windows.Forms.Padding(5, 3, 5, 0);
140+
border.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighQuality;
141+
border.Width = 3;
142+
143+
````
144+
````VB.NET
145+
Me.RadTextBox1.RootElement.Shape = New RoundRectShape(5)
146+
Me.RadTextBox1.TextBoxElement.Shape = New RoundRectShape(5)
147+
Me.RadTextBox1.TextBoxElement.Padding = New System.Windows.Forms.Padding(4)
148+
Me.RadTextBox1.TextBoxElement.Fill.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighQuality
149+
Me.RadTextBox1.TextBoxElement.Fill.ZIndex = 10
150+
Dim border As Telerik.WinControls.Primitives.BorderPrimitive = Me.RadTextBox1.TextBoxElement.Border
151+
border.ForeColor = Color.Red
152+
border.BoxStyle = BorderBoxStyle.SingleBorder
153+
border.Margin = New System.Windows.Forms.Padding(5, 3, 5, 0)
154+
border.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighQuality
155+
border.Width = 3
156+
157+
158+
````
159+
160+
![rounded-border 005](images/rounded-border005.png)
161+
162+
![rounded-border 006](images/rounded-border006.png)
163+
164+
165+
# See Also
166+
167+
* [BorderPrimitive]({%slug winforms/telerik-presentation-framework/primitives/borderprimitive%})
168+
* [RoundRect Shape]({%slug winforms/telerik-presentation-framework/roundrect-shape%})
169+

‎telerik-presentation-framework/primitives/borderprimitive.md

+3-1
Original file line numberDiff line numberDiff line change
@@ -193,5 +193,7 @@ End Class
193193

194194
* [ImageShape]({%slug winforms/telerik-presentation-framework/primitives/imageshape%})
195195

196-
* [LightVisualElement]({%slug winforms/telerik-presentation-framework/primitives/lightvisualelement%})
196+
* [LightVisualElement]({%slug winforms/telerik-presentation-framework/primitives/lightvisualelement%})
197+
198+
* [How to Achieve Rounded Shape and Rounded Border for RadTextBox]({%slug rounded-border%})
197199

‎telerik-presentation-framework/shapes/round-rect-shape.md

+3-1
Original file line numberDiff line numberDiff line change
@@ -61,5 +61,7 @@ radPanel1.PanelElement.Shape = roundRectShape
6161

6262
* [Overview]({%slug winforms/telerik-presentation-framework/shapes%})
6363

64-
* [Star Shape]({%slug winforms/telerik-presentation-framework/star-shape%})
64+
* [Star Shape]({%slug winforms/telerik-presentation-framework/star-shape%})
65+
66+
* [How to Achieve Rounded Shape and Rounded Border for RadTextBox]({%slug rounded-border%})
6567

0 commit comments

Comments
 (0)