Custom control in a UserControl does not render correctly

Question

In this picture... ... you can see next to each "Line Color" label there is a colored circle.

The colored circle is, in my project, a Swatch. Here is the entire code file for Swatch:

public class Swatch : System.Windows.Forms.Panel
{
    /*private int _Radius = 20;

    [System.ComponentModel.Category("Layout")]
    public int Radius
    {
        get { return _Radius; }
        set { _Radius = value; }
    } */
    private System.Drawing.Color _BorderColor = System.Drawing.Color.Transparent;

    [System.ComponentModel.Category("Appearance")]
    public System.Drawing.Color BorderColor
    {
        get { return _BorderColor; }
        set { _BorderColor = value; }
    }

    private System.Drawing.Color _FillColor = System.Drawing.Color.Blue;

    [System.ComponentModel.Category("Appearance")]
    public System.Drawing.Color FillColor
    {
        get { return _FillColor; }
        set { _FillColor = value; }
    }

    protected override void OnPaint(System.Windows.Forms.PaintEventArgs e)
    {
        base.OnPaint(e);
        System.Drawing.Rectangle RealRect = new System.Drawing.Rectangle(e.ClipRectangle.Location, e.ClipRectangle.Size);
        RealRect.Inflate(-1, -1);

        int Radius = Math.Min(RealRect.Size.Height, RealRect.Size.Width);
        System.Drawing.Rectangle SqRect = new System.Drawing.Rectangle();
        SqRect.Location = RealRect.Location;
        SqRect.Size = new System.Drawing.Size(Radius, Radius);

        System.Drawing.Drawing2D.CompositingQuality PrevQual = e.Graphics.CompositingQuality;
        using (System.Drawing.SolidBrush Back = new System.Drawing.SolidBrush(this.FillColor))
        {
            using (System.Drawing.Pen Pen = new System.Drawing.Pen(new System.Drawing.SolidBrush(this.BorderColor)))
            {
                //e.Graphics.CompositingQuality = System.Drawing.Drawing2D.CompositingQuality.HighQuality;
                e.Graphics.FillEllipse(Back, SqRect);
                e.Graphics.DrawEllipse(Pen, SqRect);
            }
        }

        e.Graphics.CompositingQuality = PrevQual;
    }

    public Swatch()
    {
        this.SetStyle(System.Windows.Forms.ControlStyles.UserPaint, true);
        this.SetStyle(System.Windows.Forms.ControlStyles.OptimizedDoubleBuffer, true);
        this.SetStyle(System.Windows.Forms.ControlStyles.AllPaintingInWmPaint, true);
        this.SetStyle(System.Windows.Forms.ControlStyles.ResizeRedraw, true);
        this.SetStyle(System.Windows.Forms.ControlStyles.SupportsTransparentBackColor, true);
        this.DoubleBuffered = true;
    }
}

Each row is a UserControl which consists of a TableLayoutPanel, labels, a Swatch control, and a NumericUpDown box.

There about 10 rows and they are placed in TableLayoutPanel, which sits inside a TabPage on a tab control. The tab page has AutoScroll set to true so that overflow causes the tab page to scroll.

The problem is that whenever I run the application and scroll up and down, the Swatches (the colored circles) tear and show all sorts of artifacts, as seen in the picture above. I'd like to have clean scrolling with no rendering artifacts.

I've tried using SetStyle (as suggested here Painting problem in windows form) but it has had no effect.

The UserControl (each row) has DoubleBuffered set to true, and that too has had no effect either.

I fear I am missing something rather obvious.

Answer 1

The problem is that you calculate the radius of the circle based on the clipping rectangle. So when the line is only partially visible a bad value is resulted.

You should calculate it based on the real rectangle, the one provided by the base class, and let it being clipped normally.