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

Remove square border around button with rounded edges

14 Answers 1724 Views
Buttons, RadioButton, CheckBox, etc
This is a migrated thread and some comments may be shown as answers.
Trey
Top achievements
Rank 2
Trey asked on 12 Jan 2015, 08:03 PM
I edited the UI element for a DropDownButton by setting the Shape of the RadDropDownButtonElement to roundRectShape1.  It is working just fine.  However, there is still a square border outside each corner as shown in the attached file.  How can I get rid of this?

14 Answers, 1 is accepted

Sort by
0
Hristo
Telerik team
answered on 15 Jan 2015, 03:00 PM
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.

 
0
Trey
Top achievements
Rank 2
answered on 21 Jan 2015, 02:45 PM
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)
0
Trey
Top achievements
Rank 2
answered on 21 Jan 2015, 03:18 PM
I copied and pasted your example exactly, and it is not working for me.

See attached:
0
Trey
Top achievements
Rank 2
answered on 21 Jan 2015, 04:40 PM
Any by the way, I know it is the wrong forum, but I am getting the same problem with radTextBoxes.
0
Trey
Top achievements
Rank 2
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;
0
Hristo
Telerik team
answered on 24 Jan 2015, 01:38 PM
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 RadTextBoxRadTextBoxControl 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.

 
0
Trey
Top achievements
Rank 2
answered on 26 Jan 2015, 04:36 PM
This had no effect.  The issue seems to be that changing the BottomLeftRounded, BottomRightRounded, TopLeftRounded, and TopRightRounded properties are not doing anything.
0
Trey
Top achievements
Rank 2
answered on 26 Jan 2015, 05:33 PM
I created a new project, and all the buttons and drop-down buttons are displaying perfectly.

On my existing project, however, it continues to give me problems.

Any ideas?
0
Hristo
Telerik team
answered on 29 Jan 2015, 03:15 PM
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.

 
0
Trey
Top achievements
Rank 2
answered on 30 Jan 2015, 04:58 PM
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.
0
Hristo
Telerik team
answered on 04 Feb 2015, 09:57 AM
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.

 
0
jiang
Top achievements
Rank 1
answered on 21 Nov 2019, 06:45 AM

Why is my effect like this?

 

0
Nadya | Tech Support Engineer
Telerik team
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.
0
jiang
Top achievements
Rank 1
answered on 25 Nov 2019, 03:50 AM

Hello, Nadya,

It is helpful, thanks for your answer.

Tags
Buttons, RadioButton, CheckBox, etc
Asked by
Trey
Top achievements
Rank 2
Answers by
Hristo
Telerik team
Trey
Top achievements
Rank 2
jiang
Top achievements
Rank 1
Nadya | Tech Support Engineer
Telerik team
Share this question
or