This is a migrated thread and some comments may be shown as answers.

Remove square border around button with rounded edges

14 Answers 1713 Views

Buttons, RadioButton, CheckBox, etc

This is a migrated thread and some comments may be shown as answers.

14 Answers, 1 is accepted

answered on 15 Jan 2015, 03:00 PM

rounded-drop-down-button.png

Hello Trey,

Thank you for writing.

You could reach the appearance you described by couple of ways.
1. Create your custom RoundedRadDropDownButton and override OnLoad method where you could create your own rectangle with rounded corners:

public class RoundedRadDropDownButton : RadDropDownButton

{

public RoundedRadDropDownButton()

: base()

{

}

public override string ThemeClassName

{

get

{

return typeof(RadDropDownButton).FullName;

}

protected override void OnLoad(System.Drawing.Size desiredSize)

{

var rect = new Rectangle(0, 0, this.Width, this.Height);

var roundedRect = NativeMethods.CreateRoundRectRgn(rect, 25);

this.Region = roundedRect;

RoundRectShape shape = new RoundRectShape();

shape.BottomLeftRounded = true;

shape.BottomRightRounded = true;

shape.TopLeftRounded = true;

shape.TopRightRounded = true;

shape.Radius = 15;

this.DropDownButtonElement.BorderElement.Shape = shape;

base.OnLoad(desiredSize);

}

2. You could use another approach and play with the Shape properties of the BorderElement, ActionButton and ArrowButton elements of your drop-down button. Please see my code snippet below:

public partial class Form1 : Form

{

public Form1()

{

InitializeComponent();

this.BackColor = Color.Yellow;

this.radDropDownButton2.DropDownButtonElement.ArrowButtonMinSize = new System.Drawing.Size(50, 0);

RoundRectShape actionButtonShape = new RoundRectShape();

actionButtonShape.BottomLeftRounded = true;

actionButtonShape.BottomRightRounded = false;

actionButtonShape.TopLeftRounded = true;

actionButtonShape.TopRightRounded = false;

actionButtonShape.Radius = 22;

this.radDropDownButton2.DropDownButtonElement.ActionButton.Shape = actionButtonShape;

RoundRectShape arrowButtonShape = new RoundRectShape();

arrowButtonShape.BottomLeftRounded = false;

arrowButtonShape.BottomRightRounded = true;

arrowButtonShape.TopLeftRounded = false;

arrowButtonShape.TopRightRounded = true;

arrowButtonShape.Radius = 22;

this.radDropDownButton2.DropDownButtonElement.ArrowButton.Shape = arrowButtonShape;

RoundRectShape shape = new RoundRectShape();

shape.BottomLeftRounded = true;

shape.BottomRightRounded = true;

shape.TopLeftRounded = true;

shape.TopRightRounded = true;

shape.Radius = 22;

this.radDropDownButton2.DropDownButtonElement.BorderElement.Shape = shape;

}

I am also sending you a screenshot how the buttons look on my side.

I hope this helps. Should you have further questions please do not hesitate to write back.

Regards,
Hristo
Telerik

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

answered on 21 Jan 2015, 02:45 PM

2015-01-21_0943.png

I am attempting to use similar logic for a radButton:

public static void makeButtonRound(RadButton RB)

{

RoundRectShape actionButtonShape = new RoundRectShape();

actionButtonShape.BottomLeftRounded = true;

actionButtonShape.BottomRightRounded = false;

actionButtonShape.TopLeftRounded = true;

actionButtonShape.TopRightRounded = false;

actionButtonShape.Radius = 22;

RB.ButtonElement.Shape = actionButtonShape;

RoundRectShape shape = new RoundRectShape();

shape.BottomLeftRounded = true;

shape.BottomRightRounded = true;

shape.TopLeftRounded = true;

shape.TopRightRounded = true;

shape.Radius = 22;

RB.ButtonElement.BorderElement.Shape = shape;

}

but am still getting the square rectangle behind the button. (See attached)

answered on 21 Jan 2015, 04:47 PM

Actually, it is working with the radTextBoxControl with only this:

Telerik.WinControls.RoundRectShape shape = new Telerik.WinControls.RoundRectShape();

shape.BottomLeftRounded = true;

shape.BottomRightRounded = true;

shape.TopLeftRounded = true;

shape.TopRightRounded = true;

shape.Radius = 22;

TB.TextBoxElement.Shape = shape;

where TB is a RadTextBoxControl.

If TB were just a radTextBox, it would not work, even if I used this:

Telerik.WinControls.RoundRectShape shape = new Telerik.WinControls.RoundRectShape();

shape.BottomLeftRounded = true;

shape.BottomRightRounded = true;

shape.TopLeftRounded = true;

shape.TopRightRounded = true;

shape.Radius = 22;

TB.TextBoxElement.Shape = shape;

Telerik.WinControls.RoundRectShape bordershape = new Telerik.WinControls.RoundRectShape();

bordershape.BottomLeftRounded = true;

bordershape.BottomRightRounded = true;

bordershape.TopLeftRounded = true;

bordershape.TopRightRounded = true;

bordershape.Radius = 22;

TB.TextBoxElement.Border.Shape = bordershape;

answered on 24 Jan 2015, 01:38 PM

round-shapes.png

Hi Trey,

Thank you for writing back.

The reason why my example might have not worked for you exactly the way it has been is because the radius which we need to set is related to the actual height of the element. This height is also related to the MinSize.Width which we set for the ArrowButton. In order for all this to work we need to move our logic in the Load event of the form and in the handler set the radius and minimum size according to the actual size of the DropDownButtonElement.

As for your other questions about RadTextBox, RadTextBoxControl and RadButton I managed to create a radius by simply creating a new RoundRectShape and assigning it as Shape property of each element. Please see my code snippet below:

public partial class Form1 : Form

{

public Form1()

{

InitializeComponent();

this.BackColor = Color.Yellow;

this.Load += Form1_Load;

}

private void Form1_Load(object sender, EventArgs e)

{

RoundRectShape actionButtonShape = new RoundRectShape();

actionButtonShape.BottomLeftRounded = true;

actionButtonShape.BottomRightRounded = false;

actionButtonShape.TopLeftRounded = true;

actionButtonShape.TopRightRounded = false;

actionButtonShape.Radius = this.radDropDownButton2.DropDownButtonElement.ActionButton.Size.Height / 2;

this.radDropDownButton2.DropDownButtonElement.ActionButton.Shape = actionButtonShape;

this.radDropDownButton2.DropDownButtonElement.ArrowButton.MinSize = new Size(this.radDropDownButton2.DropDownButtonElement.Size.Height, 0);

RoundRectShape arrowButtonShape = new RoundRectShape();

arrowButtonShape.BottomLeftRounded = false;

arrowButtonShape.BottomRightRounded = true;

arrowButtonShape.TopLeftRounded = false;

arrowButtonShape.TopRightRounded = true;

arrowButtonShape.Radius = this.radDropDownButton2.DropDownButtonElement.ArrowButton.Size.Height / 2;

this.radDropDownButton2.DropDownButtonElement.ArrowButton.Shape = arrowButtonShape;

RoundRectShape shape = new RoundRectShape();

shape.BottomLeftRounded = true;

shape.BottomRightRounded = true;

shape.TopLeftRounded = true;

shape.TopRightRounded = true;

shape.Radius = this.radDropDownButton2.DropDownButtonElement.BorderElement.Size.Height / 2;

this.radDropDownButton2.DropDownButtonElement.BorderElement.Shape = shape;

int radius = 7;

RoundRectShape newShape = new RoundRectShape();

newShape.BottomLeftRounded = true;

newShape.BottomRightRounded = true;

newShape.TopLeftRounded = true;

newShape.TopRightRounded = true;

newShape.Radius = radius;

this.radTextBoxControl1.TextBoxElement.Shape = newShape;

this.radTextBox1.TextBoxElement.Shape = newShape;

this.radButton1.ButtonElement.Shape = newShape;

}

I am also sending you a screenshot showing how the different controls look on my end.

I hope this helps. Should you have further questions please do not hesitate to write back.

Regards,
Hristo
Telerik

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

answered on 29 Jan 2015, 03:15 PM

896104.zip

dropdown-button-oval-shape.gif

Hello Trey,

Thank you for writing back.

It is very important that you set all the shape related properties after your element gets created - on Form.Load or a later event. If you are changing the dimension of the dropdown button from code on startup or during runtime or you are still experiencing issues, I can suggest that you subscribe your RadDropDownButton to the SizeChanged event and in the handler call the logic for creating oval shapes.

I have prepared a sample project implementing that approach, for testing purposes the RadDropDownButton Size is being changed every second, hence new shapes are being created and applied.

Besides my project I am also sending you a gif showing the result on my end. We would be happy to further investigate the behavior on your side, but please get back to us with additional information when your element gets created and when the shape logic is being applied.

I hope this information helps. Should you have further questions please do not hesitate to write back.

Regards,
Hristo Merdjanov
Telerik

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

answered on 30 Jan 2015, 04:58 PM

2015-01-30_1152.png

2015-01-30_1153.png

2015-01-30_1154.png

I added a new form to my existing project, added a radDropDownButton, added your code to the Form_Load event, and it is still not rendering properly. I included pictures of the control at run-time, my code, and the reference properties. Please help.

answered on 04 Feb 2015, 09:57 AM

oval-dropdown-button.png

896104.zip

Hi Trey,

Thank you for writing.

I am really sorry to hear that you are still experiencing problems with setting the oval shape of the RadDropDownButton element. Now I am converting this forum thread into a support ticket, this way you will be able to send us a project which we will investigate and provide you quickly with a working solution.

In my previous post I also suggested that you subscribe your button to the SizeChanged, it might help because the shapes would get updated every time when the event is fired. I am sending you again my example project, following your description and using your code I added a second form, then I moved all the logic for setting the oval shape in the Load event of the form. As I mentioned above it is working properly. Please modify my project or send a project of your own replicating the issue, so that we can investigate further. I am also sending you a screen shot showing how the button looks on my side.

Looking forward to hearing from you.

Regards,
Hristo Merdjanov
Telerik

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

answered on 22 Nov 2019, 11:06 AM

Hello Jiang,

I suppose that you set the BackColor property of the RadButton and you receive the result shown in the attached picture. In order to color the rounded button only, you need to set the BackColor of the ButtonFillElement. Here is an example:

radButton1.ButtonElement.Shape = new RoundRectShape(10);
radButton1.ButtonElement.ButtonFillElement.GradientStyle = GradientStyles.Solid;
radButton1.ButtonElement.ButtonFillElement.BackColor = Color.Red;

I hope this helps. Let me know if you have additional questions.

Regards,
Nadya
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting

Testing & Mocking

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

Remove square border around button with rounded edges

14 Answers, 1 is accepted