Remove square border around button with rounded edges

12 posts, 0 answers
  1. Trey
    Trey avatar
    35 posts
    Member since:
    Dec 2006

    Posted 12 Jan 2015 Link to this post

    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?
  2. Hristo
    Admin
    Hristo avatar
    716 posts

    Posted 15 Jan 2015 Link to this post

    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.

     
  3. UI for WinForms is Visual Studio 2017 Ready
  4. Trey
    Trey avatar
    35 posts
    Member since:
    Dec 2006

    Posted 21 Jan 2015 in reply to Hristo Link to this post

    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)
  5. Trey
    Trey avatar
    35 posts
    Member since:
    Dec 2006

    Posted 21 Jan 2015 in reply to Hristo Link to this post

    I copied and pasted your example exactly, and it is not working for me.

    See attached:
  6. Trey
    Trey avatar
    35 posts
    Member since:
    Dec 2006

    Posted 21 Jan 2015 Link to this post

    Any by the way, I know it is the wrong forum, but I am getting the same problem with radTextBoxes.
  7. Trey
    Trey avatar
    35 posts
    Member since:
    Dec 2006

    Posted 21 Jan 2015 in reply to Trey Link to this post

    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;
  8. Hristo
    Admin
    Hristo avatar
    716 posts

    Posted 24 Jan 2015 Link to this post

    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.

     
  9. Trey
    Trey avatar
    35 posts
    Member since:
    Dec 2006

    Posted 26 Jan 2015 in reply to Hristo Link to this post

    This had no effect.  The issue seems to be that changing the BottomLeftRounded, BottomRightRounded, TopLeftRounded, and TopRightRounded properties are not doing anything.
  10. Trey
    Trey avatar
    35 posts
    Member since:
    Dec 2006

    Posted 26 Jan 2015 Link to this post

    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?
  11. Hristo
    Admin
    Hristo avatar
    716 posts

    Posted 29 Jan 2015 Link to this post

    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.

     
  12. Trey
    Trey avatar
    35 posts
    Member since:
    Dec 2006

    Posted 30 Jan 2015 in reply to Hristo Link to this post

    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.
  13. Hristo
    Admin
    Hristo avatar
    716 posts

    Posted 04 Feb 2015 Link to this post

    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.

     
Back to Top
UI for WinForms is Visual Studio 2017 Ready