Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Rounded edges in button C# (WinForms)

It's a rounded edges button

Hello, through some research around here and other sites, I've made a rounded edges button.

protected override void OnPaint(PaintEventArgs e)
{
    base.OnPaint(e);
    Rectangle Rect = new Rectangle(0, 0, this.Width, this.Height);
    GraphicsPath GraphPath = new GraphicsPath();
    GraphPath.AddArc(Rect.X, Rect.Y, 50, 50, 180, 90);
    GraphPath.AddArc(Rect.X + Rect.Width - 50, Rect.Y, 50, 50, 270, 90);
    GraphPath.AddArc(Rect.X + Rect.Width - 50, Rect.Y + Rect.Height - 50, 50, 50, 0, 90);
    GraphPath.AddArc(Rect.X, Rect.Y + Rect.Height - 50, 50, 50, 90, 90);
    this.Region = new Region(GraphPath);
}

The problem I'm facing is the button's "blue highlight": It shows on most of the button, but it doesn't show on the rounded edges, so my button is part highlighted and part non-highlighted (on the edges). What could I do to solve this? Thank you.

PS: I can't use WPF. The application is for an very old computer; so, please, don't suggest it. Also, the client doesn't have the money to get a newer computer.

like image 796
soulblazer Avatar asked Feb 12 '15 19:02

soulblazer


People also ask

How do I make rounded corners on a button in CSS?

To make the div's borders rounded, you could add the following styling: border-radius: 15px; The above sets a 15 pixel radius on the top-left, top-right, bottom-left and bottom-right corners of the element. The higher the value of the radius, the more rounded the edge becomes.

How do you set a button shape?

We can set custom shapes on our button using the xml tag <shape> . These xml files are created in the drawable folder too. shape can be used inside selectors . The shape can be set to rectangle (default), oval , ring , line .


2 Answers

This is a quick one, you may want to fine tune things and optimize quite a few details..

class RoundedButton : Button
{
   GraphicsPath GetRoundPath(RectangleF Rect, int radius)
   {
      float r2 = radius / 2f;
      GraphicsPath GraphPath = new GraphicsPath();
      GraphPath.AddArc(Rect.X, Rect.Y, radius, radius, 180, 90);
      GraphPath.AddLine(Rect.X + r2, Rect.Y, Rect.Width - r2, Rect.Y);
      GraphPath.AddArc(Rect.X + Rect.Width - radius, Rect.Y, radius, radius, 270, 90);
      GraphPath.AddLine(Rect.Width, Rect.Y + r2, Rect.Width, Rect.Height - r2);
      GraphPath.AddArc(Rect.X + Rect.Width - radius, 
                       Rect.Y + Rect.Height - radius, radius, radius, 0, 90);
      GraphPath.AddLine(Rect.Width - r2, Rect.Height, Rect.X + r2, Rect.Height);
      GraphPath.AddArc(Rect.X, Rect.Y + Rect.Height - radius, radius, radius, 90, 90);
      GraphPath.AddLine(Rect.X, Rect.Height - r2, Rect.X, Rect.Y + r2);
      GraphPath.CloseFigure();
      return GraphPath;
   }

   protected override void OnPaint(PaintEventArgs e)
   {
      base.OnPaint(e);
      RectangleF Rect = new RectangleF(0, 0, this.Width, this.Height);
      using (GraphicsPath GraphPath = GetRoundPath(Rect, 50))
      {
        this.Region = new Region(GraphPath);
        using (Pen pen = new Pen(Color.CadetBlue, 1.75f))
        {
            pen.Alignment = PenAlignment.Inset;
            e.Graphics.DrawPath(pen, GraphPath);
        }
      }
   }
}

Obviously, since we have a class we can cache the GraphicsPath in a class variable. And of course you pick the color..

enter image description here

like image 143
TaW Avatar answered Sep 29 '22 15:09

TaW


This is a tweak on TaW's answer to more easily tweak the borderRadius and borderThickness. If you get random white space between the border and the button background color, m needs to be tweaked.

public class RoundedButton : Button
{
  GraphicsPath GetRoundPath(RectangleF Rect, int radius)
  {
    float m = 2.75F;
    float r2 = radius / 2f;
    GraphicsPath GraphPath = new GraphicsPath();

    GraphPath.AddArc(Rect.X + m, Rect.Y + m, radius, radius, 180, 90);
    GraphPath.AddLine(Rect.X + r2 + m, Rect.Y + m, Rect.Width - r2 - m, Rect.Y + m);
    GraphPath.AddArc(Rect.X + Rect.Width - radius - m, Rect.Y + m, radius, radius, 270, 90);
    GraphPath.AddLine(Rect.Width - m, Rect.Y + r2, Rect.Width - m, Rect.Height - r2 - m);
    GraphPath.AddArc(Rect.X + Rect.Width - radius - m,
                   Rect.Y + Rect.Height - radius - m, radius, radius, 0, 90);
    GraphPath.AddLine(Rect.Width - r2 - m, Rect.Height - m, Rect.X + r2 - m, Rect.Height - m);
    GraphPath.AddArc(Rect.X + m, Rect.Y + Rect.Height - radius - m, radius, radius, 90, 90);
    GraphPath.AddLine(Rect.X + m, Rect.Height - r2 - m, Rect.X + m, Rect.Y + r2 + m);

    GraphPath.CloseFigure();
    return GraphPath;
  }

  protected override void OnPaint(PaintEventArgs e)
  {
    int borderRadius = 50;
    float borderThickness = 1.75f;
    base.OnPaint(e);
    RectangleF Rect = new RectangleF(0, 0, this.Width, this.Height);
    GraphicsPath GraphPath = GetRoundPath(Rect, borderRadius);

    this.Region = new Region(GraphPath);
    using (Pen pen = new Pen(Color.Silver, borderThickness))
    {
      pen.Alignment = PenAlignment.Inset;
      e.Graphics.DrawPath(pen, GraphPath);
    }
  }
}

Cheers!

like image 23
Daniel Lord Avatar answered Sep 29 '22 16:09

Daniel Lord