Show Transparent Loading Spinner above other Controls

Question

I am working in a spinner control. I want the control to support transparent backcolor. When the arc is drawn, there is a blank space in the middle, I want that space to be truly transparent, so that I could put another control behind it and it would not be covered by the spinner.

I tried overriding the CreateParams void.
Also I set the style to support TransparentColor.
Tried overriding OnPaintBackground void, but I cannot achieve the real transparent backcolor.

So, what can you suggest me to do?

Answer 1

Modification from CrApHeR's code to add Designer Properties

How to use

Add this class to your project

using System;
using System.ComponentModel;
using System.Drawing;
using System.Drawing.Drawing2D;
using System.Linq;
using System.Windows.Forms;

[DesignerCategory("Code")]
public class Spinner : Control
{
    private int next = 0;
    private Timer timer = new Timer();

    public Spinner()
    {
        SetStyle(ControlStyles.UserPaint, true);
        SetStyle(ControlStyles.ResizeRedraw, true);
        SetStyle(ControlStyles.AllPaintingInWmPaint, true);
        SetStyle(ControlStyles.OptimizedDoubleBuffer, true);
        SetStyle(ControlStyles.SupportsTransparentBackColor, true);

        Size = new Size(100, 100);
        BackColor = Color.Transparent;

        timer.Tick += (s, e) => Invalidate();
        if (!DesignMode)
        {
            timer.Enabled = true;
        }
    }

    [Browsable(true)]
    [Category("Appearance")]
    public int NodeCount { get; set; } = 8;

    [Browsable(true)]
    [Category("Appearance")]
    public int NodeRadius { get; set; } = 4;

    [Browsable(true)]
    [Category("Appearance")]
    public float NodeResizeRatio { get; set; } = 1.0f;

    [Browsable(true)]
    [Category("Appearance")]
    public Color NodeFillColor { get; set; } = Color.Black;

    [Browsable(true)]
    [Category("Appearance")]
    public Color NodeBorderColor { get; set; } = Color.White;

    [Browsable(true)]
    [Category("Appearance")]
    public int NodeBorderSize { get; set; } = 2;

    [Browsable(true)]
    [Category("Appearance")]
    public int SpinnerRadius { get; set; } = 100;

    protected override void OnPaint(PaintEventArgs e)
    {
        if (null != Parent && (BackColor.A != 255 || BackColor == Color.Transparent))
        {
            using (Bitmap bmp = new Bitmap(Parent.Width, Parent.Height))
            {
                foreach (Control control in GetIntersectingControls(Parent))
                {
                    control.DrawToBitmap(bmp, control.Bounds);
                }

                e.Graphics.DrawImage(bmp, -Left, -Top);

                if (BackColor != Color.Transparent)
                {
                    using (Brush brush = new SolidBrush(BackColor))
                    {
                        e.Graphics.FillRectangle(brush, 0, 0, Width, Height);
                    }
                }
            }
        }

        e.Graphics.SmoothingMode = SmoothingMode.HighQuality;

        PointF center = new PointF(Width / 2, Height / 2);
        int bigRadius = (int)(SpinnerRadius / 2 - NodeRadius - (NodeCount - 1) * NodeResizeRatio);
        float unitAngle = 360 / NodeCount;

        if (!DesignMode)
        {
            next++;
        }

        next = next >= NodeCount ? 0 : next;

        for (int i = next, a = 0; i < next + NodeCount; i++, a++)
        {
            int factor = i % NodeCount;
            float c1X = center.X + (float)(bigRadius * Math.Cos(unitAngle * factor * Math.PI / 180));
            float c1Y = center.Y + (float)(bigRadius * Math.Sin(unitAngle * factor * Math.PI / 180));
            int currRad = (int)(NodeRadius + a * NodeResizeRatio);
            PointF c1 = new PointF(c1X - currRad, c1Y - currRad);

            using (Brush brush = new SolidBrush(NodeFillColor))
            {
                e.Graphics.FillEllipse(brush, c1.X, c1.Y, 2 * currRad, 2 * currRad);
            }

            using (Pen pen = new Pen(Color.White, NodeBorderSize))
            {
                e.Graphics.DrawEllipse(pen, c1.X, c1.Y, 2 * currRad, 2 * currRad);
            }
        }
    }

    protected override void OnVisibleChanged(EventArgs e)
    {
        timer.Enabled = Visible;
        base.OnVisibleChanged(e);
    }

    private IOrderedEnumerable<Control> GetIntersectingControls(Control parent)
    {
        return parent.Controls.Cast<Control>()
            .Where(c => parent.Controls.GetChildIndex(c) > parent.Controls.GetChildIndex(this))
            .Where(c => c.Bounds.IntersectsWith(Bounds))
            .OrderByDescending(c => parent.Controls.GetChildIndex(c));
    }
}

Drag the Spinner control from the Toolbox to your Form

Alternatively, you can add it at runtime with this code

Spinner spinner = new Spinner();
spinner.Location = new Point(50, 50);
Controls.Add(spinner);

Then, you can change its properties from the Designer Properties category Appearance

The main properties you may want to customize are:

• NodeCount (default: 8)
• NodeRadius (default: 4)
• NodeResizeRatio (default: 1.0f)
• NodeFillColor (default: Black)
• NodeBorderColor (default: White)
• NodeBorderSize (default: 2)
• SpinnerRadius (default: 100)
• BackColor (default: Transparent) (supports alpha transparency)

  BackColor = Color.FromArgb(50, Color.Blue.R, Color.Blue.G, Color.Blue.B))
  

Answer 2

To make a transparent layer, you should override painting of the control and draw the control in this order, First draw all controls in the same container which are under your control (based on z-index) on a bitmap. Then draw that bitmap on graphics of your control. At last draw content of your control. Also the BackColor of your control should be Color.Transparent.

Also as another option to make transparent layer, you can exclude some regions from your control when drawing.

In the following samples I used the first technique and created 2 controls. A spinning circles transparent control. and a transparent picturebox control.

In both samples I used a delay between loading rows to showing a spinner make sense.

Sample 1 - Using a SpinningCircles Control

SpinningCircles control draws circles and supports transparency. The control doesn't animate at design-time, but it animates at run-time. Also it doesn't consume resources when it is not visible.

Sample 2 - Using a TransparentPictureBox Control and a transparent animated gif TransparentPictureBox control supports transparency, so I used an animated gif as its image and as you can see, the gif is showing correctly.

Sample 1 Code - SpinningCircles

using System;
using System.Drawing;
using System.Drawing.Drawing2D;
using System.Linq;
using System.Windows.Forms;
public class SpinningCircles : Control
{
    int increment = 1;
    int radius = 4;
    int n = 8;
    int next = 0;
    Timer timer;
    public SpinningCircles()
    {
        timer = new Timer();
        this.Size = new Size(100, 100);
        timer.Tick += (s, e) => this.Invalidate();
        if (!DesignMode)
            timer.Enabled = true;
        SetStyle(ControlStyles.AllPaintingInWmPaint |
                 ControlStyles.OptimizedDoubleBuffer |
                 ControlStyles.ResizeRedraw | ControlStyles.UserPaint |
                 ControlStyles.SupportsTransparentBackColor, true);
        BackColor = Color.Transparent;
    }
    protected override void OnPaint(PaintEventArgs e)
    {
        if (Parent != null && this.BackColor == Color.Transparent)
        {
            using (var bmp = new Bitmap(Parent.Width, Parent.Height))
            {
                Parent.Controls.Cast<Control>()
                      .Where(c => Parent.Controls.GetChildIndex(c) > Parent.Controls.GetChildIndex(this))
                      .Where(c => c.Bounds.IntersectsWith(this.Bounds))
                      .OrderByDescending(c => Parent.Controls.GetChildIndex(c))
                      .ToList()
                      .ForEach(c => c.DrawToBitmap(bmp, c.Bounds));

                e.Graphics.DrawImage(bmp, -Left, -Top);
            }
        }
        e.Graphics.SmoothingMode = SmoothingMode.HighQuality;
        int length = Math.Min(Width, Height);
        PointF center = new PointF(length / 2, length / 2);
        int bigRadius = length / 2 - radius - (n - 1) * increment;
        float unitAngle = 360 / n;
        if (!DesignMode)
            next++;
        next = next >= n ? 0 : next;
        int a = 0;
        for (int i = next; i < next + n; i++)
        {
            int factor = i % n;
            float c1X = center.X + (float)(bigRadius * Math.Cos(unitAngle * factor * Math.PI / 180));
            float c1Y = center.Y + (float)(bigRadius * Math.Sin(unitAngle * factor * Math.PI / 180));
            int currRad = radius + a * increment;
            PointF c1 = new PointF(c1X - currRad, c1Y - currRad);
            e.Graphics.FillEllipse(Brushes.Black, c1.X, c1.Y, 2 * currRad, 2 * currRad);
            using (Pen pen = new Pen(Color.White, 2))
                e.Graphics.DrawEllipse(pen, c1.X, c1.Y, 2 * currRad, 2 * currRad);
            a++;
        }
    }
    protected override void OnVisibleChanged(EventArgs e)
    {
        timer.Enabled = Visible;
        base.OnVisibleChanged(e);
    }
}

Sample 2 Code - TransparentPictureBox Code

using System;
using System.Drawing;
using System.Drawing.Drawing2D;
using System.Linq;
using System.Windows.Forms;
class TransparentPictureBox : PictureBox
{
    public TransparentPictureBox()
    {
        this.BackColor = Color.Transparent;
    }
    protected override void OnPaint(PaintEventArgs e)
    {
        if (Parent != null && this.BackColor == Color.Transparent)
        {
            using (var bmp = new Bitmap(Parent.Width, Parent.Height))
            {
                Parent.Controls.Cast<Control>()
                      .Where(c => Parent.Controls.GetChildIndex(c) > Parent.Controls.GetChildIndex(this))
                      .Where(c => c.Bounds.IntersectsWith(this.Bounds))
                      .OrderByDescending(c => Parent.Controls.GetChildIndex(c))
                      .ToList()
                      .ForEach(c => c.DrawToBitmap(bmp, c.Bounds));

                e.Graphics.DrawImage(bmp, -Left, -Top);
            }
        }
        base.OnPaint(e);
    }
}

Answer 3

I slightly changed Reza's code (SpinningCircles) to add a semi-transparent background. I wanted to share it with you. (NOTE: The spinner length was fixed to 100 and should be added as a component property)

public partial class WorkingPanel : UserControl
{
    #region Constants
    private static readonly Int32 kSpinnerLength = 100;
    #endregion

    #region Fields
    private Int32 increment = 1;
    private Int32 radius = 4;
    private Int32 n = 8;
    private Int32 next = 0;
    private Timer timer = null;
    #endregion

    #region Constructor
    public WorkingPanel()
    {
        this.Size = new Size(100, 100);

        timer = new Timer();
        timer.Tick += (s, e) => this.Invalidate();

        if (!DesignMode)
            timer.Enabled = true;

        SetStyle(ControlStyles.AllPaintingInWmPaint |
                 ControlStyles.OptimizedDoubleBuffer |
                 ControlStyles.ResizeRedraw | ControlStyles.UserPaint |
                 ControlStyles.SupportsTransparentBackColor, true);

        BackColor = Color.Transparent;
    }
    #endregion

    #region Methods (Protected - Override)
    protected override void OnPaint(PaintEventArgs e)
    {
        if (null != Parent && (this.BackColor.A != 255 || this.BackColor == Color.Transparent))
        {
            using (var bmp = new Bitmap(Parent.Width, Parent.Height))
            {
                Parent.Controls.Cast<Control>()
                      .Where(c => Parent.Controls.GetChildIndex(c) > Parent.Controls.GetChildIndex(this))
                      .Where(c => c.Bounds.IntersectsWith(this.Bounds))
                      .OrderByDescending(c => Parent.Controls.GetChildIndex(c))
                      .ToList()
                      .ForEach(c => c.DrawToBitmap(bmp, c.Bounds));

                e.Graphics.DrawImage(bmp, -Left, -Top);

                if (this.BackColor != Color.Transparent)
                    e.Graphics.FillRectangle(new SolidBrush(this.BackColor), new Rectangle(0, 0, Width, Height));
            }
        }

        e.Graphics.SmoothingMode = SmoothingMode.HighQuality;

        Int32 length = kSpinnerLength;
        PointF center = new PointF(Width / 2, Height / 2);
        Int32 bigRadius = length / 2 - radius - (n - 1) * increment;
        float unitAngle = 360 / n;

        if (!DesignMode)
            next++;

        next = next >= n ? 0 : next;
        Int32 a = 0;
        for (Int32 i = next; i < next + n; i++)
        {
            Int32 factor = i % n;
            float c1X = center.X + (float)(bigRadius * Math.Cos(unitAngle * factor * Math.PI / 180));
            float c1Y = center.Y + (float)(bigRadius * Math.Sin(unitAngle * factor * Math.PI / 180));
            Int32 currRad = radius + a * increment;
            PointF c1 = new PointF(c1X - currRad, c1Y - currRad);

            e.Graphics.FillEllipse(Brushes.White, c1.X, c1.Y, 2 * currRad, 2 * currRad);

            using (Pen pen = new Pen(Color.White, 2))
                e.Graphics.DrawEllipse(pen, c1.X, c1.Y, 2 * currRad, 2 * currRad);

            a++;
        }
    }

    protected override void OnVisibleChanged(EventArgs e)
    {
        timer.Enabled = Visible;

        base.OnVisibleChanged(e);
    }
    #endregion
}