Click here to Skip to main content
15,868,164 members
Articles / Desktop Programming / Windows Forms
Tip/Trick

How To Create Rounded Edge Button (or rounded corner button) in Winforms

Rate me:
Please Sign up or sign in to vote.
4.36/5 (12 votes)
8 Apr 2015CPOL2 min read 95.4K   2.8K   13   10
How to create rounded edge button (rounded corner button) in Winforms

Introduction

This tip gives an overview to modify existing button control in Winforms to achieve rounded edge Button Control (or rounded corner button control).

Background

Recently, I came across a requirement which asked for rounded edge button (or rounded corner button). I know WinForms is almost outdated and this feature can be achieved very easily in WPF. This tip is written for any programmer who is struggling to get this requirement done.

Image 1

Final Output

Using the Code

The basic idea of getting this done is to inherit button control to a class ButtonModified and override OnPaint to obtain our requirement.

The first thing is to set the button's FlatStyle as "Flat" from constructor. We can also set the common properties which we use throughout our project like Font, BorderSize, etc. This can also be modified individually from the forms which we refer this.

C#
//the modified button class looks like this

 class ButtonModified : System.Windows.Forms.Button
    {
        //we can use this to modify the color of the border 
        public Color BorderColor = Color.LightGray;
        //we can use this to modify the border size
        public int BorderSize = 5;
        public ButtonModified()
        {
            FlatStyle = FlatStyle.Flat;
            BackColor = Color.White;
            FlatAppearance.BorderColor = BorderColor;
            FlatAppearance.BorderSize = BorderSize;
            Font = new System.Drawing.Font("VAGRounded-Light", 
            30F, System.Drawing.FontStyle.Regular, System.Drawing.GraphicsUnit.Pixel, ((byte)(0)));
            ForeColor = System.Drawing.Color.FromArgb(((int)(((byte)(84)))), 
            		((int)(((byte)(33)))), ((int)(((byte)(107)))));
            
            this.MouseDown += new MouseEventHandler(ButtonLastest_MouseDown);
            this.MouseUp += new MouseEventHandler(ButtonLastest_MouseUp);     
        }

        void ButtonLastest_MouseUp(object sender, MouseEventArgs e)
        {
            ForeColor = System.Drawing.Color.FromArgb(((int)(((byte)(84)))), 
            			((int)(((byte)(33)))), ((int)(((byte)(107)))));
            BackColor = Color.White;
        }

        void ButtonLastest_MouseDown(object sender, MouseEventArgs e)
        {
            BackColor = System.Drawing.Color.FromArgb(((int)(((byte)(84)))), 
            			((int)(((byte)(33)))), ((int)(((byte)(107)))));
            ForeColor = System.Drawing.Color.White;
           
        }
         int top ; 
         int left;
         int right ;
         int bottom;        

        protected override void OnPaint(PaintEventArgs pevent)
        {
            // to draw the control using base OnPaint
            base.OnPaint(pevent);
            //to modify the corner radius
            int CornerRadius = 18;
            
            Pen DrawPen = new Pen(BorderColor);
            GraphicsPath gfxPath_mod = new GraphicsPath();

            top = 0;
            left = 0;
            right = Width;
            bottom = Height;
           
            gfxPath_mod.AddArc(left, top, CornerRadius, CornerRadius, 180, 90);
            gfxPath_mod.AddArc(right - CornerRadius, top, CornerRadius, CornerRadius, 270, 90);
            gfxPath_mod.AddArc(right - CornerRadius, bottom - CornerRadius, 
				CornerRadius, CornerRadius, 0, 90);
            gfxPath_mod.AddArc(left, bottom - CornerRadius, CornerRadius, CornerRadius, 90, 90);

            gfxPath_mod.CloseAllFigures();

            pevent.Graphics.DrawPath(DrawPen, gfxPath_mod);           

            int inside = 1;

            Pen newPen = new Pen(BorderColor, BorderSize);
            GraphicsPath gfxPath = new GraphicsPath();
            gfxPath.AddArc(left + inside + 1, top + inside, CornerRadius, CornerRadius, 180, 100);

            gfxPath.AddArc(right - CornerRadius - inside - 2, 
            	top + inside, CornerRadius, CornerRadius, 270, 90);
            gfxPath.AddArc(right - CornerRadius - inside - 2, 
            	bottom - CornerRadius - inside - 1, CornerRadius, CornerRadius, 0, 90);

            gfxPath.AddArc(left + inside + 1, 
            bottom - CornerRadius - inside, CornerRadius, CornerRadius, 95, 95);
            pevent.Graphics.DrawPath(newPen, gfxPath);

            this.Region = new System.Drawing.Region(gfxPath_mod);
        }
    }

Now we have two approaches.

Easier Approach

The easier way is to first build your solution and the button will be available in your toolbar which you can use like normal button control.

Image 2

Approach Two to Modify Existing Buttons Already Aligned and Placed In Project

We all know that normal buttons when placed in winform by dragging and dropping will generate a designer class. We can easily modify our designer class as explained below. To modify the existing buttons in our project:

C#
 //Auto Generated Designer When We Drag and Drop Button 
  Partial Class Buttontype
    {      
        Private System.ComponentModel.IContainer Components = Null;
        
        Protected Override Void Dispose(bool Disposing)
        {
            if (Disposing && (Components != null))
            {
                components.Dispose();
            }
            base.Dispose(disposing);
        }

        #Region Windows Form Designer Generated Code

        Private Void Initializecomponent()
        {
            this.btn_Next = new System.Windows.Forms.Button();

            this.SuspendLayout();
  
            // 
            // Btn_next
            // 
            this.btn_Next.BackColor = System.Drawing.Color.White;
            this.btn_Next.BackgroundImageLayout = System.Windows.Forms.ImageLayout.Stretch;
            this.btn_Next.FlatStyle = System.Windows.Forms.FlatStyle.Flat;
            this.btn_Next.Font = New System.Drawing.Font("Verdana", 20.25F, 
            System.Drawing.FontStyle.Regular, System.Drawing.GraphicsUnit.Point, ((Byte)(0)));
            this.btn_Next.ForeColor = System.Drawing.Color.FromArgb(((int)(((byte)(84)))), 
            		((Int)(((byte)(33)))), ((Int)(((byte)(107)))));
            this.btn_Next.Location = New System.Drawing.Point(244, 204);
            this.btn_Next.Name = "Btn_next";
            this.btn_Next.Size = New System.Drawing.Size(234, 94);
            this.btn_Next.TabIndex = 63;
            this.btn_Next.Text = "Next";
            this.btn_Next.UseCompatibleTextRendering = True;
            this.btn_Next.UseVisualStyleBackColor = False;
            // 
            // Buttontype
            // 
            this.AutoScaleDimensions = New System.Drawing.SizeF(6F, 13F);
            this.AutoScaleMode = System.Windows.Forms.AutoScaleMode.Font;
            this.ClientSize = New System.Drawing.Size(778, 374);
            this.Controls.Add(this.btn_Next);

            this.Name = "Buttontype";
            this.Text = "Aint";
            this.ResumeLayout(false);
        }

        #Endregion

        Public System.Windows.Forms.Button Btn_next;
    }

See the bolded portion of the code:

C#
this.btn_Next = new System.Windows.Forms.Button();

This needs to be replaced as:

C#
this.btn_Next = new ButtonDemo.ButtonModified();

This will update your designer once you rebuild the solution.

The method is depicted here so as to modify any existing project easily without any hassles, i.e., you wouldn't need to align your existing button or modify the font, etc. Use this only if your requirement is just to round off your existing Buttons which were previously aligned and set.

Points of Interest

This is just a method which I came up with. If someone comes up with a better solution, it can be posted here so that it can be a reference to anyone who needs this in the future.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
United States United States
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
QuestionMessy and not perfect corners.... Pin
joshuasailor11-Apr-16 14:57
joshuasailor11-Apr-16 14:57 
GeneralOkay article, needs more code Pin
jediYL18-Apr-15 16:26
professionaljediYL18-Apr-15 16:26 
AnswerRe: Okay article, needs more code Pin
basilke700719-Apr-15 21:12
basilke700719-Apr-15 21:12 
Thanks for pointing it out. Smile | :)

FillPath is not needed,we are setting background color to handle it.
Fill color is not needed any more,I have updated the document.
Will be reflecting once it get approved.
Generalnice Pin
BillW339-Apr-15 8:52
professionalBillW339-Apr-15 8:52 
GeneralRe: nice Pin
basilke70079-Apr-15 11:03
basilke70079-Apr-15 11:03 
BugUnnecessary casting Pin
Ravi Bhavnani9-Apr-15 4:19
professionalRavi Bhavnani9-Apr-15 4:19 
GeneralRe: Unnecessary casting Pin
basilke70079-Apr-15 10:57
basilke70079-Apr-15 10:57 
QuestionImages Pin
N. Henrik Lauridsen9-Apr-15 2:42
N. Henrik Lauridsen9-Apr-15 2:42 
AnswerRe: Images Pin
basilke70079-Apr-15 3:19
basilke70079-Apr-15 3:19 
GeneralRe: Images Pin
N. Henrik Lauridsen9-Apr-15 5:01
N. Henrik Lauridsen9-Apr-15 5:01 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.