How to paint arc with path gradient using GDI+ (C#, WinForms)

Question

Here is the result I am trying to achieve:

enter image description here

It should be vector based to it can be scalable.

Here is my attempt to create this using PathGradientBrush:

public partial class Form1 : Form
{
    public Form1()
    {
        InitializeComponent();
    }

    double outerRadius = 120;
    double innerRadius = 110;
    PointF DistanceFromCenter(PointF center, double radius, double angle)        
    {
        double angleInRadians = angle * Math.PI / 180;
        return new PointF((float)(center.X + radius * (Math.Cos(angleInRadians))),
                          (float)(center.Y + radius * (Math.Sin(angleInRadians))));
    }
    protected override void OnPaint(PaintEventArgs e)
    {
        Graphics g = e.Graphics;
        GraphicsPath path = new GraphicsPath();
        Point centerPoint = new Point(this.Width / 2, this.Width / 2);
        path.AddLine(this.DistanceFromCenter(centerPoint, innerRadius, 0), this.DistanceFromCenter(centerPoint, outerRadius, 0));
        path.AddArc(new RectangleF(centerPoint.X - (float)outerRadius, centerPoint.Y - (float)outerRadius, (float)outerRadius * 2, (float)outerRadius * 2), 0, -180);
        path.AddLine(this.DistanceFromCenter(centerPoint, outerRadius, -180), this.DistanceFromCenter(centerPoint, innerRadius, -180));
        path.AddArc(new RectangleF(centerPoint.X - (float)innerRadius, centerPoint.Y - (float)innerRadius, (float)innerRadius * 2, (float)innerRadius * 2), (float)0, -(float)180);

        PathGradientBrush pthGrBrush = new PathGradientBrush(path);

        // Set the color at the center of the path to red.
        pthGrBrush.CenterColor = Color.FromArgb(255, 255, 0, 0);

        // Set the colors of the points in the array.
        Color[] colors = {
       Color.FromArgb(255, 0, 0, 0),
       Color.FromArgb(255, 0, 255, 0),
       Color.FromArgb(255, 0, 0, 255), 
       Color.FromArgb(255, 255, 255, 255),
       Color.FromArgb(255, 0, 0, 0),
       Color.FromArgb(255, 0, 255, 0),
       Color.FromArgb(255, 0, 0, 255),
       Color.FromArgb(255, 255, 255, 255),
       Color.FromArgb(255, 0, 0, 0),  
       Color.FromArgb(255, 0, 255, 0)};

        pthGrBrush.SurroundColors = colors;

        // Fill the path with the path gradient brush.
        g.FillPath(pthGrBrush, path);
    }
}

and here are the results I get:

enter image description here

Voting to close it! It is not a good way to get your softwares built. — Afzaal Ahmad Zeeshan, Aug 21 '14 at 10:22
Did you try anything? Question sounds like *hey give me code..*. Don't give us your requirements. Ask for a particular problem. — Sriram Sakthivel, Aug 21 '14 at 10:23
@AfzaalAhmadZeeshan please restrain your comments, if they are not useful to answer the question. I am the one deciding how to build my software. SriramSakthivel I tried everything from MSDN, however, all articles paint the gradient in a left to right manner, where I need it in an arc shape. — checho, Aug 21 '14 at 10:27
You're right, you are the one deciding to build it. But we're the one deciding what to do with the question. You have asked such a vague question, since you've not even tried anything. If you try to be more rude, your question would be closed. So try to explain it well what you want, _what you did_ and _what went wrong_, this part is even more important than the first part of the question. We want to know whether you even have a knowledge of programming or are a newbie. — Afzaal Ahmad Zeeshan, Aug 21 '14 at 10:31
The question is not vague at all, for people dealing with painting with GDI+. I am not being rude, you are the one barking on the question :). Thanks for the suggestions, will add the additional information. — checho, Aug 21 '14 at 10:39
"It should be vector based to it can be scalable." - Not possible with GDI/GDI+ - Why don't you try WPF? — Matthew Layton, Aug 21 '14 at 10:44
@checho, I dealt with painting with GDI+ and find the question a bit "vague", even if "vague" isn't the right word here because you explain exactly what you want. I'm guessing what the other users meant on the above comments is that the question implies that you made no effort. You should place some code, even if the result isn't at all what you are looking for — chiapa, Aug 21 '14 at 10:45
The answer to this question would be, no doubt, useful for many. Because of that I vote +1. — Jacob Seleznev, Aug 21 '14 at 10:49
this is very easy to do in WPF and it's vector base. unlike GDI (well unless you code it) — Franck, Aug 21 '14 at 10:51
Have you seen this? http://stackoverflow.com/questions/3519835/c-sharp-radial-gradient-brush-effect-in-gdi-and-winforms — Matthew Layton, Aug 21 '14 at 10:53
I have seen this but I need the gradient along the path, while this is left to right. In WPF it can be easily done (see here: http://stackoverflow.com/questions/4839666/creating-gradient-brush-along-a-circular-path), but i need it in WinForms. Will post code in a minute. — checho, Aug 21 '14 at 10:55
you can add a WPF usercontrol in a winform app no problem. the inverse is also possible. — Franck, Aug 21 '14 at 13:10
Thank you for the suggestion, but it is not feasible for my case. — checho, Aug 21 '14 at 13:35
@checho Not feasible and not wanting to do it are 2 different thing. So people reading this in future to not be mistaken it IS totally doable on ANY winform application. — Franck, Aug 21 '14 at 16:03

score 2 · Accepted Answer · answered Aug 26 '14 at 11:43

2

Here is how this can be achieved if someone is looking for this: link. Special thanks to Thorsten Gudera.

answered Aug 26 '14 at 11:43

checho

3,092
3
18
30

How to paint arc with path gradient using GDI+ (C#, WinForms)

1 Answers1