Draw an ellipse that sort of looks like a button in C#

example

This example uses two LinearGradientBrushes to draw an ellipse that has a sort of three-dimensional button-like appearance. The key is to outline the ellipse and then fill it with brushes whose gradients point in opposite directions.

The following code shows how this program draws its ellipse.

// Draw the button-like ellipse.
private void Form1_Paint(object sender, PaintEventArgs e)
{
    // Clear.
    e.Graphics.Clear(this.BackColor);
    e.Graphics.SmoothingMode = SmoothingMode.AntiAlias;

    // Get the area we will fill.
    Rectangle rect = new Rectangle(30, 30,
        this.ClientSize.Width - 60,
        this.ClientSize.Height - 60);

    // Fill the ellipse.
    using (LinearGradientBrush br =
        new LinearGradientBrush(rect,
            Color.Lime, Color.DarkGreen, 225f))
    {
        e.Graphics.FillEllipse(br, rect);
    }

    // Outline the ellipse.
    using (LinearGradientBrush br =
        new LinearGradientBrush(rect,
            Color.Lime, Color.DarkGreen, 45f))
    {
        using (Pen pen = new Pen(br, 20f))
        {
            // e.Graphics.DrawRectangle(Pens.Red, rect);
            rect.X += 10;
            rect.Y += 10;
            rect.Width -= 20;
            rect.Height -= 20;

            e.Graphics.DrawEllipse(pen, rect);
        }
    }
}

This code clears the Graphics object and makes it draw smoothly. It then defines a rectangle to hold the ellipse.

Next the code fills the ellipse with a brush that changes from lime to dark green in the direction of 225 degrees.

The program then creates a 20-pixel wide pen using a brush that flows from lime to dark green in the opposite direction (45 degrees).

If you were to use the pen to draw the ellipse at this point, the 20-pixel wide line would lie half inside and half outside of the ellipse. To make the outline lie completely within the ellipse it just filled, the program shifts the rectangle that defines the ellipse by half of the pen’s thickness. It also decreases the rectangle’s width and height by the pen’s thickness.

Finally the program outlines the adjusted ellipse with a brush that flows from lime to dark green in the opposite direction (45 degrees).


Download Example   Follow me on Twitter   RSS feed




This entry was posted in drawing, graphics and tagged , , , , , , , , , , , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *