自定义按钮

Question

如何在WinForms中创建这样的按钮？

总是喜欢这个

Answer 1

我对此进行了编码，这不是一个完整的解决方案，但可以帮助您了解它并进一步制作您自己的按钮：

public class RoundButton : Button
{
    GraphicsPath borderPath;
    protected override void OnSizeChanged(EventArgs e)
    {
        base.OnSizeChanged(e);
        UpdateRegion();
    }
    private void UpdateRegion()
    {
        borderPath = new GraphicsPath();
        borderPath.AddArc(new Rectangle(0, 0, Height, Height), 90, 180);
        borderPath.AddLine(new Point(Height / 2, 0), new Point(Width - Height / 2, 0));
        borderPath.AddArc(new Rectangle(Width - Height, 0, Height, Height), -90, 180);
        borderPath.AddLine(new Point(Width - Height / 2, Height), new Point(Height / 2, Height));
        Region = new Region(borderPath);
    }
    protected override void OnPaint(PaintEventArgs pevent)
    {
        pevent.Graphics.Clear(Color.Black);            
        Color cl1 = isMouseOver ? Color.FromArgb(100, Color.Yellow) : Color.FromArgb(100, Color.Aqua);
        Color cl2 = isMouseOver ? Color.Yellow : Color.Aqua;
        if (MouseButtons == MouseButtons.Left) cl2 = cl1;
        using (LinearGradientBrush brush = new LinearGradientBrush(ClientRectangle, cl1, cl2, 90))
        {
            pevent.Graphics.FillPath(brush, borderPath);
            pevent.Graphics.ScaleTransform(0.8f, 0.4f);                
            pevent.Graphics.TranslateTransform(0.1f * ClientSize.Width, 0.1f * ClientSize.Height, MatrixOrder.Append);
        }
        if(!(MouseButtons == MouseButtons.Left)) 
            pevent.Graphics.FillPath(new SolidBrush(Color.FromArgb(100, Color.White)), borderPath);
        pevent.Graphics.ResetTransform();

        pevent.Graphics.SmoothingMode = SmoothingMode.HighQuality;
        float penSize = MouseButtons == MouseButtons.Left ? 4 : 2.5f;
        using (Pen pen = new Pen(Color.Gray) { Width = penSize })
        {
            pevent.Graphics.DrawPath(pen, borderPath);
        }
        using (StringFormat sf = new StringFormat { LineAlignment = StringAlignment.Center, Alignment = StringAlignment.Center })
        {
            Rectangle rect = ClientRectangle;
            if (MouseButtons == MouseButtons.Left) rect.Offset(-1, -1);
            pevent.Graphics.DrawString(Text, Font, new SolidBrush(ForeColor), rect, sf);
        }
    }
    bool isMouseOver;        
    protected override void OnMouseEnter(EventArgs e)
    {
         base.OnMouseEnter(e);
         isMouseOver = true;             
    }
    protected override void OnMouseLeave(EventArgs e)
    {
        base.OnMouseLeave(e);
        isMouseOver = false;            
    }        
}

这是它的外观：

如果您更换cl1中的cl2和new LinearGradientBrush(...)，按钮看起来会有所不同：

Answer 2

作为解决方法（要删除边框），您可以将Button.FlatStyle设置为Flat并将Button.FlatAppearance.BorderSize设置为0。您也可以修改FlatAppearance.MouseDownBackColor / MouseOverBackColor。

Answer 3

您可以通过影响其.Region属性来重绘按钮的轮廓。这里有一个我前段时间写过的示例代码（现在很快就从VB.NET转换而来），展示了如何创建一个形状为椭圆的按钮，button2，以及一个复杂的多边形（一个X），button1。

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

    namespace WindowsFormsApplication2
    {
        public partial class Form1 : Form
        {
            public Form1()
            {
                InitializeComponent();
            }

            private void Form1_Load(object sender, EventArgs e)
            {
                GraphicsPath pathPolygon = new GraphicsPath(FillMode.Winding);
                GraphicsPath pathEllipse = new GraphicsPath(FillMode.Winding);


                //------ POLYGON (X)
                Point[] points = new Point[12];
                points[0].X = 5;
                points[0].Y = 15;
                points[1].X = 10;
                points[1].Y = 10;
                points[2].X = 18;
                points[2].Y = 18;
                points[3].X = 26;
                points[3].Y = 10;
                points[4].X = 31;
                points[4].Y = 15;
                points[5].X = 23;
                points[5].Y = 23;
                points[6].X = 31;
                points[6].Y = 31;
                points[7].X = 26;
                points[7].Y = 36;
                points[8].X = 18;
                points[8].Y = 28;
                points[9].X = 10;
                points[9].Y = 36;
                points[10].X = 5;
                points[10].Y = 31;
                points[11].X = 13;
                points[11].Y = 23;

                Point maxVals = new Point(31, 36);

                pathPolygon.AddPolygon(points);

                Region region = new Region(pathPolygon);

                button1.BackColor = Color.Red;
                button1.FlatAppearance.BorderSize = 0;
                button1.FlatStyle = FlatStyle.Flat;
                button1.Region = region;
                button1.SetBounds(button1.Location.X, button1.Location.Y, maxVals.X, maxVals.Y);

                Rectangle ellipse = new Rectangle(0, 0, 100, 50);
                maxVals = new Point(100, 50);
                pathEllipse.AddEllipse(ellipse);
                region = new Region(pathEllipse);

                button2.BackColor = Color.Red;
                button2.FlatAppearance.BorderSize = 0;
                button2.FlatStyle = FlatStyle.Flat;
                button2.Region = region;
                button2.SetBounds(button2.Location.X, button2.Location.Y, maxVals.X, maxVals.Y);

            }
        }
    }

正如您所看到的，椭圆选项更简单，但也更不灵活（尽管它可能是您正在寻找的最佳解决方案;请记住，您可以使用{{中的宽度/高度） 1}}“切割形状”）。多边形看起来有点复杂，但是一旦习惯了这个过程就非常简单：想出绘制所需轮廓所需的所有点（例如，对于一个矩形，你需要4个点，4个顶点）并输入它们在我提供的代码中（不要忘记在maxVals中包含最大X / Y值）。

Answer 4

您可以在图片按钮上添加点击事件