如何设置自定义圆形头像控件CircularPictureBox的边框颜色？

Problem Statement #

I'm creating a custom PictureBox control for avatar display called CircularPictureBox, here's part of the class code:

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Drawing;
using System.Drawing.Drawing2D;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;

namespace Hector.Framework.Controls
{
    public class CircularPictureBox : PictureBox
    {
        private Color _idlecolor = Color.White;
        // ... rest of the code
    }
}

How can I set the border color for this control?

Solution #

To add a configurable border color to your CircularPictureBox, follow these straightforward steps:

1. Add a Border Color Property
   First, add a private field to store the border color, then expose it as a public property with design-time annotations. This lets you adjust the color directly in the Visual Studio Properties window:

private Color _borderColor = Color.Black; // Default border color

[Category("Appearance")]
[Description("Gets or sets the border color of the circular picture box.")]
public Color BorderColor
{
    get => _borderColor;
    set
    {
        _borderColor = value;
        Invalidate(); // Trigger a repaint to update the border immediately
    }
}

2. Override OnPaint to Draw the Circular Border
   Since this is a circular control, use a GraphicsPath to define the circular shape, then draw the border along that path. Enabling anti-aliasing ensures smoother, cleaner edges:

protected override void OnPaint(PaintEventArgs pe)
{
    // Create a circular path for the control
    using (GraphicsPath path = new GraphicsPath())
    {
        path.AddEllipse(0, 0, Width - 1, Height - 1);
        Region = new Region(path);

        // Draw the border using the configured color
        using (Pen borderPen = new Pen(_borderColor, 2)) // 2 is the default border width
        {
            pe.Graphics.SmoothingMode = SmoothingMode.AntiAlias;
            pe.Graphics.DrawPath(borderPen, path);
        }

        // Let the base PictureBox class handle drawing the actual image
        base.OnPaint(pe);
    }
}

3. Optional: Add a Border Width Property
   If you want users to adjust the border thickness, add a corresponding property to make the control more flexible:

private int _borderWidth = 2;

[Category("Appearance")]
[Description("Gets or sets the width of the border.")]
public int BorderWidth
{
    get => _borderWidth;
    set
    {
        _borderWidth = Math.Max(1, value); // Ensure width is at least 1 to avoid invisible borders
        Invalidate();
    }
}

Then update the Pen initialization to use this property instead of a hardcoded value:

using (Pen borderPen = new Pen(_borderColor, _borderWidth))

Usage Example #

Once implemented, you can set the border color either in code:

// In your form's code-behind
circularPictureBox1.BorderColor = Color.DodgerBlue;
circularPictureBox1.BorderWidth = 3;

Or directly in the Visual Studio Properties window under the "Appearance" category.

内容的提问来源于stack exchange，提问作者Héctor M.