向 Windows 窗体添加圆形按钮

Question

我在 Windows 窗体中创建了一个圆形按钮。按钮没问题。唯一的问题是我希望它的颜色与背景不同，所以我将 BackColor 设置为 GoldenRod。然而，它只是在圆形按钮周围创建了一个“goldenRod”立方体......我该如何制作，以便只有按钮是彩色的？

public MainForm(){

    InitializeComponent();      
    myButtonObject start = new myButtonObject();
    EventHandler myHandler = new EventHandler(start_Click);
    start.Click += myHandler;
    start.Location = new System.Drawing.Point(5, 5);
    start.Size = new System.Drawing.Size(101, 101);
    start.BackColor=System.Drawing.Color.Goldenrod;
    this.Controls.Add(start);
`}

void start_Click(Object sender, System.EventArgs e)
{
    MessageBox.Show("Start");
}

public class myButtonObject : UserControl
{
    // Draw the new button. 
    protected override void OnPaint(PaintEventArgs e)
    {
        Graphics graphics = e.Graphics;
        Pen myPen = new Pen(Color.Black);
        // Draw the button in the form of a circle
        graphics.DrawEllipse(myPen, 0, 0, 100, 100);
        myPen.Dispose();
    }
}

Answer 1

您需要在

Ellipse

方法中填充您正在绘制的

OnPaint()

。

graphics.FillEllipse(Brushes.Goldenrod, new Rectangle(0,0,100,100));
graphics.DrawEllipse(myPen, 0, 0, 100, 100);

然后确保从

start.BackColor

构造函数中删除

MainForm()

属性。

Answer 2

BackColor 将根据提供的

Size

和

Location

更改用户控件矩形的颜色。正如 Evan 所说，您需要使用

FillEllipse

来创建一个实心圆 -

DrawEllipse

仅绘制圆的轮廓。

这是“圆形按钮”问题的完整解决方案，将OP的形式与Evan的答案和悬停事件的处理相结合。

public class MainForm
{
    public MainForm()
    {
        InitializeComponent();
        ClickableCircle circle = new ClickableCircle(center: new Point(150, 150), radius: 50);
        circle.Click += circle_Click;
        Controls.Add(circle);
    }

    private void circle_Click(object sender, EventArgs e)
    {
        MessageBox.Show("Clicked the circle!");
    }
}

class ClickableCircle : UserControl
{
    public readonly Point Center;
    public readonly int Radius;

    public ShapeColoring DefaultColoring { get; set; } = new ShapeColoring()
    {
        Outline = Color.Black,
        Fill = Brushes.Black,
    };

    public ShapeColoring HoverColoring { get; set; } = new ShapeColoring()
    {
        Outline = Color.DarkGray,
        Fill = Brushes.DarkGray,
    };

    private ShapeColoring _coloring = new ShapeColoring();

    public ClickableCircle(Point center, int radius)
    {
        Radius = radius;
        Center = center;
        Location = new Point(x: center.X - radius, y: center.Y - radius);
        Size = new Size(radius * 2, radius * 2);
        _coloring = DefaultColoring;
        MouseEnter += ClickableCircle_MouseEnter;
        MouseLeave += ClickableCircle_MouseLeave;
        Click += ClickableCircle_Click;
    }

    private void ClickableCircle_MouseEnter(object sender, EventArgs e)
    {
        Cursor = Cursors.Hand;
        ChangeColoring(HoverColoring);
    }

    private void ClickableCircle_MouseLeave(object sender, EventArgs e)
    {
        Cursor = Cursors.Default;
        ChangeColoring(DefaultColoring);
    }

    private void ChangeColoring(ShapeColoring newColoring)
    {
        _coloring = newColoring;
        Refresh();
    }

    protected override void OnPaint(PaintEventArgs e)
    {
        Graphics graphics = e.Graphics;
        Pen pen = new Pen(_coloring.Outline);
        try
        {
            Rectangle ellipse = new Rectangle(
                x: 0, // relative to the top-left of this user control, not the whole form
                y: 0,
                // adjust width and height so the outline doesn't get cut off
                width: Size.Width - 1,
                height: Size.Height - 1
            );
            graphics.FillEllipse(_coloring.Fill, ellipse);
            graphics.DrawEllipse(pen, ellipse);
        }
        finally { pen.Dispose(); }
    }
}

class ShapeColoring
{
    public Color Outline { get; set; } = Color.White;
    public Brush Fill { get; set; } = Brushes.White;
}

将鼠标悬停在圆圈上后，光标变为手形，并且圆圈改变颜色：

注释

我必须尝试才能发现很多细微差别：

• 位置和大小可以在circle类构造函数中设置。

• OnPaint

  方法中椭圆的x/y位置是相对于圆的，而不是相对于窗口的。
• 如果你想改变颜色，你需要调用

  Refresh()

  来立即重画 - 请参阅这个SO答案。
• 椭圆的

  width

  和

  height

  需要比全尺寸小1个像素，以防止轮廓被切断。