title: draw step indicator as custom controll
body: <p>I'm trying to create step indicator control that will show on which step user currently is.
  I found on dribble some concept that I would like to create:</p>
  <p><img src="https://i.stack.imgur.com/bcBbQ.png" alt="dessign" /></p>
  <p>using very simple code I was able to create result like this:
  <img src="https://i.stack.imgur.com/8KEAM.png" alt="my result" /></p>
  <p>below is my code:</p>
  <pre><code>using System.Drawing;
  using System.Drawing.Drawing2D;
  using System.Windows.Forms;
  
  namespace StepIndicator
  {
      public class StepIndicatorOne : Control
      {
          public StepIndicatorOne()
          {
              MinimumSize = new Size(300, 50);
              SetStyle(ControlStyles.DoubleBuffer, true);
              SetStyle(ControlStyles.AllPaintingInWmPaint, true);
              SetStyle(ControlStyles.UserPaint, true);
              SetStyle(ControlStyles.ResizeRedraw, true);
          }
  
          protected override void OnPaint(PaintEventArgs e)
          {
              base.OnPaint(e);
  
              var g = e.Graphics;
              g.SmoothingMode = SmoothingMode.AntiAlias;
  
              int steps = 3;
              int radiusBig = 20;
              int radiusSmall = 15;
              int bgHeight = 10;
  
              var gradientRect = new Rectangle(ClientRectangle.X + (ClientRectangle.Width - radiusBig*2)/(steps - 1),
                                               ClientRectangle.Y + ClientRectangle.Height/2 - radiusBig - 1, radiusBig*2, radiusBig*2);
  
              var lightGrayBrush = new LinearGradientBrush(ClientRectangle, Color.FromArgb(224, 227, 214), Color.LightGray, LinearGradientMode.Vertical);
              var darkGrayBrush = new LinearGradientBrush(gradientRect, Color.DarkGray, Color.Gray, LinearGradientMode.Vertical);
              var lightGreenBrush = new LinearGradientBrush(ClientRectangle, Color.FromArgb(206, 217, 79), Color.FromArgb(191, 201, 82), LinearGradientMode.Vertical);
              var darkGreenBrush = new LinearGradientBrush(ClientRectangle, Color.YellowGreen, Color.ForestGreen, LinearGradientMode.Vertical);
  
              g.FillRectangle(darkGrayBrush, ClientRectangle.X + radiusBig, ClientRectangle.Y + ClientRectangle.Height/2 - bgHeight/2 - 1,
                              ClientRectangle.Width - radiusBig*2, bgHeight);
  
              g.FillRectangle(lightGrayBrush, ClientRectangle.X + radiusBig, ClientRectangle.Y + ClientRectangle.Height/2 - bgHeight/2,
                              ClientRectangle.Width - radiusBig*2, bgHeight);
  
              for (int i = 1; i &lt;= steps; i++)
              {
                  g.FillEllipse(darkGrayBrush, ClientRectangle.X + ((ClientRectangle.Width - radiusBig*2)/(steps - 1))*(i - 1),
                                ClientRectangle.Y + ClientRectangle.Height/2 - radiusBig - 1, radiusBig*2, radiusBig*2);
                  g.FillEllipse(lightGrayBrush, ClientRectangle.X + ((ClientRectangle.Width - radiusBig*2)/(steps - 1))*(i - 1),
                                ClientRectangle.Y + ClientRectangle.Height/2 - radiusBig, radiusBig*2, radiusBig*2);
              }
  
              for (int i = 1; i &lt;= steps - 1; i++)
              {
                  g.FillEllipse(darkGreenBrush,
                                ClientRectangle.X + ((ClientRectangle.Width - radiusBig*2)/(steps - 1))*(i - 1) + radiusBig - radiusSmall,
                                ClientRectangle.Y + ClientRectangle.Height/2 - radiusSmall - 1, radiusSmall*2, radiusSmall*2);
                  g.FillEllipse(lightGreenBrush,
                                ClientRectangle.X + ((ClientRectangle.Width - radiusBig*2)/(steps - 1))*(i - 1) + radiusBig - radiusSmall,
                                ClientRectangle.Y + ClientRectangle.Height/2 - radiusSmall, radiusSmall*2, radiusSmall*2);
              }
  
          }
      }
  }
  </code></pre>
  <p>My questions are:<br>
  <strong>Is it possible to create green shape as on design (green bar with circles and hole in one) but with border over it?</strong><br>
  I can draw rectangle with border and ellipse above it with border, but how can I combine those two shapes and have border around it (combine those two shapes into one) - is my only option creating complex path?</p>
  <p>I know that winforms gdi+ can't use inner shadow, <strong>but are there some other options to create nice looking effect simillar to inner glow?</strong><br>
  Right now I draw same shape with -1 offset and darker color, but effect isn't what I would like it to look.</p>
  <p>I know that propably the best solution would be to switch to WPF and draw it there, I even found sample control on SO - <a href="https://stackoverflow.com/questions/7691386/implementing-a-wizard-progress-control-in-wpf">Implementing a wizard progress control in WPF</a> but I <strong>must stay</strong> in Winforms</p>